Cascading Style Sheets
Level 3
Introdução
• As Cascading Style Sheets começaram a ser desenvolvidas
em 1994, pela necessidade de se formatar a informação
do HTML;
•...
Compatibilidade
• Em CSS 3, cada motor de renderização é
declarado de uma forma diferente:
• Webkit (Safari / Chrome):
-webkit-atributo
Ge...
Bordas
• border-color
– utiliza uma cor para cada 1px de borda
• Exemplo de border-color
– http://www.css3.info/preview/colored-b...
• border-image
– permite o uso de imagens na borda
• Exemplo de border-image
– http://www.css3.info/preview/border-image/
• border-radius
– controle de curvatura da borda
• Exemplo de border-radius
– http://www.css3.info/preview/rounded-border/
• box-shadow
– cria uma sombra no elemento HTML
• Exemplo de box-shadow
– http://www.css3.info/preview/box-shadow/
Backgrounds
• background-origin
– determina qual o ponto inicial de onde o
background-position é calculado
• background-clip
– indica ...
• múltiplos backgrounds
– agora é possível adicionar diversas imagens de
background em um único elemento HTML
• Exemplo de...
Texto
• text-shadow
– determina uma sombra para um texto
• Exemplo de text-shadow
– http://www.css3.info/preview/text-shadow/
• text-overflow
– maneira de demonstrar quando o texto ultrapassar a
largura do elemento que o envolve
– existem dois valo...
Outras novas propriedades
• resize
– http://www.css3.info/preview/resize/
• outline
– http://www.css3.info/preview/outline/
• font-face
– http://www...
Seletores
• seletores CSS nos permitem manipular um ou
vários elementos HTML sem a necessidade de
IDs ou classes.
Seletores de Substring
• E[att^=“val”]
– Representa um elemento com o atributo att que
começa com o prefixo “val”
• E[att$=“val”]
– Representa um...
Pseudo classes estruturais
• E:nth-child(n)
– O valor (n) representa o enésimo filho do elemento pai
• E:first-child
– Representa o primeiro filho do...
• Outros seletores
– http://maujor.com/tutorial/seletores-css3.php
– http://www.mateussouza.com/css/iniciando-com-
css3
CSS Transformation e
CSS Animation
• CSS Transformation permite a transformação de
elementos HTML, como escala, rotação e
translação.
• CSS Animation permite...
Gostaram? Agora imaginem
as possibilidades com
HTML 5 + CSS 3...
Obrigado :)
Alexandre Romero Rodrigues
Upcoming SlideShare
Loading in …5
×

CSS 3

1,668 views

Published on

Published in: Automotive, Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,668
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
42
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CSS 3

  1. 1. Cascading Style Sheets Level 3
  2. 2. Introdução
  3. 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. 4. Compatibilidade
  5. 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. 6. Bordas
  7. 7. • border-color – utiliza uma cor para cada 1px de borda • Exemplo de border-color – http://www.css3.info/preview/colored-border/
  8. 8. • border-image – permite o uso de imagens na borda • Exemplo de border-image – http://www.css3.info/preview/border-image/
  9. 9. • border-radius – controle de curvatura da borda • Exemplo de border-radius – http://www.css3.info/preview/rounded-border/
  10. 10. • box-shadow – cria uma sombra no elemento HTML • Exemplo de box-shadow – http://www.css3.info/preview/box-shadow/
  11. 11. Backgrounds
  12. 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. 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. 14. Texto
  15. 15. • text-shadow – determina uma sombra para um texto • Exemplo de text-shadow – http://www.css3.info/preview/text-shadow/
  16. 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. 17. Outras novas propriedades
  18. 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. 19. Seletores
  20. 20. • seletores CSS nos permitem manipular um ou vários elementos HTML sem a necessidade de IDs ou classes.
  21. 21. Seletores de Substring
  22. 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. 23. Pseudo classes estruturais
  24. 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. 25. • Outros seletores – http://maujor.com/tutorial/seletores-css3.php – http://www.mateussouza.com/css/iniciando-com- css3
  26. 26. CSS Transformation e CSS Animation
  27. 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. 28. Gostaram? Agora imaginem as possibilidades com HTML 5 + CSS 3... Obrigado :) Alexandre Romero Rodrigues

×