Definição de um documento CSS3

Escrito por bert markgraf Google | Traduzido por mariana de mello andré scarani
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Definição de um documento CSS3
As folhas de estilo em cascata de nível 3 (CSS3) definem como o documento HTML será exibido (Comstock/Comstock/Getty Images)

Um documento CSS3 é feito na linguagem Cascading Style Sheets (Folhas de estilo em cascata) e especifica como as informações de um documento HTML associado serão exibidas. Suas definições possuem significativamente mais funções que as versões anteriores. Além das funções gráficas adicionais, o CSS3 permite que você selecione mais tags HTML e defina como elas serão exibidas em uma página da web. A estrutura modular do CSS3 permite um lançamento gradual de novas funções, permitindo que os navegadores se atualizem em etapas para que aceitem as definições mais novas.

Caixas e sombreamento

O CSS3 permite a criação de caixas e outros elementos com bordas arredondadas e sombreamento. O atributo "border-radius: 10px" arredonda as bordas de uma caixa em um quarto de círculo com um raio de dez pixels. O atributo "box-shadow: 3px 3px 2px blue" cria uma sombra para a caixa. A sombra fica deslocada três pixels verticalmente e três pixels horizontalmente. Ela fica borrada em dois pixels e possui a cor azul. O mesmo atributo pode ser aplicado ao texto, seguindo a sintaxe "text-shadow 1px 1px red", que cria uma sombra vermelha, sem nenhuma parte borrada, e deslocada um pixel do texto.

Transições

Outra característica do CSS3 é o atributo "transition". Ele permite que um gráfico de um site seja animado através da transição de uma imagem para outra. Normalmente, quando um objeto muda, quando o cursor do mouse é colocado sobre ele, por exemplo, esta mudança é instantânea. O designer pode controlar essa mudança através do atributo transition. A sintaxe "transition color 5s ease-in 1s" significa que a cor do objeto será mudada após um segundo de espera. A mudança ocorrerá ao longo de cinco segundos, e o ease-in significa que a mudança começará lentamente e acelerará gradualmente. Além dele, há também o ease-out, que começa rapidamente e termina lentamente, o linear, que faz a mudança de forma constante, e o ease, que começa e termina lentamente.

Seletores

Os seletores permitem que os designers apliquem atributos a elementos específicos. O CSS possui uma grande variedade de seletores em sua definição, mas o CSS3 adiciona diversos outros, que permitem determinar os atributos de alguns elementos de uma série. Esses são os seletores first-child e last-child. Por exemplo, a sintaxe para aplicar a cor vermelha ao primeiro elemento de uma lista é "li:first-child{color:red;}", onde "li" é o elemento de uma lista. Esses seletores conseguem mudar outros atributos, como centralizar o último parágrafo de uma página, através da sintaxe "p:last-child {align:center}", onde p é o elemento de parágrafo.

Gradientes

Outra função nova do CSS3 é a capacidade de especificar gradientes de cores, em vez de usar fundos de uma única cor. Os designers costumavam usar imagens com gradientes de cores como o fundo da página, mas com o CSS3, é possível especificar duas cores e fazer que uma transição suave entre elas seja usada como o fundo de uma página. A sintaxe "background linear-gradient (yellow, white);" faz um gradiente horizontal, com amarelo na parte superior da página e branco na parte inferior.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível