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

“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

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

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

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

MEDO
DÚVIDA
CONFORTO
É MUITO
CEDO

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
LEVEZA
ESCALA
VELOCIDADE

EXPERIMENTO
SUPORTE
EXCESSO
REDUNDÂNCIA

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 os paranauês
do CSS primeiro!
De novo...

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

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

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

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

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;
}
Mixin
border-radius

@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

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
@mixin box-shadow($value1, $value2) {
-webkit-box-shadow: $value1, $value2;
-moz-box-shadow: $value1, $value2;
box-shadow: $value1, $value2;
}

}
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...) {
}

Mixin
box-shadow
@mixin 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); }

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

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

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

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

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

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

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

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

Keep calm and let's play CSS3

More Related Content

Similar to Keep calm and let's play CSS3 (20)

Recently uploaded (20)

Keep calm and let's play CSS3