CSS 3: A Web com mais estilo

Uma breve visão do CSS3 e seus recursos.

Transcript

1. CSS 3: A Web com estilo
2. @rfsbsb
3. O quê é? • Criado e mantido pelo W3C • Primeira versão em 1996 • Segunda versão em 1998 • Terceira versão em 1999
4. 1996 1998 2004-2011 1999-Atual CSS 1 CSS 1 CSS 1 CSS 1 CSS 3 CSS 3 CSS 3 CSS 3 CSS 2.0 CSS 2.0 CSS 2.0 CSS 2.0 CSS 2.1 CSS 2.1 CSS 2.1 CSS 2.1 CSS 2 Evolução do CSS
5. Suporte
6. Can I Use? Can I Use? http://caniuse.com http://caniuse.com Can I Use? Can I Use? http://caniuse.com http://caniuse.com
7. Seletores
8. tradicionais Universal = * Elemento = h1, span, div, p Classe = .caixa, .bola, .triangulo ID = #conteudo, #direita, #esquerda
9. :first-child
10. :last-child
11. :nth-child() ul :nth-child(odd) { background: #00FF00; } 1 2 3 4 5 6 7 8
12. :nth-child() ul :nth-child(3n) { background: #00FF00; } 1 2 3 4 5 6 7 8 ul :nth-child(3) { background: #00FF00; } 1 2 3 4 5 6 7 8
13. :nth-child() ul :nth-child(3n+2) { background: #00FF00; } 1 2 3 4 5 6 7 8
14. :not() ul :not(:nth-child) { background: #00FF00; } 1 2 3 4 5 6 7 8
15. pseudo-elementos p:after { content: "é legal"; color: #00FF00; } CSS Java não é legal é legal
16. pseudo-elementos p:before { content: url(angrybird.png); color: #00FF00; } divisível ágil explosivo
17. General siblings h1 ~ p { color: grey; } Meu título Morbi cursus turpis mauris, vitae molestie mi molestie ac. Vestibulum nec massa sed sapien consectetur convallis. Mauris semper massa non purus iaculis blandit. Sed tincidunt enim id lobortis placerat. Aliquam luctus dolor diam, quis lacinia nulla placerat vel. Aenean ut eros eget ipsum blandit pulvinar eu a odio. Proin vitae lacus nulla. Donec dignissim quam vel turpis blandit rhoncus. Vestibulum fermentum, neque in tempus gravida, tellus nulla blandit arcu, eget consectetur elit risus vel lorem. Nam ut tristique nibh, id aliquam erat.
18. Adjacent siblings h1 + p { color: grey; } Meu título Morbi cursus turpis mauris, vitae molestie mi molestie ac. Vestibulum nec massa sed sapien consectetur convallis. Mauris semper massa non purus iaculis blandit. Sed tincidunt enim id lobortis placerat. Aliquam luctus dolor diam, quis lacinia nulla placerat vel. Aenean ut eros eget ipsum blandit pulvinar eu a odio. Proin vitae lacus nulla. Donec dignissim quam vel turpis blandit rhoncus. Vestibulum fermentum, neque in tempus gravida, tellus nulla blandit arcu, eget consectetur elit risus vel lorem. Nam ut tristique nibh, id aliquam erat.
19. outros p:only-child p:empty p:root p:nth-of-type p:enabled p:checked p::selection
20. Cores, bordas e Transparências
21. rgb (red, green, blue) rgba = rgb + alpha .caixa { background-color: rgba(255, 255, 255, 0.5); }
22. hsl (hue, saturation, luminosity) hsla = hsl + alpha
23. .caixa { background-color: hsla(50, 50%, 50%, 0.5) } hsl (hue, saturation, luminosity) hsla = hsl + alpha
24. .caixa { background-image: linear-gradient (45deg, #FFF, #000); } Gradientes .caixa { background-image: linear-gradient(#fff 0%, #000 47%, #ff0); }
25. Gradientes .caixa { background-image: radial-gradient (#291633, #D35529); }
26. border radius .caixa { border-radius: 5px; } .caixa { border-radius: 50px; }
27. Sombreamento Sombreamento
28. Box shadow .caixa { box-shadow: 5px 5px 10px 10px rgba(0, 0, 0, 0.75); }
29. Text shadow .caixa { text-shadow: 5px 5px 10px 10px rgba(0, 0, 0, 0.75); } TEXT SHADOW TEXT SHADOW TEXT SHADOW TEXT SHADOW
30. Transformações
31. .caixa { transform: scale(0.5); } escala
32. .caixa { transform: scale(0.5); } escala
33. .caixa { transform: translate(50px, 50px); } traslação
34. .caixa { transform: skew(30deg, 20deg); } inclinação
35. Transições
36. transition .caixa { background: #FFFFFF; transition: 1s background ease-in; } .caixa:hover { background: #000000; }
37. animação .caixa { animation: primeira 5s; } @keyframes primeira { from { background: red} to {background: yellow} } 5s
38. Fontes
39. Font face @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(source.woff) format('woff'); }
40. Multiplos dispositivos
41. Media Queries @media screen and (max-width: 800px) { body { font-size: 20px; } }
42. Media Queries @media screen and (min-width: 1200px)
43. Media Queries @media screen and (max-width: 320px)
44. Créditos • html5rocks.com • w3schools.com • speakerdeck.com • w3.org • caniuse.com • css3pie.com
45. Dúvidas?