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

Keep calm and let's play CSS3

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.

C4d7da8ef43f08bdbf8cc23fd822c7f9?s=128

Raphael Fabeni

August 06, 2014
Tweet

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

  9. None
  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

  13. None
  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

  28. None
  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!
  38. None
  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

  48. None
  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