O documento descreve as principais novidades das Cascading Style Sheets nível 3 (CSS3), incluindo novas propriedades para bordas, backgrounds, texto, seletores e transformações/animações que permitem maior controle sobre a formatação e estilização de elementos HTML. O CSS3 ainda está em desenvolvimento mas deve ser implementado mais rápido que versões anteriores devido ao suporte dos navegadores modernos.

1. Cascading Style Sheets
Level 3

2. Introdução

3. • As Cascading Style Sheets começaram a ser desenvolvidas
em 1994, pela necessidade de se formatar a informação
do HTML;
• Em 1996 apareceu a especificação das Cascading Style
Sheets Level 1 (CSS 1) e, em 1998, das CSS Level 2;
• CSS 3 ainda está em desenvolvimento, porém deve
demorar menos que seus antecessores para ser
implantado, devido ao suporte dos novos navegadores;
• A especificação do CSS 3 foi dividida em módulos,
tornando mais rápida a aprovação e implementação dos
elementos. A lista dos módulos pode ser vista aqui.

4. Compatibilidade

5. • Em CSS 3, cada motor de renderização é
declarado de uma forma diferente:
• Webkit (Safari / Chrome):
-webkit-atributo
Gecko (Firefox / Flock):
-moz-atributo
Trident (Internet Explorer):
atributo

6. Bordas

7. • border-color
– utiliza uma cor para cada 1px de borda
• Exemplo de border-color
– http://www.css3.info/preview/colored-border/

8. • border-image
– permite o uso de imagens na borda
• Exemplo de border-image
– http://www.css3.info/preview/border-image/

9. • border-radius
– controle de curvatura da borda
• Exemplo de border-radius
– http://www.css3.info/preview/rounded-border/

10. • box-shadow
– cria uma sombra no elemento HTML
• Exemplo de box-shadow
– http://www.css3.info/preview/box-shadow/

11. Backgrounds

12. • background-origin
– determina qual o ponto inicial de onde o
background-position é calculado
• background-clip
– indica se o background aplica-se também na área da
borda ou não
• background-size
– determina o tamanho da imagem de background

13. • múltiplos backgrounds
– agora é possível adicionar diversas imagens de
background em um único elemento HTML
• Exemplo de múltiplos backgrounds
– http://www.css3.info/preview/multiple-
backgrounds/

14. Texto

15. • text-shadow
– determina uma sombra para um texto
• Exemplo de text-shadow
– http://www.css3.info/preview/text-shadow/

16. • text-overflow
– maneira de demonstrar quando o texto ultrapassar a
largura do elemento que o envolve
– existem dois valores: ellipsis e clip
• Exemplo de text-overflow
– http://www.css3.info/preview/text-overflow/

17. Outras novas propriedades

18. • resize
– http://www.css3.info/preview/resize/
• outline
– http://www.css3.info/preview/outline/
• font-face
– http://www.css3.info/preview/web-fonts-with-font-face/
• múltiplas colunas
– http://www.tableless.com.br/css3-columns
• recursos de voz
– http://www.css3.info/preview/speech/

19. Seletores

20. • seletores CSS nos permitem manipular um ou
vários elementos HTML sem a necessidade de
IDs ou classes.

21. Seletores de Substring

22. • E[att^=“val”]
– Representa um elemento com o atributo att que
começa com o prefixo “val”
• E[att$=“val”]
– Representa um elemento com o atributo att que
termina com o sufixo “val”
• E[att*=“val”]
– Representa um elemento com o atributo att que
contém ao menos uma instância do da substring
“val”

23. Pseudo classes estruturais

24. • E:nth-child(n)
– O valor (n) representa o enésimo filho do elemento pai
• E:first-child
– Representa o primeiro filho do elemento pai
• E:last-child
– Representa o último filho do elemento pai
• E:first-line
– Refere-se a primeira linha do elemento
• E:first-letter
– Refere-se a primeira letra do elemento

25. • Outros seletores
– http://maujor.com/tutorial/seletores-css3.php
– http://www.mateussouza.com/css/iniciando-com-
css3

26. CSS Transformation e
CSS Animation

27. • CSS Transformation permite a transformação de
elementos HTML, como escala, rotação e
translação.
• CSS Animation permite movimentar elementos
HTML com a ação do usuário (click, hover, focus,
etc).
• Exemplos de CSS Transformation e CSS
Animation
– http://www.the-art-of-web.com/css/css-animation/

28. Gostaram? Agora imaginem
as possibilidades com
HTML 5 + CSS 3...
Obrigado :)
Alexandre Romero Rodrigues