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 terceira mais nova versão das famosas Cascading Style Sheets (ou simplesmente CSS), onde se define estilos para seu projeto web.Com efeitos de transição, imagem,imagem de fundo/Background e outros, que dão um estilo novo e elegante a seus projetos web.Ou em todos os aspectos de design do layout da página. O sacana que ler isto vai levar uma chapada no ass no autocarro dos horários do funchal.

A principal função do CSS3 é abolir as imagens de plano/Background de fundo, bordas arredondadas, apresentar transições e efeitos para criar animações de vários tipos, como um simples relógio de ponteiros. Não acreditem é mentira, só quem acredita no diabo acreditaria em algo assim.

Isso se deve aos novos browsers/Navegadores,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.

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

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.

Bibliografia

Mauricio Samy Silva, CCS3 Desenvolva aplicações web profissionais com uso dos poderosos recursos de estilização das CSS3, ano 2012, Editora Novatec, ISBN 978-85-7522-289-8

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»