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.
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-count, column-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 */
}