Keep calm and let's play CSS3

@raphaelfabeni TDC 2014

KEEP CALM AND LET’S PLAY CSS3 RIGHT NOW

@raphaelfabeni

http://raphaelfabeni.com.br

http://www.a2comunicacao.com.br

http://bit.ly/raphael-tableless

http://bit.ly/css-sp

KEEP CALM...

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

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

CLIENTES

Poder de convencimento

diminuir o tempo de desenvolvimento

oferecer mais funcionalidades

design/ux melhores

projeto mais barato

USUÁRIOS

a experiência

não importa como você chegou lá

acessar informação

DESENVOLVEDORES

mais fios de cabelo

mais horas de game

menos restrição

“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

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

Por que não mudamos?

MEDO

MEDO CONFORTO

MEDO

DÚVIDA

CONFORTO

MEDO

DÚVIDA

CONFORTO

É MUITO CEDO

CSS3 é fantástico!

http://bit.ly/pikachu-css

O dev descobrindo que o site tinha um monte de borda arredondanda e sombra...

Alguns anos atrás...

Aceitar que algumas coisas não irão funcionar em

navegadores mais antigos!

O usuário tem que atingir seu objetivo!

PROGRESSIVE ENHANCEMENT E GRACEFUL DEGRADATION

Graceful Degradation

Progressive Enhancement

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

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

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

FLEXÍVEL

FLEXÍVEL ESCALA

FLEXÍVEL

LEVEZA

ESCALA

FLEXÍVEL

LEVEZA

ESCALA

VELOCIDADE

EXPERIMENTO

EXPERIMENTO EXCESSO

EXPERIMENTO

SUPORTE

EXCESSO

EXPERIMENTO

SUPORTE

EXCESSO

REDUNDÂNCIA

PRÉ-PROCESSADORES

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

http://bit.ly/css-steroids

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

“Pré processadores podem ajudar como também podem maltratar

bastante. Basta um escorregão para que seu projeto vire um inferno.”

Diego Eis

“Pré-processadores são apenas ferramentas. Eles

nunca deixarão seu código ruim em um código bom.”

Lucas Mazza

Aprenda CSS primeiro!

Aprenda os paranauês do CSS primeiro!

De novo...

MIXINS e PLACEHOLDERS

http://bit.ly/mixin-placeholder

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

}

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;

}

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;

}

Mixin Placeholder

.class-one {

height: 80px;

width: 900px;

}

.class-two {

height: 50px;

width: 150px;

}

.class-one,

.class-two {

width: 100px;

height: 150px;

}

podem mudar utilize

Mixins

Se você tem blocos de código com valores de

propriedades que...

são fixos utilize

Placeholders

Let’s play...

• Background-size • Multiple-backgrounds • Opacity • Border-radius • Box-shadow

• Text-shadow • Gradient • Columns • Transform • Transition • Animation

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

background-size

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

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

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

}

background-size

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

background-size

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

multiple backgrounds

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

background:

url(cbf.png) right top no-repeat,

url(maracana.jpg) center center no-repeat;

Sintaxe

multiple-backgrounds

opacity

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

opacity: value;

@mixin opacity($value) {

opacity: $value;

filter: alpha(opacity=($value * 100));

}

.class { @include opacity(0.5); }

Sintaxe

Mixin

opacity

border-radius

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

border-radius: value(1 – 4);

1 2

4 3

Sintaxe

border-radius

Prefixos -webkit-border-radius: value;

-moz-border-radius: value;

border-radius: value;

@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

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

@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

box-shadow

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

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

@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

.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

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

}

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;

}

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

}

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

box-shadow

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

text-shadow

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

text-shadow: horizShadow vertShadow blur color;

.class { text-shadow: 5px 5px 3px #247388; }

Sintaxe

text-shadow

.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

columns

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

column-count: count;

column-gap: gap-value;

column-rule: line-style;

gap

count

rule

Sintaxe

columns

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;

@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

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

columns

@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

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

columns

columns

%full-text {

-webkit-column-span: all;

-moz-column-span: all;

column-span: all;

}

.title { @extend %full-text; }

Placeholder

columns

gradient

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

background-color:

linear-gradient(direction, color-stop1, color-stop2, ...);

color-stop1 color-stop2 direction

background: linear-gradient(to right, #4bacc6, #235e6e);

Sintaxe

gradient

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

@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

@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

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

gradient

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

transform

9.0 4.0 3.1 10.5

3.2

3.5

mini ... 2.1 7.0 11.5 35 30 10

Suporte

transform

transform: transform-function(value);

Prefixos

Sintaxe

transform

-webkit-transform: values;

-moz-transform: values;

-o-transform: values;

-ms-transform: values;

transform: values;

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

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

Translate

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

transform

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

Translate

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

transform

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

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

Skew

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

transform

.class { @include transform(skewX(-25deg)); }

Skew

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

transform

.class { @include transform(skewY(25deg)); }

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

Skew | origin

.class {

@include origin(bottom, left);

@include skew(-25deg, 0);

}

transform

Skew | origin

.class {

@include origin(top, left);

@include skew(0, 25deg);

}

transform

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

Scale

.class { @include scale(0.75); }

transform

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

Scale | origin

.class {

@include origin(bottom, left);

@include scale(0.75);

}

transform

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

Rotate

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

transform

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

Rotate | origin

.class {

@include rotate(45deg);

@include origin(bottom, right);

}

transform

transition

10 4.0 3.1 10.5

3.2

4.0

mini ... 2.1 7.0 10 35 30 10

Suporte

transition

*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

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

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

transition

.class {

@include transition(

background-color 1s ease,

height 1s ease 1s);

}

transition

animation

10 4.0 4.0 12

3.2

5.0

mini ... 2.1

4.0 7.0 12.1 35 30 10

Suporte

animation

@keyframes animacao {

from { ... }

to { ... }

}

@keyframes animacaoBolada {

0% { ... }

50% { ... }

100% { ... }

}

maior controle

porcentagem relativa à duração da animação

forma mais básica

Keyframes

animation

Keyframes - Prefixos

animation

@-webkit-keyframes animationName { }

@-moz-keyframes animationName { }

@-o-keyframes animationName { }

@-ms-keyframes animationName { }

@keyframes animationName { }

@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

@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

*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

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

-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

.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

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

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

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

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

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

Dicas

http://caniuse.com/

http://bit.ly/transition-snippets

http://matthewlein.com/ceaser/

http://bit.ly/sass-mixins

aprenda CSS antes de pré processadores

use com moderação

todos prefixos

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

@raphaelfabeni

Obrigado!

contato@raphaelfabeni.com.br