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.

Outras pessoas estão lendo

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