Curso de Web Design | Como Criar uma Tabela Dinâmica – Parte 02: O Css3

Curso de Web Design | Como Criar uma Tabela Dinâmica - Parte 02: O Css3

Na primeira aula desta série mostrei como que se cria a estrutura html5 da tabela do nosso exercício, tendo como base uma ilustração feita num programa de desenho vetorial.

E, na aula deste artigo estarei dando continuidade a atividade mostrando como criar os estilos css do projeto seguindo também, o que já foi definido pelo designer.

Como a vídeo aula abaixo é uma continuação da série como criar tabela dinâmica, recomendo que veja o primeiro vídeo da série, para que possas construir o código html do projeto. Clique Aqui e Veja a Primeira Aula!

Curso de Web Design | Como Criar uma Tabela Dinâmica – Parte 02: O Css3

Dentro das minhas explicações, as quais durante a aula, duas são bem interessantes: 1) como analisar um desenho convertendo-o em código css e, 2) como é possível atualmente gerar efeitos, como gradientes, em suas páginas só usando código.

Quer Baixar o Arquivo Html5 e Css3 da Aula?

Para baixar os arquivos html e css que criei durante a aula, basta digitar o teu email no campo abaixo e clicar no botão.



Curso de Web Design | Faça Mais Projetos com Html5, Css3, Js e Php!

Aqui aproveito para lembrar que no curso Do Zero a Webdesigner com Guilherme, ensino as linguagens html5, css3, php, javascript indo do zero até o desenvolvimento do projetos usando-as.

E, algo legal nisso é que você tem aulas sobre a linguagem e aulas sobre como criar projetos com esta, e isso facilita.

Pois primeiro você aprenderá como a linguagem funciona, tanto na sua própria lógica, e sintaxe (maneira de ser escrita) até a sua utilização na criação dos projetos. Clique Aqui e Veja o que Ensino no Curso!

O que É e Como Criar Gradientes com a Função Linear Gradient!

Caso você não saiba, um gradient é um degradê de tons (cores) o qual num ponto temos uma cor e no outro ponto uma outra cor, geralmente diferente, e entre elas temos a transição entre estes tons, criando assim um efeito suave, agradável.

Na versão do css, o css3, temos a possibilidade de criar gradientes tanto circulares e como linear usando apenas código, e isso é ótimo, pois torna a coisa muito prática!

Pois, antigamente, o que tínhamos que fazer, criavamos uma imagem com o efeito de gradiente no software de ilustração e gerávamos o arquivo jpg ou png para depois colocarmos este como background.

Agora, para criar gradientes lineares basta usar a função linear-gradient e definir as suas configurações. Na vídeo aula acima mostro na prática, como fazer isso.

Projeto Completo: Como Criar uma Tabela Dinâmica com Html5, Css3 e Javascript!

Este projeto é formado por vídeos aulas mostrando como criar a estrutura html5, como criar os estilos css3, que é o tema deste artigo e por fim, mostro como criar os códigos javascript que é o tema da próxima aula.

Então, para que você possa concluir o projeto é preciso ver as 3 aulas, por isso clique aqui e veja a aula sobre javascript.

Dúvidas e Sugestões? Entre em contato!

Espero que goste deste artigo como um todo, tanto da parte escrita como da vídeo aula mais acima, pois tenho procurado criar conteúdos que sejam utéis para os estudantes de webdesign.

Porém, caso surja alguma dúvida, afinal é natural do aprendizado as dúvidas, os questionamentos, fique a vontade para deixar o seu comentário logo abaixo.

Caso esteja querendo aprender algum tema, assunto específico também pode deixar o seu comentário. Abraços e até o próximo artigo!

About

Academicamente sou formado em design gráfico (Unip), técnico em multimídia (Senac), possuo cursos livres em web design (Microcamp), ilustração e animação 3d (Melies e Saga), produção de jogos (Unidev), produção de vídeos e efeitos visuais (Saga) entre outros. Atualmente, tenho 28 anos e profissionalmente já tenho atuado como professor em curso técnico (FPA), em curso profissionalizante (DataNet).

View all posts by

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *