Os paranauês do CSS3 - Speaker Deck

Slide 1

Slide 1 text

OS PARANAUÊS DO CSS3 @raphaelfabeni

Slide 2

Slide 2 text

@raphaelfabeni http://raphaelfabeni.com.br

Slide 3

Slide 3 text

No content

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

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

Slide 10

Slide 10 text

cssconfbrasil.com.br

Slide 11

Slide 11 text

CSS3 é demais!

Slide 12

Slide 12 text

Mas e aí... Estamos usando?

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Aceitar que algumas coisas não irão funcionar no seu IE8

Slide 15

Slide 15 text

O usuário tem que atingir o objetivo dele!

Slide 16

Slide 16 text

Será que é tão legal?

Slide 17

Slide 17 text

Borda arredondada e sombra os antigos terrores do front-end

Slide 18

Slide 18 text

Detalhes

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

http://bit.ly/transicoes-inteligentes

Slide 21

Slide 21 text

Design não é apenas o que parece e o que se sente. Design é como funciona! Steve Jobs

Slide 22

Slide 22 text

web ≠ impresso

Slide 23

Slide 23 text

web ≠ impresso interativo estático

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

http://bit.ly/transitional-interfaces

Slide 26

Slide 26 text

Coisas boas e não tão boas

Slide 27

Slide 27 text

FLEXÍVEL

Slide 28

Slide 28 text

FLEXÍVEL ESCALA

Slide 29

Slide 29 text

FLEXÍVEL ESCALA LEVEZA

Slide 30

Slide 30 text

FLEXÍVEL ESCALA LEVEZA VELOCIDADE

Slide 31

Slide 31 text

EXPERIMENTO

Slide 32

Slide 32 text

EXPERIMENTO EXCESSO

Slide 33

Slide 33 text

EXPERIMENTO EXCESSO SUPORTE

Slide 34

Slide 34 text

EXPERIMENTO EXCESSO SUPORTE REDUNDÂNCIA

Slide 35

Slide 35 text

Pré processadores

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

“…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

Slide 38

Slide 38 text

Fique bom em CSS! Aprenda os paranuês...

Slide 39

Slide 39 text

Aí depois...

Slide 40

Slide 40 text

Fique muito bom em CSS! ¯\_(ツ)_/¯ Já vai manjar todos os paranuês...

Slide 41

Slide 41 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 42

Slide 42 text

“Não é porque você pode que você deve.” Rafael Rinaldi apud Lucas Mazza

Slide 43

Slide 43 text

“Não é porque tá funcionando que tá bom.” eu mesmo

Slide 44

Slide 44 text

Paranauês...

Slide 45

Slide 45 text

Transform #paranaue01

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

transform Translate transform: translateX(100px);

Slide 50

Slide 50 text

transform Translate transform: translateY(100px);

Slide 51

Slide 51 text

Skew transform: skewX(value) skewY(value); .class { transform: skewY(25deg); } .class { transform: skewX(25deg); } transform

Slide 52

Slide 52 text

transform Skew transform: skewX(20deg);

Slide 53

Slide 53 text

transform Skew transform: skewY(20deg);

Slide 54

Slide 54 text

Transform origin transform-origin: valueX valueY; .class { transform-origin: 25% 75%; } .class { transform-origin: top left; } transform

Slide 55

Slide 55 text

transform Skew | origin transform: skewX(20deg); transform-origin: top left;

Slide 56

Slide 56 text

transform Skew | origin transform: skewY(20deg); transform-origin: top left;

Slide 57

Slide 57 text

Scale transform: scaleX(value); transform: scaleY(value); transform: scale(value); .class { transform: scale(1.25); } .class { transform: scaleX(0.75); } transform

Slide 58

Slide 58 text

transform Scale transform: scaleX(0.75);

Slide 59

Slide 59 text

transform Scale transform: scaleY(0.75);

Slide 60

Slide 60 text

transform Scale transform: scale(0.75);

Slide 61

Slide 61 text

transform Scale | origin transform: scale(0.75); transform-origin: top left;

Slide 62

Slide 62 text

Rotate transform: rotate(value); transform: rotateX(value); transform: rotateY(value); .class { transform: rotate(45deg); } transform

Slide 63

Slide 63 text

transform Rotate transform: rotate(-25deg);

Slide 64

Slide 64 text

transform Rotate | origin transform: rotate(-25deg); transform-origin: bottom left;

Slide 65

Slide 65 text

3D transform

Slide 66

Slide 66 text

transform Rotate X transform: rotateX(180deg);

Slide 67

Slide 67 text

transform Rotate Y transform: rotateY(180deg);

Slide 68

Slide 68 text

Perspective perspective: value; .parent { perspective: 600px; } transform

Slide 69

Slide 69 text

transform Rotate X | perspective transform: rotateX(180deg); perspective: 600px;

Slide 70

Slide 70 text

transform Rotate Y | perspective transform: rotateY(180deg); perspective: 600px;

Slide 71

Slide 71 text

Transform style transform-style: value; .class { perspective: preserve-3d; } transform .class { perspective: flat; }

Slide 72

Slide 72 text

transform Transform style perspective transform-style transform

Slide 73

Slide 73 text

transform Transform style transform: preserve-3d; transform: flat;

Slide 74

Slide 74 text

transform Transform style transform: preserve-3d; transform: flat;

Slide 75

Slide 75 text

Backface visibility backface-visibility: value; .class { backface-visibility: hidden; } transform

Slide 76

Slide 76 text

2 1 transform backface visibility 1

Slide 77

Slide 77 text

transform backface visibility 2 1

Slide 78

Slide 78 text

transform backface visibility backface-visibility: hidden;

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

Transition #paranaue02

Slide 82

Slide 82 text

Suporte transition 10 4.0 3.1 10.5 4.0 3.2 mini ... 2.1 7.0 10 37 32 10 9.9

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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;

Slide 85

Slide 85 text

transition transition: background-color 1s; Transition

Slide 86

Slide 86 text

transition transition: background-color 1s, height 1s 1s; Transition

Slide 87

Slide 87 text

Pegadinhas

Slide 88

Slide 88 text

transition visibility: hidden; Pegadinhas visibility: visible; display: none; display: block; height: 0; height: auto;

Slide 89

Slide 89 text

transition Transition (display) Alternativa usando opacidade e altura

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

transition Transition (tabs)

Slide 92

Slide 92 text

transition Transition (tabs) bit.ly/transition-tabs

Slide 93

Slide 93 text

transition Transition (tabs) bit.ly/transition-tabs

Slide 94

Slide 94 text

transition Transition (accordion) .class { display: none; transition: display .5s; } .class.active { display: block; } bit.ly/transition-accordion

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

transition Mixin @mixin transition($parameters...) { -webkit-transition: $parameters; -moz-transition: $parameters; -o-transition: $parameters; transition: $parameters; } .class { @include transition(background-color 1s ease); }

Slide 98

Slide 98 text

Animation #paranaue03

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

Prefixos Keyframes animation @-webkit-keyframes animacao {...} @-moz-keyframes animacao {...} @-o-keyframes animacao {...} @keyframes animacao {...} @keyframes animacao { from { ... } to { ... } }

Slide 101

Slide 101 text

Keyframes transition @keyframes inferno { from { ... } to { ... } } @keyframes inferno { 0% { ... } 50% { ... } 100% { ... } }  forma mais básica  2 passos  maior controle  relativa à duração

Slide 102

Slide 102 text

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;

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

Prefixos animation -webkit-animation: paranaues; -moz-animation: paranaues; -o-animation: paranaues; animation: paranaues; .class { animation: inferno 1s; }

Slide 105

Slide 105 text

animation .class { animation: inferno 1s; } @keyframes inferno { from { background-color: #fff; height: 400px; } to { background-color: #eee; height: 200px; } }

Slide 106

Slide 106 text

animation .class { animation: inferno 1s; }

Slide 107

Slide 107 text

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;

Slide 108

Slide 108 text

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

animation

Slide 111

Slide 111 text

animation bit.ly/animation-delay delay animation: inferno 1.5s; animation: inferno 1.5s 0.5s; animation: inferno 1.5s 1s;

Slide 112

Slide 112 text

animation bit.ly/animation-iteration-count iteration count animation: inferno 1.5s; animation: inferno 1.5s 3; animation: inferno 1.5s infinite;

Slide 113

Slide 113 text

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;

Slide 114

Slide 114 text

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;

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

animation bit.ly/animation-play-state play state animation: inferno 1.5s; animation: inferno 1.5s paused;

Slide 117

Slide 117 text

Muito mais coisas...

Slide 118

Slide 118 text

Não são dicas

Slide 119

Slide 119 text

raphaelfabeni.com.br/lab-css3 #1

Slide 120

Slide 120 text

bit.ly/mixins-sass #2

Slide 121

Slide 121 text

Não existe melhor ou pior! #3

Slide 122

Slide 122 text

Deixe uma base pronta retrabalho é chato! #4

Slide 123

Slide 123 text

Documente e organize seu código! bit.ly/comentarios-css #5

Slide 124

Slide 124 text

Brinque mais! raphaelfabeni.com.br/pikachu-css3 raphaelfabeni.com.br/flags-css3 #6