Entendendo CSS3

O CSS3 chegou para ajudar e facilitar a vida de muitos web designers e desenvolvedores. Mas o que ele trouxe de tão bom e o que ainda ficou devendo? Entenda mais o CSS3.

O CSS (Cascading Style Sheets - Folha de Estilo em Cascata) é utilizado para controlar o layout e o estilo de páginas web. A especificação CSS3 ainda está em desenvolvimento mas a maioria de suas funcionalidades são compatíveis com os browsers mais utilizados no mercado. 

Esta "folha de estilo" é utilizada para posicionar e modificar elementos (previamente nomeados em classes e identificadores) em uma página web. As classes podem ser utilizadas para vários objetos, o que facilita no desenvolvimento e criação dos estilos. Para quem já conhece, o CSS3 é bem simples se comparado com as outras versões. Para quem ainda não conhece, sugiro que estude sobre o assunto neste site.

CSS3

Novidades da versão 3

Você pode criar bordas arredondadas e sombreamento sem precisar de imagens ou uma infinidade de objetos e classes, utilizando apenas as propriedades border-radius, texto-shadow e box-shadow.

Outra novidade é o controle do tamanho da imagem de plano de fundo com o background-size, a utilização de várias imagens do plano de fundo e o posicionamento de imagens de plano de fundo com o background-origin.

Antes do CSS3, para utilizar uma fonte diferente das padrões utilizadas na instalação dos sistemas operacionais em sua página, era necessário utilizar imagens. Agora é possível utilizar qualquer fonte com a regra @font-face. Ainda para modificar textos, temos as propriedades column-countcolumn-gap e column-rule que dividem o texto em colunas como nos jornais e revistas.

Com a propriedade transform, você pode mudar a forma de objetos simples utilizando transformação 2D e 3D. E com a propriedade transition, e as regras @keyframes e animation você pode criar pequenas animações na tela. E a interação com o usuário continua com as propriedades resize, box-sizing e outline-offset que permitem redimensionar objetos na tela.

Exemplos

Bordas arredondadas e texto sombreado
 
    div{
  border:2px solid;
  border-radius:25px;
  text-shadow: 5px 5px 5px #FF0000;
  -moz-border-radius:25px; /* Firefox 3.6 and earlier */
}

Este é um exemplo CSS3


Tags desta matéria

Deixe sua opnião