CSS 3: A Web com mais estilo

CSS 3: A Web com mais estilo

Uma breve visão do CSS3 e seus recursos.

A64c4ca5f775360dee0a3b6244a9a4df?s=128

Rafael Silva

July 01, 2013
Tweet

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?