keep calm and let's play css3
DESCRIPTION
Palestra apresentada no TDC 2014 pelo desenvolvedor Raphael Fabeni, que fala sobre a utilização de CSS3 e SASS em projetos web.TRANSCRIPT
@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 ¯\_(ツ)_/¯