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, 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;

Novidades do CSS3 juntamente com o HTML5

O quê chamou atenção de muita gente, foi a nova forma de usar a inovação do CSS3, ele colabora com o HTML5. Agora, a utilização, você poderá esquecer aquelas div's que ficaram para história de um WebDesigner, pois agora, a tive que você abriu (exemplo: header), não precisa ser uma div, pode ser header#div, veja exemplos

   header#header:{ conteudo };  /* abrindo o header com a mesma div, agora o CSS3 permite isso */
      article#corpo:{ conteúdo} ; /* O corpo da página no CSS3, só funciona com article, caso contrario o corpo fica desalinhado */
   footer#footer: { conteúdo };  /* A mesma coisa com o header também é possível fazer com o footer */
      div.videos: { conteúdo }; /* Esse é a mesma coisa que você usar a class, só que em vez de colocar só o "." (ponto) você colocar div antes */

Simples e ao mesmo tempo complicado não? Mas ó, é difícil mas é legal e bom de se usar :)

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.

Existem, na web, empresas fazendo propaganda utilizando a criatividade e o poder dessa nova era de estilos.

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

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)