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.

Compatibilidade

Não são todas as versões dos navegadores que suportam.

• Internet Explorer 7 e 8 – Muito pouco ou quase nenhum suporte.
• Internet Explorer 9 – Suporta muito bem.
• Firefox 3 – Suporta razoavelmente bem.
• Firefox 4 – Suporta muito bem.
• Safari, Chrome e Opera – Suportam muito bem.

A tendência é que em pouco tempo os usuários, até mesmo os leigos, atualizem seus navegadores, principalmente pela chegada do HTML5.

Prefixos CSS3

O CSS3 ainda não está completamente implementado e muito menos os Browsers seguem o mesmo padrão para cada propriedade. Por este motivo, algumas propriedades devem ser precedidas de um prefixo que indica que, àquela propriedade, se trata de uma extensão que somente aquele navegador específico interpretará.

• Safari e Chrome: -webkit-
• Firefox: -moz-

Vale ressaltar que estes prefixos não são hacks, são recursos do browser.

A proposta da W3C é tornar “CrossBrowser” estas propriedades, de modo que funcionem em todos os navegadores sem diferença. Isso ainda não é realidade nos navegadores atuais, mas não se preocupe, em breve, com a chegada do HTML5 as coisas mudarão. Já estão mudando!

Principais novidades do CSS3

O artigo será breve, mostraremos na prática apenas algumas propriedades. Mas veja a lista das principais novidades do CSS3:

Bordas

• border-radius
• border-color
• box-shadow
• border-image

Texto

• text-shadow
• word-wrap
• @font-face
• text-overflow

Background

• background-clip
• background-origin
• background-size
• – Múltiplos backgrounds (Vários backgrounds)

Cores 

• HSL
• HSLA
• RGBA
• – Opacidade

Interface

• box-sizing
• resize
• outline
• nav-top
• nav-right
• nav-bottom
• nav-left

Seletores 

Seletores por atributos, igual jQuery. Lembra? Exemplo:

 a[id="link-site"] 

Overflow / Barra de rolagem

Terá como definirmos se a barra de rolagem horizontal ou vertical deve aparecer, sem o uso de JavaScript (Graças ao CSS3).

• overflow-x
• overflow-y

Outros Recursos

• Media Queries
• Web Fonts
• Criação de múltiplas colunas de texto
• Etc.

CSS3 na prática

Agora vamos brincar um pouco com CSS3. Os exemplos mostrados aqui foram executados nos navegadores Firefox 4 e Google Chrome 9.

border-radius

Permite arredondar os cantos de um elemento HTML, comumente usado em Divs. Exemplo:

Categorias:Diversos

Tags:Background, bordas, border-radius, compatibilidade, Cores, CSS, CSS3, CSS3 na prática, dicas CSS, Interface, novidades css3, Overflow, Principais novidades do CSS3, Seletores, texto