CSS3

	Outros projetos Wikimedia também contêm material sobre este tema:
	Livros e manuais no Wikilivros

CSS3 - Cascading Style Sheets
Extensão do arquivo	.css
MIME	texto/css
Desenvolvido por	W3C
Tipo de formato	Folha de estilo
Variante de	XML
Página oficial	http://www.w3.org/TR/css3-roadmap/

CSS3 é a mais nova versão das famosas Cascading Style Sheets (ou simplesmente CSS), onde se define estilos para páginas web com efeitos de transição, imagem, e outros, que dão um estilo novo às páginas Web 2.0 em todos os aspectos de design do layout.

A principal função do CSS3 é abolir as imagens de plano de fundo, bordas arredondadas, apresentar transições e efeitos para criar animações de vários tipos, como um simples relógio de ponteiros.

Isso se deve aos novos browsers que estão chegando, com suporte à essa linguagem, como o Google Chrome, Opera, Internet Explorer 9, Apple Safari e Mozilla Firefox. Assim, o CSS3 facilitará o trabalho dos que trabalham com web e também dos usuários, pela variedade de transformações na apresentação de um website.

Diferenciações

elemento
{
   -webkit-border-radius:10px;
   -moz-border-radius:10px;
   -o-border-radius:10px;
   -khtml-border-radius:10px;
}

Como pode-se ver, foram necessárias quatro linhas de código para produzir bordas arredondadas num elemento HTML. Cada prefixo da propriedade border-radius serve para uma plataforma de browsers. A -webkit, para browsers como Chrome e Safari, -moz para o Firefox, -o para Opera e -khtml para Konqueror. Obs.: há browsers que não aceitam todas as propriedades CSS3. Para testar, utilize Teste de Seletores do CSS3 .Info.

Seletores

Veja uma lista dos principais seletores (propriedades) CSS3 e seus exemplos:

   border-radius:[tamanho];  /* bordas arredondadas */
      border-radius:5px;
   box-shadow:[topo] [esquerda] [borrão] [cor];  /* sombra */
      box-shadow:2px 2px 2px #000;
   text-shadow:[topo] [esquerda] [borrão] [cor];  /* sombra em letras */
      text-shadow:2px 2px 2px #000;
   opacity:[valor];  /* transparência */
      opacity:0.5;
   word-wrap:[definição]; /* quebra de palavra (quando ela ultrapassa o tamanho do elemento) */
      word-wrap:break-word;
   background-size:[largura] [altura];  /* especifica o tamanho do plano de fundo */
      background-size:100px 80px;

Transformações

O CSS3 é extremamente capaz de construir animações que impressionam o mais avançado desenvolvedor web, tanto em 2 como em 3 dimensões. Os mais comuns são os efeitos de rotação, movimento e transição.

Já existem na web empresas fazendo propaganda utilizando a criatividade e o poder dessa nova era de estilos. Veja alguns exemplos:

Agora você já pode ter noção do que o CSS3 é capaz.

Concorrência

Agora resta escolher qual das linguagem será usadas para a produção do layout de um website: CSS3, JQuery ou Flash. As três são muito poderosas, cada uma com suas vantagens e, para melhorar as coisas, elas podem trabalhar em conjunto, dependendo da criatividade do desenvolvedor. São infinitas as possibilidades e só temos a ganhar com usabilidade, rapidez e elegância.

Ver também

Ligações externas

«CSS3 .Info - All you ever needed to know about CSS3» (em inglês)
«W3C Introduction to CSS3» (em inglês)
«W3C CSS Validation Service» (em inglês)
«W3Schools CSS Tutorial» (em inglês)
«Maujor - tutoriais css»
«Surfin's Safari - The Webkit Blog» (em inglês)

Wikipédia:Tradução/CSS3