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.

Transcript

1. OS PARANAUÊS DO CSS3 @raphaelfabeni
2. @raphaelfabeni http://raphaelfabeni.com.br
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
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
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
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