Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Os paranauês do CSS3

Os paranauês do CSS3

CSS3 é demais!
Ele vem pra ajudar a vida dos desenvolvedores e enriquecer as aplicações web com detalhes que podem enriquecer a experiência do usuário. Nessa talk abordamos um pouco sobre porque CSS3 é tão legal além de adentrar em alguns paranuês da linguagem, mostrando sintaxe, exemplos, snippets e pegadinhas.

C4d7da8ef43f08bdbf8cc23fd822c7f9?s=128

Raphael Fabeni

October 25, 2014
Tweet

Transcript

  1. OS PARANAUÊS DO CSS3 @raphaelfabeni

  2. @raphaelfabeni http://raphaelfabeni.com.br

  3. None
  4. http://bit.ly/raphael-tableless

  5. http://bit.ly/css-sp http://bit.ly/info-css-sp

  6. http://bit.ly/info-css-sp http://bit.ly/css-sp

  7. http://bit.ly/info-css-sp http://bit.ly/css-sp

  8. http://bit.ly/info-css-sp http://bit.ly/css-sp

  9. http://bit.ly/info-css-sp http://bit.ly/css-sp

  10. cssconfbrasil.com.br

  11. CSS3 é demais!

  12. Mas e aí... Estamos usando?

  13. http://bit.ly/start-using-html5-css3

  14. Aceitar que algumas coisas não irão funcionar no seu IE8

  15. O usuário tem que atingir o objetivo dele!

  16. Será que é tão legal?

  17. Borda arredondada e sombra os antigos terrores do front-end

  18. Detalhes

  19. None
  20. http://bit.ly/transicoes-inteligentes

  21. Design não é apenas o que parece e o que

    se sente. Design é como funciona! Steve Jobs
  22. web ≠ impresso

  23. web ≠ impresso interativo estático

  24. None
  25. http://bit.ly/transitional-interfaces

  26. Coisas boas e não tão boas

  27. FLEXÍVEL

  28. FLEXÍVEL ESCALA

  29. FLEXÍVEL ESCALA LEVEZA

  30. FLEXÍVEL ESCALA LEVEZA VELOCIDADE

  31. EXPERIMENTO

  32. EXPERIMENTO EXCESSO

  33. EXPERIMENTO EXCESSO SUPORTE

  34. EXPERIMENTO EXCESSO SUPORTE REDUNDÂNCIA

  35. Pré processadores

  36. None
  37. “…preprocessors can be fantastic tools in the right hands. Tread

    carefully. In my experience, the longer you use them, the less useful they become. More than anything, it depends.” Daniel Eden
  38. Fique bom em CSS! Aprenda os paranuês...

  39. Aí depois...

  40. Fique muito bom em CSS! ¯\_(ツ)_/¯ Já vai manjar todos

    os paranuês...
  41. “Pré processadores podem ajudar como também podem maltratar bastante. Basta

    um escorregão para que seu projeto vire um inferno.” Diego Eis
  42. “Não é porque você pode que você deve.” Rafael Rinaldi

    apud Lucas Mazza
  43. “Não é porque tá funcionando que tá bom.” eu mesmo

  44. Paranauês...

  45. Transform #paranaue01

  46. 9.0 4.0 3.1 10.5 3.5 3.2 mini ... 2.1 7.0

    11.5 Suporte transform 37 32 10 9.9
  47. Prefixos Sintaxe -webkit-transform: paranaues; -moz-transform: paranaues; -ms-transform: paranaues; -o-transform: paranaues;

    transform: paranaues; transform: transform-function(value); transform
  48. Translate transform: translate(value, value); // X e Y transform: translateX(value);

    // X transform: translateY(value); // Y .class { transform: translateX(50px); } .class { transform: translate(50px, 25px); } transform
  49. transform Translate transform: translateX(100px);

  50. transform Translate transform: translateY(100px);

  51. Skew transform: skewX(value) skewY(value); .class { transform: skewY(25deg); } .class

    { transform: skewX(25deg); } transform
  52. transform Skew transform: skewX(20deg);

  53. transform Skew transform: skewY(20deg);

  54. Transform origin transform-origin: valueX valueY; .class { transform-origin: 25% 75%;

    } .class { transform-origin: top left; } transform
  55. transform Skew | origin transform: skewX(20deg); transform-origin: top left;

  56. transform Skew | origin transform: skewY(20deg); transform-origin: top left;

  57. Scale transform: scaleX(value); transform: scaleY(value); transform: scale(value); .class { transform:

    scale(1.25); } .class { transform: scaleX(0.75); } transform
  58. transform Scale transform: scaleX(0.75);

  59. transform Scale transform: scaleY(0.75);

  60. transform Scale transform: scale(0.75);

  61. transform Scale | origin transform: scale(0.75); transform-origin: top left;

  62. Rotate transform: rotate(value); transform: rotateX(value); transform: rotateY(value); .class { transform:

    rotate(45deg); } transform
  63. transform Rotate transform: rotate(-25deg);

  64. transform Rotate | origin transform: rotate(-25deg); transform-origin: bottom left;

  65. 3D transform

  66. transform Rotate X transform: rotateX(180deg);

  67. transform Rotate Y transform: rotateY(180deg);

  68. Perspective perspective: value; .parent { perspective: 600px; } transform

  69. transform Rotate X | perspective transform: rotateX(180deg); perspective: 600px;

  70. transform Rotate Y | perspective transform: rotateY(180deg); perspective: 600px;

  71. Transform style transform-style: value; .class { perspective: preserve-3d; } transform

    .class { perspective: flat; }
  72. transform Transform style perspective transform-style transform

  73. transform Transform style transform: preserve-3d; transform: flat;

  74. transform Transform style transform: preserve-3d; transform: flat;

  75. Backface visibility backface-visibility: value; .class { backface-visibility: hidden; } transform

  76. 2 1 transform backface visibility 1

  77. transform backface visibility 2 1

  78. transform backface visibility backface-visibility: hidden;

  79. Mixins transform @mixin transform($parameters) { -webkit-transform: $parameters; -moz-transform: $parameters; -o-transform:

    $parameters; -ms-transform: $parameters; transform: $parameters; } @mixin origin($valueX, $valueY) { -webkit-transform-origin: $valueX $valueY; -moz-transform-origin: $valueX $valueY; -o-transform-origin: $valueX $valueY; -ms-transform-origin: $valueX $valueY; transform-origin: $valueX $valueY; }
  80. transform @mixin perspective($value) { -webkit-perspective: $value; -moz-perspective: $value; -o-perspective: $value;

    -ms-perspective: $value; perspective: $value; } @mixin transform-style($value) { -webkit-transform-style: $value; -moz-transform-style: $value; -o-transform-style: $value; -ms-transform-style: $value; transform-style: $value; } @mixin backface-visibility($value) { -webkit-backface-visibility: $value; -moz-backface-visibility: $value; -o-backface-visibility: $value; -ms-backface-visibility: $value; backface-visibility: $value; }
  81. Transition #paranaue02

  82. Suporte transition 10 4.0 3.1 10.5 4.0 3.2 mini ...

    2.1 7.0 10 37 32 10 9.9
  83. Prefixos Sintaxe -webkit-transition: paranaues; -moz-transition: paranaues; -o-transition: paranaues; transition: paranaues;

    *transition-property: property; *transition-duration: duration; transition-timing-function: value; transition-delay: delay; transition: property duration timing-function delay; transition
  84. Sintaxe transition property* duration* timing- function delay property duration ease

    0 ease-in time ease-out cubic-bezier steps transition: background-color 1s; transition: background-color 1s ease 0;
  85. transition transition: background-color 1s; Transition

  86. transition transition: background-color 1s, height 1s 1s; Transition

  87. Pegadinhas

  88. transition visibility: hidden; Pegadinhas visibility: visible; display: none; display: block;

    height: 0; height: auto;
  89. transition Transition (display) Alternativa usando opacidade e altura

  90. transition Transition (display) .class { opacity: 1; height: 400px; transition:

    height 0, opacity 0.5s; } .class:hover { opacity: 0; height: 0; transition: opacity 0.5s, height 0 0.5s; }
  91. transition Transition (tabs)

  92. transition Transition (tabs) bit.ly/transition-tabs

  93. transition Transition (tabs) bit.ly/transition-tabs

  94. transition Transition (accordion) .class { display: none; transition: display .5s;

    } .class.active { display: block; } bit.ly/transition-accordion
  95. transition Transition (accordion) .class { opacity: 0; max-height: 0; overflow:

    hidden; transition: all 1s; } .class.active { opacity: 1; max-height: 500px; } bit.ly/transition-accordion
  96. transition Transition (accordion) .class { opacity: 0; max-height: 0; overflow:

    hidden; transform: translateX(150px); transition: all 1s; } .class.active { opacity: 1; max-height: 500px; transform: translateX(0); } bit.ly/transition-accordion
  97. transition Mixin @mixin transition($parameters...) { -webkit-transition: $parameters; -moz-transition: $parameters; -o-transition:

    $parameters; transition: $parameters; } .class { @include transition(background-color 1s ease); }
  98. Animation #paranaue03

  99. Suporte animation 10 4.0 4.0 12 5.0 3.2 mini ...

    2.1 4.0 7.0 12 37 32 10 9.9
  100. Prefixos Keyframes animation @-webkit-keyframes animacao {...} @-moz-keyframes animacao {...} @-o-keyframes

    animacao {...} @keyframes animacao {...} @keyframes animacao { from { ... } to { ... } }
  101. Keyframes transition @keyframes inferno { from { ... } to

    { ... } } @keyframes inferno { 0% { ... } 50% { ... } 100% { ... } }  forma mais básica  2 passos  maior controle  relativa à duração
  102. Sintaxe animation *animation-name: name; *animation-duration: duration; animation-timing-function: value; animation-delay: delay;

    animation-iteration-count: value; animation-direction: value; animation-fill-mode: value; animation-play-state: value; animation: name duration timing-function delay iteration-count direction fill-mode play-state;
  103. animation name* duration* timing- function delay iteration -count direction fill-mode

    play- state name duration ease 0 1 normal none runnin g ease-in time infinite alternate forwards paused ease-out value reverse backwards cubic- bezier alternate -reverse both steps Sintaxe
  104. Prefixos animation -webkit-animation: paranaues; -moz-animation: paranaues; -o-animation: paranaues; animation: paranaues;

    .class { animation: inferno 1s; }
  105. animation .class { animation: inferno 1s; } @keyframes inferno {

    from { background-color: #fff; height: 400px; } to { background-color: #eee; height: 200px; } }
  106. animation .class { animation: inferno 1s; }

  107. animation .class { animation: inferno 1s; } animation-name: inferno; animation-duration:

    1s; animation-timing-function: ease; animation-delay: 0; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: none; animation-play-state: running;
  108. animation .class { animation: inferno 1s; } animation-name: inferno; animation-duration:

    1s; animation-timing-function: ease; animation-delay: 0; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: none; animation-play-state: running; .class { animation: inferno 1s ease 0 1 normal none running; }
  109. timing function animation animation: inferno 1.5s linear; bit.ly/animation-timing-function animation: inferno

    1.5s ease; animation: inferno 1.5s ease-in; animation: inferno 1.5s ease-out; animation: inferno 1.5s cubic-bezier(0.680, -.550. 0.265, 1.550); animation: inferno 1.5s steps(4, end);
  110. animation

  111. animation bit.ly/animation-delay delay animation: inferno 1.5s; animation: inferno 1.5s 0.5s;

    animation: inferno 1.5s 1s;
  112. animation bit.ly/animation-iteration-count iteration count animation: inferno 1.5s; animation: inferno 1.5s

    3; animation: inferno 1.5s infinite;
  113. animation bit.ly/animation-direction direction animation: inferno 1.5s; animation: inferno 1.5s reverse;

    animation: inferno 1.5s alternate; animation: inferno 1.5s alternate-reverse;
  114. animation bit.ly/animation-fill-mode fill mode animation: inferno 1.5s; animation: inferno 1.5s

    backwards; animation: inferno 1.5s forwards; animation: inferno 1.5s both;
  115. animation fill mode @keyframes inferno-fill { from { top: 0;

    background-color: green; } to { top: 400px; background-color: darkgreen; } } .class { background-color: orange; position: relative; top: 0; width: 200px; height: 200px; }
  116. animation bit.ly/animation-play-state play state animation: inferno 1.5s; animation: inferno 1.5s

    paused;
  117. Muito mais coisas...

  118. Não são dicas

  119. raphaelfabeni.com.br/lab-css3 #1

  120. bit.ly/mixins-sass #2

  121. Não existe melhor ou pior! #3

  122. Deixe uma base pronta retrabalho é chato! #4

  123. Documente e organize seu código! bit.ly/comentarios-css #5

  124. Brinque mais! raphaelfabeni.com.br/pikachu-css3 raphaelfabeni.com.br/flags-css3 #6

  125. Compartilhe o que você sabe! #7

  126. Muito obrigado! @raphaelfabeni