Palestra apresentada no TDC 2014 pelo desenvolvedor Raphael Fabeni, que fala sobre a utilização de CSS3 e SASS em projetos web.

1. @raphaelfabeni TDC 2014
KEEP CALM
AND LET’S
PLAY CSS3
RIGHT NOW

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

4. http://www.a2comunicacao.com.br

5. http://bit.ly/raphael-tableless

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

7. KEEP CALM...

8. “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.”

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

11. CLIENTES

12. Poder de convencimento

13. diminuir o tempo de
desenvolvimento
oferecer mais
funcionalidades
design/ux melhores
projeto mais barato

14. USUÁRIOS

15. a experiência
não importa como
você chegou lá
acessar informação

16. DESENVOLVEDORES

17. mais fios de cabelo
mais horas de game
menos restrição

18. “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

19. http://bit.ly/canvas-svg-w-time-machine

20. Por que não mudamos?

21. MEDO

22. MEDO CONFORTO

23. MEDO
DÚVIDA
CONFORTO

24. MEDO
DÚVIDA
CONFORTO
É MUITO
CEDO

26. CSS3 é fantástico!

27. http://bit.ly/pikachu-css

28. O dev descobrindo que o site tinha um monte de
borda arredondanda e sombra...
Alguns anos atrás...

29. Aceitar que algumas coisas
não irão funcionar em
navegadores mais antigos!

30. O usuário tem que
atingir seu objetivo!

31. PROGRESSIVE ENHANCEMENT
E GRACEFUL DEGRADATION

32. Graceful
Degradation
Progressive
Enhancement

33. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod

34. O melhor é aquele que mais se
adapta a você ou seu time!

36. FLEXÍVEL

37. FLEXÍVEL ESCALA

38. FLEXÍVEL
LEVEZA
ESCALA

39. FLEXÍVEL
LEVEZA
ESCALA
VELOCIDADE

40. EXPERIMENTO

41. EXPERIMENTO EXCESSO

42. EXPERIMENTO
SUPORTE
EXCESSO

43. EXPERIMENTO
SUPORTE
EXCESSO
REDUNDÂNCIA

44. PRÉ-PROCESSADORES

46. http://bit.ly/pre-processors-miller-medeiros

47. http://bit.ly/css-steroids

48. http://bit.ly/pre-processadores-diego-eis

49. “Pré processadores podem ajudar
como também podem maltratar
bastante. Basta um escorregão para
que seu projeto vire um inferno.”
Diego Eis

50. “Pré-processadores são
apenas ferramentas. Eles
nunca deixarão seu código
ruim em um código bom.”
Lucas Mazza

51. Aprenda CSS primeiro!

52. Aprenda os paranauês
do CSS primeiro!
De novo...

53. MIXINS e PLACEHOLDERS

54. http://bit.ly/mixin-placeholder

55. @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;
}

56. 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;
}

57. 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;
}

58. Mixin Placeholder
.class-one {
height: 80px;
width: 900px;
}
.class-two {
height: 50px;
width: 150px;
}
.class-one,
.class-two {
width: 100px;
height: 150px;
}

59. podem mudar
utilize
Mixins
Se você tem blocos de
código com valores de
propriedades que...
são fixos
utilize
Placeholders

60. Let’s play...
• Background-size
• Multiple-backgrounds
• Opacity
• Border-radius
• Box-shadow
• Text-shadow
• Gradient
• Columns
• Transform
• Transition
• Animation

61. 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

62. background-size

63. 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

64. 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

65. @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%;
}

66. background-size
.class { @include background-size(auto 100%); }

67. background-size
.class { @include background-size(100% auto); }

68. multiple backgrounds

69. 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

70. background:
url(cbf.png) right top no-repeat,
url(maracana.jpg) center center no-repeat;
Sintaxe
multiple-backgrounds

71. opacity

72. 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

73. opacity: value;
@mixin opacity($value) {
opacity: $value;
filter: alpha(opacity=($value * 100));
}
.class { @include opacity(0.5); }
Sintaxe
Mixin
opacity

74. border-radius

75. 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

76. border-radius: value(1 – 4);
1 2
4 3
Sintaxe
border-radius
Prefixos
-webkit-border-radius: value;
-moz-border-radius: value;
border-radius: value;

77. @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

78. @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); }

79. @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

80. box-shadow

81. 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

82. 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

83. @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

84. .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

85. @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;
}

86. @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;
}

87. 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);
}

88. .class { @include box-shadow( 5px 5px 10px 1px #fff ); }
box-shadow
.class { @include box-shadow(0px 0px 20px 20px #247388 inset); }

89. text-shadow

90. 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

91. text-shadow: horizShadow vertShadow blur color;
.class { text-shadow: 5px 5px 3px #247388; }
Sintaxe
text-shadow

92. .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

93. columns

94. 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

95. column-count: count;
column-gap: gap-value;
column-rule: line-style;
gap
count
rule
Sintaxe
columns

96. 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;

97. @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

98. .class { @include column(3, 150px, solid 1px red); }
columns

99. @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

100. .class { @include column(3, 150px); }
columns

101. columns

102. %full-text {
-webkit-column-span: all;
-moz-column-span: all;
column-span: all;
}
.title { @extend %full-text; }
Placeholder
columns

103. gradient

104. 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

105. background-color:
linear-gradient(direction, color-stop1, color-stop2, ...);
color-stop1 color-stop2direction
background: linear-gradient(to right, #4bacc6, #235e6e);
Sintaxe
gradient

106. 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);

107. @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

108. @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

109. .class { @include horizontal-gradient(#4bacc6, #235e6e); }
gradient
.class { @include vertical-gradient(#4bacc6, #235e6e); }

110. transform

111. 9.0 4.0 3.1 10.5
3.2
3.5
mini
... 2.1 7.0 11.5 35 30 10
Suporte
transform

112. transform: transform-function(value);
Prefixos
Sintaxe
transform
-webkit-transform: values;
-moz-transform: values;
-o-transform: values;
-ms-transform: values;
transform: values;

113. @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)); }

114. 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

115. Translate
.class { @include translate(100px, 100px); }
transform
.class { @include transform(translate(100px, 100px)); }

116. Translate
.class { @include translate(100px); }
transform
.class { @include transform(translateX(100px)); }

117. 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

118. Skew
.class { @include skew(-25deg, 0); }
transform
.class { @include transform(skewX(-25deg)); }

119. Skew
.class { @include skew(0, 25deg); }
transform
.class { @include transform(skewY(25deg)); }

120. 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

121. Skew | origin
.class {
@include origin(bottom, left);
@include skew(-25deg, 0);
}
transform

122. Skew | origin
.class {
@include origin(top, left);
@include skew(0, 25deg);
}
transform

123. 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

124. Scale
.class { @include scale(0.75); }
transform
.class { @include transform(scale(0.75)); }

125. Scale | origin
.class {
@include origin(bottom, left);
@include scale(0.75);
}
transform

126. 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

127. Rotate
.class { @include rotate(45deg); }
transform
.class { @include transform(rotate(45deg)); }

128. Rotate | origin
.class {
@include rotate(45deg);
@include origin(bottom, right);
}
transform

129. transition

130. 10 4.0 3.1 10.5
3.2
4.0
mini
... 2.1 7.0 10 35 30 10
Suporte
transition

131. *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

132. @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;

133. .class { @include transition(background-color 1s ease); }
transition

134. .class {
@include transition(
background-color 1s ease,
height 1s ease 1s);
}
transition

135. animation

136. 10 4.0 4.0 12
3.2
5.0
mini
... 2.1
4.0
7.0 12.1 35 30 10
Suporte
animation

137. @keyframes animacao {
from { ... }
to { ... }
}
@keyframes animacaoBolada {
0% { ... }
50% { ... }
100% { ... }
}
maior controle
porcentagem relativa à
duração da animação
forma mais básica
Keyframes
animation

138. Keyframes - Prefixos
animation
@-webkit-keyframes animationName { }
@-moz-keyframes animationName { }
@-o-keyframes animationName { }
@-ms-keyframes animationName { }
@keyframes animationName { }

139. @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

140. @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

141. *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

142. 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

143. -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

144. .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

145. 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)); }

146. 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); }

147. 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); }

148. 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

149. 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); }

150. Dicas

151. http://caniuse.com/

152. http://bit.ly/transition-snippets

153. http://matthewlein.com/ceaser/

154. http://bit.ly/sass-mixins

155. aprenda CSS antes de pré
processadores
use com moderação
todos prefixos
CSS3 não tem a ver com o
Brasil na copa ¯_(ツ)_/¯

156. @raphaelfabeni
Obrigado!
contato@raphaelfabeni.com.br