Keep calm and let's play CSS3

O CSS3 veio para ajudar nossas vidas. No entanto, ainda precisamos desenvolver pensando em prefixos. Entenda como funcionam algumas propriedades CSS3 e como utilizá-las já em seu projeto com a ajuda do SASS.

Transcript

1. @raphaelfabeni KEEP CALM AND LET’S PLAY CSS3 RIGHT NOW
2. @raphaelfabeni http://raphaelfabeni.com.br
3. http://www.a2comunicacao.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
10. KEEP CALM...
11. “CSS3 contains just about everything that’s included in CSS2.1 (the previous version of the specification). It also adds new features to help developers solve a number of problems without the need for non-semantic markup, complex scripting, or extra images.”
12. http://bit.ly/start-using-html5-css3
14. CLIENTES
15. Poder de convencimento
16. diminuir o tempo de desenvolvimento oferecer mais funcionalidades design/ux melhores projeto mais barato
17. USUÁRIOS
18. a experiência não importa como você chegou lá acessar informação
19. DESENVOLVEDORES
20. mais fios de cabelo mais horas de game menos restrição
21. “Sometimes it feels that we are hiding behind the lack of cross- browser compatibility to avoid learning new techniques that would actually dramatically improve our workflow. And that’s just wrong.” Vitaly Friedman
22. http://bit.ly/canvas-svg-w-time-machine
23. Por que não mudamos?
24. MEDO
25. MEDO CONFORTO
26. MEDO DÚVIDA CONFORTO
27. MEDO DÚVIDA CONFORTO É MUITO CEDO
29. CSS3 é fantástico!
30. http://raphaelfabeni.com.br/pikachu-css3
31. O dev descobrindo que o site tinha um monte de borda arredondanda e sombra... Alguns anos atrás...
32. Aceitar que algumas coisas não irão funcionar em navegadores mais antigos!
33. O usuário tem que atingir seu objetivo!
34. PROGRESSIVE ENHANCEMENT E GRACEFUL DEGRADATION
35. Graceful Degradation Progressive Enhancement
36. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
37. O melhor é aquele que mais se adapta a você ou seu time!
39. FLEXÍVEL
40. FLEXÍVEL ESCALA
41. FLEXÍVEL LEVEZA ESCALA
42. FLEXÍVEL LEVEZA ESCALA VELOCIDADE
43. EXPERIMENTO
44. EXPERIMENTO EXCESSO
45. EXPERIMENTO SUPORTE EXCESSO
46. EXPERIMENTO SUPORTE EXCESSO REDUNDÂNCIA
47. PRÉ-PROCESSADORES
49. http://bit.ly/pre-processors-miller-medeiros
50. http://bit.ly/css-steroids
51. http://bit.ly/pre-processadores-diego-eis
52. “Pré processadores podem ajudar como também podem maltratar bastante. Basta um escorregão para que seu projeto vire um inferno.” Diego Eis
53. “Pré-processadores são apenas ferramentas. Eles nunca deixarão seu código ruim em um código bom.” Lucas Mazza
54. Aprenda CSS primeiro!
55. Aprenda os paranauês do CSS primeiro! De novo...
56. MIXINS e PLACEHOLDERS
57. http://bit.ly/mixin-placeholder
58. @mixin center() { display: block; margin-left: auto; margin-right: auto; } .class-one { @include center(); } .class-two { @include center(); } Mixin Placeholder %center { display: block; margin-left: auto; margin-right: auto; } .class-one { @extend %center; } .class-two { @extend %center; }
59. Mixin Placeholder .class-one { display: block; margin-left: auto; margin-right: auto; } .class-two { display: block; margin-left: auto; margin-right: auto; } .class-one, .class-two { display: block; margin-left: auto; margin-right: auto; }
60. Mixin Placeholder @mixin size($width, $height) { height: $height; width: $width; } .class-one { @include size(900px, 80px); } .class-two { @include size(150px, 50px); } %center { width: 100px; height: 150px; } .class-one { @extend %center; } .class-two { @extend %center; }
61. Mixin Placeholder .class-one { height: 80px; width: 900px; } .class-two { height: 50px; width: 150px; } .class-one, .class-two { width: 100px; height: 150px; }
62. podem mudar utilize Mixins Se você tem blocos de código com valores de propriedades que... são fixos utilize Placeholders
63. Let’s play... • Background-size • Multiple-backgrounds • Opacity • Border-radius • Box-shadow • Text-shadow • Gradient • Columns • Transform • Transition • Animation
64. 1. Background-size 2. Multiple-backgrounds 3. Opacity 4. Border-radius 5. Box-shadow 6. Text-shadow 7. Columns 8. Gradients 9. Transform 10. Transition 11. Animation 2 3 4 5 6 7 8 9 10 11 1
65. background-size
66. 9.0 4.0 3.1 5.0 10.0 10.5 3.2 4.0 3.6 4.0 mini 5.0 2.1 2.2 7.0 10 35 30 10 Suporte background-size
67. Sintaxe background-size: auto|length|cover|contain; -webkit-background-size: value; -moz-background-size: value; -o-background-size: value; background-size: value; background-size Prefixos
68. @mixin background-size($value) { -webkit-background-size: $value; -moz-background-size: $value; -o-background-size: $value; background-size: $value; } .class { @include background-size(auto 100%); } Mixin background-size .class { -webkit-background-size: auto 100%; -moz-background-size: auto 100%; -o-background-size: auto 100%; background-size: auto 100%; }
69. background-size .class { @include background-size(auto 100%); }
70. background-size .class { @include background-size(100% auto); }
71. multiple backgrounds
72. 9.0 4.9 3.1 10.5 3.2 3.6 mini 5.0 2.1 7.0 10 35 30 10 Suporte multiple-backgrounds
73. background: url(cbf.png) right top no-repeat, url(maracana.jpg) center center no-repeat; Sintaxe multiple-backgrounds
74. opacity
75. 5.5 9.0 4.0 3.1 9.0 3.2 2.0 mini 5.0 2.1 7.0 10 35 30 10 Suporte opacity
76. opacity: value; @mixin opacity($value) { opacity: $value; filter: alpha(opacity=($value * 100)); } .class { @include opacity(0.5); } Sintaxe Mixin opacity
77. border-radius
78. 9.0 4.0 5.0 3.1 5.0 10.5 3.2 2.0 3.6 mini ... 2.1 7.0 11.5 35 30 10 Suporte border-radius
79. border-radius: value(1 – 4); 1 2 4 3 Sintaxe border-radius Prefixos -webkit-border-radius: value; -moz-border-radius: value; border-radius: value;
80. @mixin border-radius($topL, $topR, $bottomR, $bottomL) { -webkit-border-radius: $topL $topR $bottomR $bottomL; -moz-border-radius: $topL $topR $bottomR $bottomL; border-radius: $topL $topR $bottomR $bottomL; } .class { @include border-radius(50px, 75px, 25px, 40px); } Mixin border-radius
81. @mixin border-radius($topL, $topR, $bottomR, $bottomL) { -webkit-border-radius: $topL $topR $bottomR $bottomL; -moz-border-radius: $topL $topR $bottomR $bottomL; border-radius: $topL $topR $bottomR $bottomL; } .class { @include border-radius(50px, 75px, 25px, 40px); } Mixin border-radius .class { @include border-radius(50px, 50px, 50px, 50px); }
82. @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } .class { @include border-radius(30px 10px 10px 5px); } .class { @include border-radius(15px); } Mixin border-radius
83. box-shadow
84. 9.0 4.0 3.1 5.0 10.5 3.2 4.1 3.5 mini ... 2.1 4.0 7.0 11.5 35 30 10 Suporte box-shadow
85. box-shadow: horizShadow vertShadow blur spread color inset; horizontal shadow + - + - vertical shadow spread blur box-shadow: 1px 1px 5px 1px #000; + - inset + - Sintaxe box-shadow
86. @mixin box-shadow($values) { -webkit-box-shadow: $values; -moz-box-shadow: $values; box-shadow: $values; } Mixin box-shadow -webkit-box-shadow: value; -moz-box-shadow: value; box-shadow: value; Prefixos
87. .class { @include box-shadow( 1px 1px 10px 1px #000, 1px -5px 3px 5px #666 inset); } .class { @include box-shadow(1px 1px 10px 1px #000); } .class { @include box-shadow(1px -5px 3px 5px #666 inset); } box-shadow
88. @mixin box-shadow($values) { -webkit-box-shadow: $values; -moz-box-shadow: $values; box-shadow: $values; } Mixin box-shadow @mixin box-shadow($value1, $value2) { -webkit-box-shadow: $value1, $value2; -moz-box-shadow: $value1, $value2; box-shadow: $value1, $value2; }
89. @mixin box-shadow($values) { -webkit-box-shadow: $values; -moz-box-shadow: $values; box-shadow: $values; } Mixin box-shadow @mixin box-shadow($value1, $value2) { -webkit-box-shadow: $value1, $value2; -moz-box-shadow: $value1, $value2; box-shadow: $value1, $value2; } @mixin box-shadow($values...) { -webkit-box-shadow: $values; -moz-box-shadow: $values; box-shadow: $values; }
90. Mixin box-shadow @mixin box-shadow($values...) { -webkit-box-shadow: $values; -moz-box-shadow: $values; box-shadow: $values; } .class { @include box-shadow( 1px 1px 10px 1px #000, 1px -5px 3px 5px #666 inset); }
91. .class { @include box-shadow( 5px 5px 10px 1px #fff ); } box-shadow .class { @include box-shadow(0px 0px 20px 20px #247388 inset); }
92. text-shadow
93. 10 4.0 3.1 4.0 9.6 3.2 3.5 mini 7.0 2.1 7.0 10 10 35 30 10 Suporte text-shadow
94. text-shadow: horizShadow vertShadow blur color; .class { text-shadow: 5px 5px 3px #247388; } Sintaxe text-shadow
95. .class { text-shadow: 1px 1px 1px #247388, 4px 4px 1px darken(#247388, 5%), 7px 7px 1px darken(#247388, 8%), 10px 10px 1px darken(#247388, 11%), 13px 13px 1px darken(#247388, 14%); } text-shadow
96. columns
97. 10 4.0 3.1 11 15 3.2 2.0 mini 7.0 2.1 7.0 11.5 22 35 30 10 Suporte columns
98. column-count: count; column-gap: gap-value; column-rule: line-style; gap count rule Sintaxe columns
99. Prefixos columns -webkit-column-count: value; -moz-column-count: value; column-count: value; -webkit-column-gap: value; -moz-column-gap: value; column-gap: value; -webkit-column-rule: value; -moz-column-rule: value; column-rule: value;
100. @mixin column($count, $gap, $line) { -webkit-column-count: $count; -moz-column-count: $count; column-count: $count; -webkit-column-gap: $gap; -moz-column-gap: $gap; column-gap: $gap; -webkit-column-rule: $line; -moz-column-rule: $line; column-rule: $line; } .class { @include column(3, 150px, solid 1px red); } Mixin columns
101. .class { @include column(3, 150px, solid 1px red); } columns
102. @mixin column($count, $gap, $line:'') { -webkit-column-count: $count; -moz-column-count: $count; column-count: $count; -webkit-column-gap: $gap; -moz-column-gap: $gap; column-gap: $gap; @if $line != '' { -webkit-column-rule: $line; -moz-column-rule: $line; column-rule: $line; } } Mixin columns
103. .class { @include column(3, 150px); } columns
104. columns
105. %full-text { -webkit-column-span: all; -moz-column-span: all; column-span: all; } .title { @extend %full-text; } Placeholder columns
106. gradient
107. 10 4.0 10 4.0 5.1 11.1 11.6 3.2 5.1 3.6 mini ... 2.1 4.0 7.0 10 11.5 12 35 30 10 Suporte gradient
108. background-color: linear-gradient(direction, color-stop1, color-stop2, ...); color-stop1 color-stop2 direction background: linear-gradient(to right, #4bacc6, #235e6e); Sintaxe gradient
109. Prefixos gradient background: -webkit-gradient(linear, values); background: -webkit-linear-gradient(values); background: -moz-linear-gradient(values); background: -ms-linear-gradient(values); background: -o-linear-gradient(values); background: linear-gradient(values);
110. @mixin horizontal-gradient($startColor, $endColor) { background-color: $startColor; background: -webkit-gradient( linear, left top, right top, from($startColor), to($endColor)); background: -webkit-linear-gradient(left, $startColor, $endColor); background: -moz-linear-gradient(left, $startColor, $endColor); background: -ms-linear-gradient(left, $startColor, $endColor); background: -o-linear-gradient(left, $startColor, $endColor); background: linear-gradient(to right, $startColor, $endColor); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColor Str='#{$startColor}', EndColorStr='#{$endColor}'); } Mixin gradient
111. @mixin vertical-gradient($startColor, $endColor) { background-color: $startColor; background: -webkit-gradient( linear, left top, left bottom, from($startColor), to($endColor)); background: -webkit-linear-gradient(top, $startColor, $endColor); background: -moz-linear-gradient(top, $startColor, $endColor); background: -ms-linear-gradient(top, $startColor, $endColor); background: -o-linear-gradient(top, $startColor, $endColor); background: linear-gradient(to bottom, $startColor, $endColor); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColor Str='#{$startColor}', EndColorStr='#{$endColor}'); } Mixin gradient
112. .class { @include horizontal-gradient(#4bacc6, #235e6e); } gradient .class { @include vertical-gradient(#4bacc6, #235e6e); }
113. gradient @mixin vertical-gradient($all, $colors...) { background: -webkit-linear-gradient(top, $colors) $all; background: -moz-linear-gradient(top, $colors) $all; background: -o-linear-gradient(top, $colors) $all; background: -ms-linear-gradient(top, $colors) $all; background: linear-gradient(to bottom, $colors) $all; } .class { @include vertical-gradient(white, #4bacc6 0%, #235e6e 50%, transparent); }
114. transform
115. 9.0 4.0 3.1 10.5 3.2 3.5 mini ... 2.1 7.0 11.5 35 30 10 Suporte transform
116. transform: transform-function(value); Prefixos Sintaxe transform -webkit-transform: values; -moz-transform: values; -o-transform: values; -ms-transform: values; transform: values;
117. @mixin transform($parameters) { -webkit-transform: $parameters; -moz-transform: $parameters; -o-transform: $parameters; -ms-transform: $parameters; transform: $parameters; } transform Mixin .class { @include transform(rotate(45deg)); } .class { @include transform(scale(2)); }
118. Translate @mixin translate($valueX, $valueY: 0) { -webkit-transform: translate($valueX, $valueY); -moz-transform: translate($valueX, $valueY); -o-transform: translate($valueX, $valueY); -ms-transform: translate($valueX, $valueY); transform: translate($valueX, $valueY); } transform: translate(valueX, valueY); // X e Y transform: translate(value); // X transform: translateX(value); // X transform: translateY(value); // Y Mixin transform
119. Translate .class { @include translate(100px, 100px); } transform .class { @include transform(translate(100px 100px)); }
120. Translate .class { @include translate(100px); } transform .class { @include transform(translateX(100px)); }
121. Skew @mixin skew($valueX, $valueY) { -webkit-transform: skewX($valueX) skewY($valueY); -moz-transform: skewX($valueX) skewY($valueY); -o-transform: skewX($valueX) skewY($valueY); -ms-transform: skewX($valueX) skewY($valueY); transform: skewX($valueX) skewY($valueY); } transform: skewX(value) skewY(value); Mixin transform
122. Skew .class { @include skew(-25deg, 0); } transform .class { @include transform(skewX(-25deg)); }
123. Skew .class { @include skew(0, 25deg); } transform .class { @include transform(skewY(25deg)); }
124. Transform origin @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; } transform-origin: valueX valueY; Mixin transform
125. Skew | origin .class { @include origin(bottom, left); @include skew(-25deg, 0); } transform
126. Skew | origin .class { @include origin(top, left); @include skew(0, 25deg); } transform
127. Scale @mixin scale($value) { -webkit-transform: scale($value); -moz-transform: scale($value); -o-transform: scale($value); -ms-transform: scale($value); transform: scale($value); } transform: scale(value); // X e Y iguais transform: scale(valueY, valueY); transform: scaleX(value); transform: scaleY(value); Mixin transform
128. Scale .class { @include scale(0.75); } transform .class { @include transform(scale(0.75)); }
129. Scale | origin .class { @include origin(bottom, left); @include scale(0.75); } transform
130. Rotate @mixin rotate($value) { -webkit-transform: rotate($value); -moz-transform: rotate($value); -o-transform: rotate($value); -ms-transform: rotate($value); transform: rotate($value); } transform: rotate(value); Mixin transform
131. Rotate .class { @include rotate(45deg); } transform .class { @include transform(rotate(45deg)); }
132. Rotate | origin .class { @include rotate(45deg); @include origin(bottom, right); } transform
133. transition
134. 10 4.0 3.1 10.5 3.2 4.0 mini ... 2.1 7.0 10 35 30 10 Suporte transition
135. *transition-property: property; *transition-duration: value; transition-timing-function: value; transition-delay: value; transition: property duration timing-function delay; Sintaxe transition property* duration* timing-function delay property duration ease 0 ease-in time ease-out cubic- bezier
136. @mixin transition($parameters...) { -webkit-transition: $parameters; -moz-transition: $parameters; -o-transition: $parameters; -ms-transition: $parameters; transition: $parameters; } Mixin Prefixos transition -webkit-transition: values; -moz-transition: values; -o-transition: values; -ms-transition: values; transition: values;
137. .class { @include transition(background-color 1s ease); } transition
138. .class { @include transition( background-color 1s ease, height 1s ease 1s); } transition
139. animation
140. 10 4.0 4.0 12 3.2 5.0 mini ... 2.1 4.0 7.0 12.1 35 30 10 Suporte animation
141. @keyframes animacao { from { ... } to { ... } } @keyframes animacaoBolada { 0% { ... } 50% { ... } 100% { ... } } maior controle porcentagem relativa à duração da animação forma mais básica Keyframes animation
142. Keyframes - Prefixos animation @-webkit-keyframes animationName { } @-moz-keyframes animationName { } @-o-keyframes animationName { } @-ms-keyframes animationName { } @keyframes animationName { }
143. @mixin keyframes($name) { @-webkit-keyframes #{$name} { @content; } @-moz-keyframes #{$name} { @content; } @-ms-keyframes #{$name} { @content; } @-o-keyframes #{$name} { @content; } @keyframes #{$name} { @content; } } Keyframes - Mixin animation
144. @include keyframes(animationOne) { from { background-color: #2d839a; } to { background-color: #0f282f; } } @include keyframes(animationTwo) { 0% { background-color: #2d839a; } 50% { background-color: #72e1ff; height: 400px; } 100% { background-color: #0f282f; } } Keyframes animation
145. *animation-name: name; *animation-duration: value; animation-timing-function: ease|ease-out …; animation-delay: value; animation-iteration-count: value|infinite; animation-direction: normal|reverse|alternate| alternate-reverse; animation-fill-mode: forwards|backwards|both; animation-play-state: running|paused; animation: name duration timing-function delay iteration-count direction fill-mode play-state; Sintaxe animation
146. Sintaxe animation name* duration* timing- function delay iteration- count direction fill-mode play- state name duration ease 0 1 normal none running ease-in time infinite alternate forwards paused ease-out value reverse backward s cubic- bezier alternate -reverse both
147. -webkit-animation: values; -moz-animation: values; -ms-animation: values; -o-animation: values; animation: values; Prefixos animation @mixin animation($parameters...) { -webkit-animation: $parameters; -moz-animation: $parameters; -ms-animation: $parameters; -o-animation: $parameters; animation: $parameters; } Mixin
148. .class { @include animation(animationOne 3s); } animation-name: animationOne; animation-duration: 3s; animation-timing-function: ease; animation-delay: 0; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: none; animation-play-state: running; animation
149. timing-function animation http://bit.ly/timing-function .class-a { @include animation(animationHeight 1.5s); } .class-b { @include animation(animationHeight 1.5s ease-in); } .class-c { @include animation(animationHeight 1.5s ease-out); } .class-d { @include animation(animationHeight 1.5s cubic- bezier(0.680, -0.550, 0.265, 1.550)); }
150. iteration-count animation http://bit.ly/iteration-count .class-a { @include animation(animationHeight 1.5s); } .class-b { @include animation(animationHeight 1.5s 3); } .class-c { @include animation(animationHeight 1.5s infinite); }
151. direction animation http://bit.ly/anim-direction .class-a { @include animation(animationHeight 1.5s infinite); } .class-b { @include animation(animationHeight 1.5s infinite reverse); } .class-c { @include animation(animationHeight 1.5s infinite alternate); } .class-d { @include animation(animationHeight 1.5s infinite alternate- reverse); }
152. fill-mode @include keyframes(animationFill) { from { height: 300px; background-color: #2d839a; } to { height: 450px; background-color: #0f282f; } } .class { background-color: yellow; width: 300px; height: 300px; margin-left: 25px; margin-right: 25px; } animation
153. fill-mode animation http://bit.ly/fill-mode .class-a { @include animation(animationFill 2s 1.5s); } .class-b { @include animation(animationFill 2s 1.5s forwards); } .class-c { @include animation(animationFill 2s 1.5s backwards); } .class-d { @include animation(animationFill 2s 1.5s both); }
154. Dicas
155. http://caniuse.com/
156. http://bit.ly/transition-snippets
157. http://matthewlein.com/ceaser/
158. http://bit.ly/mixins-sass
159. http://raphaelfabeni.com.br/flags-css3/
160. Não existe certo ou errado: existe aquilo que melhor se adequa a você ou ao seu time!
161. Aprenda CSS antes de pré processadores!
162. Todos prefixos!
163. CSS3 não tem a ver com o Brasil na Copa! ¯\_(ツ)_/¯
164. @raphaelfabeni Obrigado! contato@raphaelfabeni.com.br