Tweet
Tweet

Slide 1

Slide 1 text

@raphaelfabeni KEEP CALM AND LET’S PLAY CSS3 RIGHT NOW

Slide 2

Slide 2 text

@raphaelfabeni http://raphaelfabeni.com.br

Slide 3

Slide 3 text

http://www.a2comunicacao.com.br

Slide 4

Slide 4 text

http://bit.ly/raphael-tableless

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

KEEP CALM...

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

CLIENTES

Slide 15

Slide 15 text

Poder de convencimento

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

USUÁRIOS

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

DESENVOLVEDORES

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

“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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Por que não mudamos?

Slide 24

Slide 24 text

MEDO

Slide 25

Slide 25 text

MEDO CONFORTO

Slide 26

Slide 26 text

MEDO DÚVIDA CONFORTO

Slide 27

Slide 27 text

MEDO DÚVIDA CONFORTO É MUITO CEDO

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

CSS3 é fantástico!

Slide 30

Slide 30 text

http://raphaelfabeni.com.br/pikachu-css3

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

O usuário tem que atingir seu objetivo!

Slide 34

Slide 34 text

PROGRESSIVE ENHANCEMENT E GRACEFUL DEGRADATION

Slide 35

Slide 35 text

Graceful Degradation Progressive Enhancement

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

FLEXÍVEL

Slide 40

Slide 40 text

FLEXÍVEL ESCALA

Slide 41

Slide 41 text

FLEXÍVEL LEVEZA ESCALA

Slide 42

Slide 42 text

FLEXÍVEL LEVEZA ESCALA VELOCIDADE

Slide 43

Slide 43 text

EXPERIMENTO

Slide 44

Slide 44 text

EXPERIMENTO EXCESSO

Slide 45

Slide 45 text

EXPERIMENTO SUPORTE EXCESSO

Slide 46

Slide 46 text

EXPERIMENTO SUPORTE EXCESSO REDUNDÂNCIA

Slide 47

Slide 47 text

PRÉ-PROCESSADORES

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

http://bit.ly/css-steroids

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Aprenda CSS primeiro!

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

MIXINS e PLACEHOLDERS

Slide 57

Slide 57 text

http://bit.ly/mixin-placeholder

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

background-size

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

multiple backgrounds

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

opacity

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

border-radius

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

@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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

@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

Slide 83

Slide 83 text

box-shadow

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

@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

Slide 87

Slide 87 text

.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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

text-shadow

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

.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

Slide 96

Slide 96 text

columns

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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;

Slide 100

Slide 100 text

@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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

@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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

columns

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

gradient

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

@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

Slide 111

Slide 111 text

@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

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

transform

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

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

Slide 122

Slide 122 text

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

Slide 123

Slide 123 text

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

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

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

Slide 127

Slide 127 text

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

Slide 128

Slide 128 text

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

Slide 129

Slide 129 text

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

Slide 130

Slide 130 text

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

Slide 131

Slide 131 text

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

Slide 132

Slide 132 text

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

Slide 133

Slide 133 text

transition

Slide 134

Slide 134 text

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

Slide 135

Slide 135 text

*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

Slide 136

Slide 136 text

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

Slide 137

Slide 137 text

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

Slide 138

Slide 138 text

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

Slide 139

Slide 139 text

animation

Slide 140

Slide 140 text

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

Slide 141

Slide 141 text

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

Slide 142

Slide 142 text

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

Slide 143

Slide 143 text

@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

Slide 144

Slide 144 text

@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

Slide 145

Slide 145 text

*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

Slide 146

Slide 146 text

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

Slide 147

Slide 147 text

-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

Slide 148

Slide 148 text

.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

Slide 149

Slide 149 text

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

Slide 150

Slide 150 text

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

Slide 151

Slide 151 text

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

Slide 152

Slide 152 text

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

Slide 153

Slide 153 text

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

Slide 154

Slide 154 text

Dicas

Slide 155

Slide 155 text

http://caniuse.com/

Slide 156

Slide 156 text

http://bit.ly/transition-snippets

Slide 157

Slide 157 text

http://matthewlein.com/ceaser/

Slide 158

Slide 158 text

http://bit.ly/mixins-sass

Slide 159

Slide 159 text

http://raphaelfabeni.com.br/flags-css3/

Slide 160

Slide 160 text

Não existe certo ou errado: existe aquilo que melhor se adequa a você ou ao seu time!

Slide 161

Slide 161 text

Aprenda CSS antes de pré processadores!

Slide 162

Slide 162 text

Todos prefixos!

Slide 163

Slide 163 text

CSS3 não tem a ver com o Brasil na Copa! ¯\_(ツ)_/¯

Slide 164

Slide 164 text

@raphaelfabeni Obrigado! contato@raphaelfabeni.com.br