Você está na página 1de 129

30/12/2015 CSS3Introduo

CSS3 Introduo
"Anterior Prximocaptulo"

CSS3opadromaisrecenteparaCSS.

CSS3totalmentecompatvelcomversesanteriorescom
versesanterioresdoCSS.

EstaseoensinasobreosnovosrecursosdoCSS3!

Mdulos CSS3
CSS3foidivididoem"mdulos".Elecontma"especificaoCSSvelho"(quefoi
divididoempedaosmenores).Almdisso,novosmdulossoadicionados.

AlgunsdosmdulosCSS3maisimportantessoosseguintes:

Seletores
ModelodeCaixa
FundoseFronteiras
OsvaloresdeimagemecontedoSubstitudo
Efeitosdetexto
2D/3DTransformaes
Animaes
LayoutdeColuna
Interfacedeusurio

AmaioriadasnovaspropriedadesCSS3soimplementadasemnavegadores
modernos.

"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

1/1
30/12/2015 CSS3BordersCantosarredondados

CSS3 cantos arredondados


"Anterior Prximocaptulo"

CSS3 cantos arredondados


ComoCSS3 borderradius propriedade,vocpodedarqualquer
elemento"cantosarredondados".

Suporte navegador
Osnmerosnatabelaespecificaraprimeiraversodonavegadorquesuporta
totalmenteapropriedade.

Nmerosseguidoporwebkitoumozespecificaraprimeiraversoquetrabalhou
comumprefixo.

Property

borderradius 5.0 12.0 9.0 4.0 5.0 10.5


4.0 3.0 3.1
webkit moz webkit

CSS3 borderradius propriedade


ComCSS3,vocpodedarqualquerelemento"cantosarredondados",usandoo
borderradius propriedade.

Aquiestotrsexemplos:

1.Cantosarredondadosparaumelementocomumacordefundoespecificada:

1/6
30/12/2015 CSS3BordersCantosarredondados

Cantos
arredondados!

2.Cantosarredondadosparaumelementocomumaborda:

Cantos
arredondados!

3.Cantosarredondadosparaumelementodeumaimagemdefundocom:

Cantos
arredondados!

Aquiestocdigo:

Exemplo

#rcorners1{
borderradius:25px;
background:#73AD21;
padding:20px;
width:200px;
height:150px;
}

#rcorners2{
borderradius:25px;
border:2pxsolid#73AD21;
padding:20px;
width:200px;
height:150px;
2/6
30/12/2015 CSS3BordersCantosarredondados

}

#rcorners3{

borderradius:25px;

background:url(paper.gif);

backgroundposition:lefttop;
backgroundrepeat:repeat;
padding:20px;
width:200px;

height:150px;
}

Tentevocmesmo"

Dica:O borderradius propriedadenaverdadeumatalhoparathe


bordertopleftradius , bordertoprightradius , border
bottomrightradius and borderbottomleftradius
properties.

CSS3 borderradius Especifique cada canto


Sevocespecificarapenasumvalorparao borderradius propriedade,esteraio
seraplicadaatodosos4cantos.

Noentanto,vocpodeespecificarcadacantoseparadamente,sedesejar.Aquiesto
asregras:

Quatrovalores:primeirovaloraplicaseapartesuperioresquerda,segundo
valoraplicaseapartesuperiordireita,oterceirovaloraplicaseaparteinferior
direitoe,emquartovaloraplicaseacantoinferioresquerdo
Trsvalores:primeirovaloraplicaseapartesuperioresquerda,segundovalor
aplicaseasuperiordireitoeinferioresquerdo,eterceirovaloraplicasea
inferiordireita
Doisvalores:primeirovalorrefereaocantosuperioresquerdoeinferiordireito,
eosegundovaloraplicasesuperiordireitoecantoinferioresquerdo
Umvalor:todososquatrocantossoarredondadosigualmente

Aquiestotrsexemplos:

1.Quatrovaloresborderradius:15px50px30px5px:

3/6
30/12/2015 CSS3BordersCantosarredondados

2.Trsvaloresborderradius:15px50px30px:

3.Doisvaloresborderradius:15px50px:

Aquiestocdigo:

Exemplo

#rcorners4{
borderradius:15px50px30px5px;
background:#73AD21;
padding:20px;
width:200px;
height:150px;
}

#rcorners5{
borderradius:15px50px30px;
background:#73AD21;
padding:20px;
width:200px;
height:150px;
}

4/6
30/12/2015 CSS3BordersCantosarredondados

#rcorners6{

borderradius:15px50px;
background:#73AD21;
padding:20px;
width:200px;

height:150px;
}

Tentevocmesmo"

Voctambmpodecriarcantoselpticas:

Exemplo

#rcorners7{
borderradius:50px/15px;
background:#73AD21;
padding:20px;
width:200px;
height:150px;
}

#rcorners8{
borderradius:15px/50px;
background:#73AD21;
padding:20px;
width:200px;
height:150px;
}

#rcorners9{
borderradius:50%;
background:#73AD21;
padding:20px;
width:200px;
height:150px;
}

Tentevocmesmo"

5/6
30/12/2015 CSS3BordersCantosarredondados

Testese com exerccios!


Exerccio1 Exerccio2

Cantos arredondados Propriedades CSS3


Property Description

borderradius Ashorthandpropertyforsettingallthefourborder
**radiusproperties

bordertopleft Definestheshapeoftheborderofthetopleftcorner
radius

bordertopright Definestheshapeoftheborderofthetopright
radius corner

borderbottomright Definestheshapeoftheborderofthebottomright
radius corner

borderbottomleft Definestheshapeoftheborderofthebottomleft
radius corner

"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

6/6
30/12/2015 CSS3BorderImagens

CSS3 Border Imagens


"Anterior Prximocaptulo"

CSS3 Border Imagens


Como CSS3imagemBeira propriedade,vocpodedefinirumaimagema
serusadacomoabordaemtornodeumelemento.

Suporte navegador
Osnmerosnatabelaespecificaraprimeiraversodonavegadorquesuporta
totalmenteapropriedade.

Nmerosseguidoporwebkit,moz,ouOespecificaraprimeiraversoque
trabalhoucomumprefixo.

Property

borderimage 16.0 12.0 11.0 15.0 6.0 15.0


4.0 3.5 3.1 11.0o
webkit moz webkit

CSS3 borderimage imvel


OCSS3 borderimage propriedadepermitequevocespecificarumaimagem
paraserusadaemvezdabordanormalemtornodeumelemento.

Apropriedadetemtrspartes:

1. Aimagemaserusadacomoafronteira
2. Ondecortaraimagem

1/5
30/12/2015 CSS3BorderImagens

3. Definaseasseesdomeiodeveserrepetidoouesticado

Vamosusaraseguinteimagem(chamadode"border.png"):

O borderimage propriedadelevaaimagemecortaoemnovesees,comoum
tabuleirodetictactoe.Emseguida,elecolocaoscantosnoscantos,easseesdo
meiosorepetidasouesticadavocespecificar.

Nota:Para borderimagem paraotrabalho,oelementotambmprecisada


fronteira conjuntodepropriedades!

Aqui,asseesmeiodaimagemsorepetidosparacriarafronteira:

Umaimagemcomoumabeira!

Aquiestocdigo:

Exemplo

#borderimg{
border:10pxsolidtransparent;
padding:15px;
webkitborderimage:url(border.png)30round;/*Safari3.1
5*/
oborderimage:url(border.png)30round;/*Opera1112.1*/
borderimage:url(border.png)30round;
}

Tentevocmesmo"

Aqui,asseesmeiodaimagemsoesticadosparacriarafronteira:

Umaimagemcomoumabeira!

Aquiestocdigo:
2/5
30/12/2015 CSS3BorderImagens

Exemplo

#borderimg{
border:10pxsolidtransparent;
padding:15px;
webkitborderimage:url(border.png)30stretch;/*Safari
3.15*/
oborderimage:url(border.png)30stretch;/*Opera1112.1
*/
borderimage:url(border.png)30stretch;
}

Tentevocmesmo"

Dica:O borderimage propriedadenaverdadeumatalhoparathe


borderimagesource , borderimageslice , borderimage
width , borderimageoutset and borderimagerepeat
properties.

CSS3 borderimage Diferentes Valores Fatia


Valoresfatiadiferentemudacompletamenteovisualdafronteira:

Exemplo1:

borderimage:url(border.png)50rodada

Exemplo2:

borderimage:url(border.png)20%redonda

Exemplo3:

borderimage:url(border.png)30%redonda

3/5
30/12/2015 CSS3BorderImagens

Aquiestocdigo:

Exemplo

#borderimg1{
border:10pxsolidtransparent;
padding:15px;
webkitborderimage:url(border.png)50round;/*Safari3.1
5*/
oborderimage:url(border.png)50round;/*Opera1112.1*/
borderimage:url(border.png)50round;
}

#borderimg2{
border:10pxsolidtransparent;
padding:15px;
webkitborderimage:url(border.png)20%round;/*Safari
3.15*/
oborderimage:url(border.png)20%round;/*Opera1112.1
*/
borderimage:url(border.png)20%round;
}

#borderimg3{
border:10pxsolidtransparent;
padding:15px;
webkitborderimage:url(border.png)30%round;/*Safari
3.15*/
oborderimage:url(border.png)30%round;/*Opera1112.1
*/
borderimage:url(border.png)30%round;
}

Tentevocmesmo"

Testese com exerccios!


Exerccio1 Exerccio2

4/5
30/12/2015 CSS3BorderImagens

Propriedades da borda CSS3


Property Description

borderimage Ashorthandpropertyforsettingalltheborder
image*properties

borderimagesource Specifiesthepathtotheimagetobeusedasa
border

borderimageslice Specifieshowtoslicetheborderimage

borderimagewidth Specifiesthewidthsoftheborderimage

borderimageoutset Specifiestheamountbywhichtheborderimagearea
extendsbeyondtheborderbox

borderimagerepeat Specifieswhethertheborderimageshouldbe
repeated,roundedorstretched

"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

5/5
30/12/2015 CSS3Fundos

CSS3 Fundos
"Anterior Prximocaptulo"

CSS3 Fundos
CSS3contmalgumasnovaspropriedadesfundo,quepermitemmaiorcontrole
doelementodefundo.

Nestecaptulo,vocaprendercomoadicionarvriasimagensdefundoparaum
elemento.

VoctambmvaiaprendersobreasseguintesnovaspropriedadesCSS3:

backgroundsize
backgroundorigem
backgroundclipe

Suporte navegador
Osnmerosnatabelaespecificaraprimeiraversodonavegadorquesuporta
totalmenteapropriedade.

Nmerosseguidoporwebkit,moz,ouOespecificaraprimeiraversoque
trabalhoucomumprefixo.

Property

background 4.0 12.0 9.0 3.6 3.1 11.5


image
(withmultiple
backgrounds)

background 4.0 12.0 9.0 4.0 4.1 10.5


size 1.0 3.6 3.0 10.0o
webkit moz webkit

1/8
30/12/2015 CSS3Fundos

background 1.0 12.0 9.0 4.0 3.0 10.5


origin

backgroundclip 4.0 12.0 9.0 4.0 3.0 10.5

CSS3 Mltiplos Fundos


CSS3permiteadicionarmltiplasimagensdefundoparaumelemento,atravsdo
backgroundimage propriedade.

Asdiferentesimagensdefundososeparadosporvrgulas,easimagensso
empilhadosemcimaunsdosoutros,emqueaprimeiraimagemmaisprximodo
espectador.

Oexemploaseguirtemduasimagensdefundo,aprimeiraimagemumaflor
(alinhadoparteinferioredireita)easegundaimagemumfundodepapel
(alinhadocomocantosuperioresquerdo):

Exemplo

#example1{
backgroundimage:url(img_flwr.gif),url(paper.gif);
backgroundposition:rightbottom,lefttop;
backgroundrepeat:norepeat,repeat;
}

Tentevocmesmo"

Vriasimagensdefundopodemserespecificadosutilizandoaspropriedadesdefundo
individuais(comoacima)ouo fundo propriedadeestenogrfica.

Oexemploaseguirusao fundo propriedadeestenogrfica(mesmoresultadoqueo


exemploacima):

Exemplo

#example1{
background:url(img_flwr.gif)rightbottomnorepeat,
url(paper.gif)lefttoprepeat;
2/8
30/12/2015 CSS3Fundos

Tentevocmesmo"

CSS3 Fundo Tamanho


OCSS3 backgroundsize propriedadepermitequevocespecifiqueotamanho
dasimagensdefundo.

AntesCSS3,otamanhodeumaimagemdefundoeraotamanhorealdaimagem.
CSS3nospermitevoltarausarimagensdefundoemdiferentescontextos.

Otamanhopodeserespecificadoemcomprimentos,porcentagens,ouusandouma
dasduaspalavraschave:conteroutampa.

Oexemploaseguirredimensionaumaimagemdefundoparamuitomenoresdoque
aimagemoriginal(usandopixels):

Imagemdefundooriginal:

Lorem Ipsum Dolor


Loremipsumdolorsitamet,consectetueradipiscingelit,sednonummydiam
nibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.

Utwisienimannciomnimaveniam,Quisnostrudexerciullamcorpertao
suscipitlobortisNISLutaliquipexeacommodoconsequat.

Backgroundimageredimensionada:

Lorem Ipsum Dolor


Loremipsumdolorsitamet,consectetueradipiscingelit,sednonummydiam
nibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.

Utwisienimannciomnimaveniam,Quisnostrudexerciullamcorpertao

3/8
30/12/2015 CSS3Fundos

suscipitlobortisNISLutaliquipexeacommodoconsequat.

Aquiestocdigo:

Exemplo

#div1{
background:url(img_flower.jpg);
backgroundsize:100px80px;
backgroundrepeat:norepeat;
}

Tentevocmesmo"

Osoutrosdoisvalorespossveispara backgroundsize so conter e


cobertura.

O contm palavraschavedimensionaaimagemdefundoasertograndequanto
possvel(mastantoasualarguraesuaalturadevecaberdentrodareade
contedo).Comotal,dependendodasproporesdaimagemdefundoeazonade
posicionamentodofundo,podehaveralgumasreasdoplanodefundo,queno
estocobertaspelaimagemdefundo.

A tampa palavrachavedimensionaaimagemdefundoparaqueareadecontedo
completamentecobertapelaimagemdefundo(ambossualarguraealturaso
iguaisouexcedemareadecontedo).Comotal,algumaspartesdaimagemde
fundopodenoservisveisnareadeposicionamentodofundo.

Oexemploaseguirilustraousode conter etampa:

Exemplo

#div1{
background:url(img_flower.jpg);
backgroundsize:contain;
backgroundrepeat:norepeat;
}
#div2{
background:url(img_flower.jpg);
4/8
30/12/2015 CSS3Fundos

backgroundsize:cover;

backgroundrepeat:norepeat;
}

Tentevocmesmo"

Definir tamanhos de multiple Imagens de Fundo


O fundodetamanho dapropriedadetambmaceitavriosvaloresparao
tamanhodofundo(usandoumalistaseparadaporvrgula),quandosetrabalhacom
vriasorigens.

Oexemploaseguirtemtrsimagensdefundoespecificado,comdiferentevalorde
fundodetamanhoparacadaimagem:

Exemplo

#example1{
background:url(img_flwr.gif)lefttopnorepeat,
url(img_flwr.gif)rightbottomnorepeat,url(paper.gif)lefttop
repeat;
backgroundsize:50px,130px,auto;
}

Tentevocmesmo"

O tamanho da imagem de fundo


Agoransqueremosterumaimagemdefundoemumsitequecobreajanelado
navegadorinteiraemtodososmomentos.

Osrequisitossoosseguintes:

Preenchatodaapginacomaimagem(nenhumespaoembranco)
Escaladaimagem,conformenecessrio
Imagemcentralnapgina
Nocausambarrasderolagem

5/8
30/12/2015 CSS3Fundos

OexemploaseguirmostracomofazloUseoelementohtml(oelementohtml
semprepelomenosaalturadajaneladonavegador).Emseguida,definaumfundo
fixoecentradanela.Emseguida,ajustarseutamanhocomapropriedade
backgroundsize:

Exemplo

html{
background:url(img_flower.jpg)norepeatcentercenterfixed;
backgroundsize:cover;
}

Tentevocmesmo"

CSS3 backgroundorigem imvel


OCSS3 backgroundorigem propriedadeespecificaondeaimagemdefundoest
posicionado.

Apropriedadetemtrsvaloresdiferentes:

borderboxaimagemdefundocomeaapartirdocantosuperioresquerdoda
fronteira
paddingbox(padro)aimagemdefundocomeaapartirdocantosuperior
esquerdodabordaestofamento
contentboxaimagemdefundocomeaapartirdocantosuperioresquerdodo
contedo

Oexemploaseguirilustrao backgroundorigem dapropriedade:

Exemplo

#example1{
border:10pxsolidblack;
padding:35px;
background:url(img_flwr.gif);
backgroundrepeat:norepeat;
backgroundorigin:contentbox;
}

6/8
30/12/2015 CSS3Fundos

Tentevocmesmo"

CSS3 backgroundclip de Propriedade


OCSS3 backgroundclipde propriedadeespecificaareadepinturadefundo.

Apropriedadetemtrsvaloresdiferentes:

borderbox(padro)ofundopintadoparaabordaexternadafronteira
paddingboxofundopintadoparaabordaexternadoestofamento
contedodecaixaofundopintadodentrodacaixadecontedo

Oexemploaseguirilustrao backgroundclipde propriedade:

Exemplo

#example1{
border:10pxdottedblack;
padding:35px;
background:yellow;
backgroundclip:contentbox;
}

Tentevocmesmo"

Testese com exerccios!


Exerccio1 Exerccio2 Exerccio3 Exerccio4

Exerccio5

Propriedades CSS3 fundo


Property Description

7/8
30/12/2015 CSS3Fundos

background Ashorthandpropertyforsettingallthebackground
propertiesinonedeclaration

backgroundclip Specifiesthepaintingareaofthebackground

backgroundimage Specifiesoneormorebackgroundimagesforan
element

backgroundorigin Specifieswherethebackgroundimage(s)is/are
positioned

backgroundsize Specifiesthesizeofthebackgroundimage(s)

"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

8/8
30/12/2015 CSS3Colors

CSS3 Colors
"Anterior Prximocaptulo"

CSS3 Colors
CSSoferecesuporteanomesdecores,hexadecimalecoresRGB.

Almdisso,tambmintroduzCSS3:

CoresRGBA
CoresHSL
CoresHSLA
opacidade

Suporte navegador
Osnmerosnatabelaespecificaraprimeiraversodonavegadorquesuporta
totalmenteosvaloresdecorCSS3/propriedade.

Property

RGBA,HSL,and 4.0 12.0 9.0 3.0 3.1 10.1


HSLA

opacity 4.0 12.0 9.0 2.0 3.1 10.1

RGBA Colors
ValoresdecorRGBAsoumaextensodosvaloresdecorRGBcomumcanalalfa
queespecificaaopacidadedeumacor.

UmvalordecorRGBAespecificadocom:rgba(vermelho,verde,azul,alfa).O
parmetroalfaumnmeroentre0.0(totalmentetransparente)e1,0(totalmente
opaco).

rgba(255,0,0,0,2)
1/4
30/12/2015 CSS3Colors

rgba(255,0,0,0,4)
rgba(255,0,0,0,6)
rgba(255,0,0,0,8)

OexemploaseguirdefinediferentescoresRGBA:

Exemplo

#p1{backgroundcolor:rgba(255,0,0,0.3);}/*redwithopacity
*/
#p2{backgroundcolor:rgba(0,255,0,0.3);}/*greenwith
opacity*/
#p3{backgroundcolor:rgba(0,0,255,0.3);}/*bluewith
opacity*/

Tentevocmesmo"

HSL Colors
HSLsignificamatiz,saturaoeleveza.

UmvalordecorHSLespecificadocom:HSL(matiz,saturao,luminosidade).

1. Hueumgraunarodadecor(de0a360):
0(ou360)vermelho
120verde
240azul
2. Asaturaoumvalorpercentual:100%acorcompleta.
3. Levezatambmumapercentagem0%escuro(preto),e100%branco.

HSL(0,100%,30%)
HSL(0,100%,50%)
HSL(0,100%,70%)
HSL(0,100%,90%)

OexemploaseguirdefinediferentescoresHSL:

Exemplo
2/4
30/12/2015 CSS3Colors

#p1{backgroundcolor:hsl(120,100%,50%);}/*green*/
#p2{backgroundcolor:hsl(120,100%,75%);}/*lightgreen*/
#p3{backgroundcolor:hsl(120,100%,25%);}/*darkgreen*/
#p4{backgroundcolor:hsl(120,60%,70%);}/*pastelgreen*/

Tentevocmesmo"

HSLA Colors
ValoresdecorHSLAsoumaextensodosvaloresdecoresHSLcomumcanalalfa
queespecificaaopacidadedeumacor.

UmvalordecorHSLAespecificadocom:HSLA(tonalidade,asaturao,aleveza,
alfa),emqueoparmetroalfadefineaopacidade.Oparmetroalfaumnmero
entre0.0(totalmentetransparente)e1,0(totalmenteopaco).

HSLA(0,100%,30%,0,3)
HSLA(0,100%,50%,0,3)
HSLA(0,100%,70%,0,3)
HSLA(0,100%,90%,0,3)

OexemploaseguirdefinediferentescoresHSLA:

Exemplo

#p1{backgroundcolor:hsla(120,100%,50%,0.3);}/*greenwith
opacity*/
#p2{backgroundcolor:hsla(120,100%,75%,0.3);}/*lightgreen
withopacity*/
#p3{backgroundcolor:hsla(120,100%,25%,0.3);}/*darkgreen
withopacity*/
#p4{backgroundcolor:hsla(120,60%,70%,0.3);}/*pastel
greenwithopacity*/

Tentevocmesmo"

Opacidade
3/4
30/12/2015 CSS3Colors

ApropriedadeCSS3opacidadedefineaopacidadeparaumvalorRGBespecificada.

Ovalordapropriedadeopacidadedeveserumnmeroentre0.0(totalmente
transparente)e1.0(totalmenteopaco).

RGB(255,0,0)opacidade:0,2
RGB(255,0,0)opacidade:0,4
RGB(255,0,0)opacidade:0,6
RGB(255,0,0)opacidade:0,8

Observequeotextoacimatambmseropaca.

OexemploaseguirmostradiferentesvaloresRGBcomopacidade:

Exemplo

#p1{backgroundcolor:rgb(255,0,0);opacity:0.6;}/*redwith
opacity*/
#p2{backgroundcolor:rgb(0,255,0);opacity:0.6;}/*greenwith
opacity*/
#p3{backgroundcolor:rgb(0,0,255);opacity:0.6;}/*bluewith
opacity*/

Tentevocmesmo"

Testese com exerccios!


Exerccio1 Exerccio2 Exerccio3 Exerccio4

"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

4/4
30/12/2015 OsgradientesCSS3

CSS3 gradientes
"Anterior Prximocaptulo"

BackgroundGradient

GradientesCSS3permitemexibirtransiessuavesentredoisoumaismodelos
especificadoscores.

Anteriormente,voctinhaqueusarasimagensparaestesefeitos.Noentanto,
usandogradientesCSS3vocpodereduzirotempodedownloadeusodebanda.
Almdisso,elementoscomgradientesolharmelhorquandoampliada,porqueo
gradientegeradopelonavegador.

CSS3definedoistiposdegradientes:

Osgradienteslineares(vaiparacima/baixo/esquerda/direita/
diagonal)
Osgradientesradiais(definidopeloseucentro)

Suporte navegador
Osnmerosnatabelaespecificaraprimeiraversodonavegadorquesuporta
totalmenteapropriedade.

Nmerosseguidoporwebkit,moz,ouOespecificaraprimeiraversoque
trabalhoucomumprefixo.

1/14
30/12/2015 OsgradientesCSS3

Property

lineargradient 26.0 12.0 10.0 16.0 6.1 12.1


10.0 3.6 5.1 11.1o
webkit moz webkit

radialgradient 26.0 12.0 10.0 16.0 6.1 12.1


10.0 3.6 5.1 11.6o
webkit moz webkit

repeating 26.0 12.0 10.0 16.0 6.1 12.1


lineargradient 10.0 3.6 5.1 11.1o
webkit moz webkit

repeating 26.0 12.0 10.0 16.0 6.1 12.1


radialgradient 10.0 3.6 5.1 11.6o
webkit moz webkit

CSS3 lineares gradientes


Paracriarumgradientelinearvocdevedefinirpelomenosduasparadasdecor.
Paradasdecoressoascoresquedesejaparatornartransiessuavesentre.Voc
tambmpodedefinirumpontodepartidaeumadireo(ouumngulo),juntamente
comoefeitodegradiente.

Sintaxe

background:lineargradient(direction,colorstop1,colorstop2,
...);

GradienteLinearDecimaparabaixo(esteopadro)

Oexemploaseguirmostraumgradientelinearquecomeanotopo.Elecomeaa
vermelho,atransioparaoamarelo:

2/14
30/12/2015 OsgradientesCSS3

Exemplo

#grad{
background:red;/*Forbrowsersthatdonotsupportgradients
*/
background:webkitlineargradient(red,yellow);/*For
Safari5.1to6.0*/
background:olineargradient(red,yellow);/*ForOpera11.1
to12.0*/
background:mozlineargradient(red,yellow);/*ForFirefox
3.6to15*/
background:lineargradient(red,yellow);/*Standardsyntax
*/
}

Tentevocmesmo"

GradienteLinearesquerdaparaadireita

Oexemploaseguirmostraumgradientelinearquecomeaapartirdaesquerda.Ele
comeaavermelho,atransioparaoamarelo:

Exemplo

#grad{
background:red;/*Forbrowsersthatdonotsupportgradients
*/
background:webkitlineargradient(left,red,yellow);/*For
Safari5.1to6.0*/
background:olineargradient(right,red,yellow);/*ForOpera
11.1to12.0*/
background:mozlineargradient(right,red,yellow);/*For
Firefox3.6to15*/
3/14
30/12/2015 OsgradientesCSS3

background:lineargradient(toright,red,yellow);/*Standard
syntax*/
}

Tentevocmesmo"

GradienteLinearDiagonal

Vocpodefazerumgradienteemdiagonal,especificandoambasasposiesde
partidahorizontaiseverticais.

Oexemploaseguirmostraumgradientelinearquecomeanocantosuperior
esquerdo(evaiparaocantoinferiordireito).Elecomeaavermelho,atransio
paraoamarelo:

Exemplo

#grad{
background:red;/*Forbrowsersthatdonotsupportgradients
*/
background:webkitlineargradient(lefttop,red,yellow);/*
ForSafari5.1to6.0*/
background:olineargradient(bottomright,red,yellow);/*
ForOpera11.1to12.0*/
background:mozlineargradient(bottomright,red,yellow);/*
ForFirefox3.6to15*/
background:lineargradient(tobottomright,red,yellow);/*
Standardsyntax*/
}

Tentevocmesmo"

4/14
30/12/2015 OsgradientesCSS3

Usando Angles
Sevocquisermaiscontrolesobreadireodogradiente,vocpodedefinirum
ngulo,emvezdeasdireespredefinidos(parabaixo,paracima,paraadireita,
paraaesquerda,paraadireitainferior,etc.).

Sintaxe

background:lineargradient(angle,colorstop1,colorstop2);

Onguloespecificadocomoumnguloentreumalinhahorizontalepelalinhade
gradiente.

Oexemploaseguirmostracomousarngulosemgradienteslineares:

Exemplo

#grad{
background:red;/*Forbrowsersthatdonotsupportgradients
*/
background:webkitlineargradient(90deg,red,yellow);/*For
Safari5.1to6.0*/
background:olineargradient(90deg,red,yellow);/*For
Opera11.1to12.0*/
background:mozlineargradient(90deg,red,yellow);/*For
Firefox3.6to15*/
background:lineargradient(90deg,red,yellow);/*Standard
syntax*/
}

Tentevocmesmo"

5/14
30/12/2015 OsgradientesCSS3

Usando mltiplas paradas Cor


Oexemploaseguirmostraumgradientelinear(decimaparabaixo)comvrios
limitesdecor:

Exemplo

#grad{
background:red;/*Forbrowsersthatdonotsupportgradients
*/
background:webkitlineargradient(red,yellow,green);/*For
Safari5.1to6.0*/
background:olineargradient(red,yellow,green);/*ForOpera
11.1to12.0*/
background:mozlineargradient(red,yellow,green);/*For
Firefox3.6to15*/
background:lineargradient(red,yellow,green);/*Standard
syntax*/
}

Tentevocmesmo"

Oexemploseguintemostracomocriarumgradientelinear(daesquerdaparaa
direita)comacordoarcoriseumtexto:

BackgroundGradient

6/14
30/12/2015 OsgradientesCSS3

Exemplo

#grad{
background:red;/*Forbrowsersthatdonotsupportgradients
*/
/*ForSafari5.1to6.0*/
background:webkitlinear
gradient(left,red,orange,yellow,green,blue,indigo,violet);
/*ForOpera11.1to12.0*/
background:olinear
gradient(left,red,orange,yellow,green,blue,indigo,violet);
/*ForFx3.6to15*/
background:mozlinear
gradient(left,red,orange,yellow,green,blue,indigo,violet);
/*Standardsyntax*/
background:lineargradient(toright,
red,orange,yellow,green,blue,indigo,violet);
}

Tentevocmesmo"

Usando Transparncia
GradientesCSS3tambmsuportamatransparncia,oquepodeserusadoparacriar
efeitosdedesvanecimento.

Paraadicionartransparncia,nsusamosafunorgba()paradefiniroslimitesde
cor.Oltimoparmetronafunorgba()podeserumvalorde0a1,eeledefinea
transparnciadacor:0indicaumatransparnciatotal,1indicafullcolor(sem
transparncia).

Oexemploaseguirmostraumgradientelinearquecomeaapartirdaesquerda.Ele
comeatotalmentetransparente,atransioparaacorvermelhacompleta:

7/14
30/12/2015 OsgradientesCSS3

Exemplo

#grad{
background:red;/*Forbrowsersthatdonotsupportgradients
*/
background:webkitlinear
gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));/*Safari5.16*/
background:olinear
gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));/*Opera11.112*/
background:mozlinear
gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));/*Fx3.615*/
background:lineargradient(toright,rgba(255,0,0,0),
rgba(255,0,0,1));/*Standard*/
}

Tentevocmesmo"

Repetindo um gradiente linear


Afunoderepetiolineardegradiente()utilizadapararepetirgradientes
lineares:

Exemplo
Umgradientelinearrepetindo:

#grad{
background:red;/*Forbrowsersthatdonotsupportgradients
*/
/*Safari5.1to6.0*/
background:webkitrepeatinglineargradient(red,yellow10%,

8/14
30/12/2015 OsgradientesCSS3

green20%);

/*Opera11.1to12.0*/

background:orepeatinglineargradient(red,yellow10%,green
20%);

/*Firefox3.6to15*/

background:mozrepeatinglineargradient(red,yellow10%,
green20%);

/*Standardsyntax*/

background:repeatinglineargradient(red,yellow10%,green
20%);
}

Tentevocmesmo"

CSS3 gradientes radiais


Umgradienteradialdefinidaporseucentro.

Paracriarumgradienteradialvoctambmdevedefinir,pelomenos,duasparadas
decor.

Sintaxe

background:radialgradient(shapesizeatposition,startcolor,...,
lastcolor);

Porpadro,aformaelipse,otamanhomaisdistantecanto,eaposioocentro.

RadialGradientuniformementeespaadosCorStops(esteopadro)

Oexemploaseguirmostraumgradienteradialcomlimitesdecoruniformemente
espaados:

9/14
30/12/2015 OsgradientesCSS3

Exemplo

#grad{
background:red;/*Forbrowsersthatdonotsupportgradients
*/
background:webkitradialgradient(red,yellow,green);/*
Safari5.1to6.0*/
background:oradialgradient(red,yellow,green);/*ForOpera
11.6to12.0*/
background:mozradialgradient(red,yellow,green);/*For
Firefox3.6to15*/
background:radialgradient(red,yellow,green);/*Standard
syntax*/
}

Tentevocmesmo"

RadialGradientDiferentementeespaadoCorStops

Oexemploaseguirmostraumgradienteradialcomlimitesdecordiferente
espaados:

Exemplo

#grad{
background:red;/*Forbrowsersthatdonotsupportgradients
*/
background:webkitradialgradient(red5%,yellow15%,green
60%);/*Safari5.16.0*/
background:oradialgradient(red5%,yellow15%,green60%);
/*ForOpera11.612.0*/
background:mozradialgradient(red5%,yellow15%,green60%);
/*ForFirefox3.615*/
10/14
30/12/2015 OsgradientesCSS3

background:radialgradient(red5%,yellow15%,green60%);/*
Standardsyntax*/
}

Tentevocmesmo"

Definir Forma
Oparmetrodeformadefineaforma.Podelevarocrculovalorouelipse.Ovalor
padroelipse.

Oexemploaseguirmostraumgradienteradialcomaformadeumcrculo:

Exemplo

#grad{
background:red;/*Forbrowsersthatdonotsupportgradients
*/
background:webkitradialgradient(circle,red,yellow,green);
/*Safari*/
background:oradialgradient(circle,red,yellow,green);/*
Opera11.6to12.0*/
background:mozradialgradient(circle,red,yellow,green);/*
Firefox3.6to15*/
background:radialgradient(circle,red,yellow,green);/*
Standardsyntax*/
11/14
30/12/2015 OsgradientesCSS3

Tentevocmesmo"

O uso de diferentes tamanhos Palavraschave


Oparmetrodetamanhodefineotamanhodogradiente.Podelevarquatrovalores:

maisprximodolado
doladomaisdistante
maisprximocanto
maisdistantecanto

Exemplo
Umgradienteradialcompalavraschavediferentestamanho:

#grad1{
background:red;/*Forbrowsersthatdonotsupportgradients
*/
/*Safari5.1to6.0*/
background:webkitradialgradient(60%55%,closestside,red,
yellow,black);
/*ForOpera11.6to12.0*/
background:oradialgradient(60%55%,closestside,red,
yellow,black);
/*ForFirefox3.6to15*/
background:mozradialgradient(60%55%,closestside,red,
yellow,black);
/*Standardsyntax*/
background:radialgradient(closestsideat60%55%,red,
yellow,black);
}

#grad2{
/*Safari5.1to6.0*/
background:webkitradialgradient(60%55%,farthestside,red,
yellow,black);
/*Opera11.6to12.0*/
background:oradialgradient(60%55%,farthestside,red,

12/14
30/12/2015 OsgradientesCSS3

yellow,black);

/*ForFirefox3.6to15*/

background:mozradialgradient(60%55%,farthestside,red,
yellow,black);

/*Standardsyntax*/

background:radialgradient(farthestsideat60%55%,red,
yellow,black);
}

Tentevocmesmo"

Repetindo um gradiente radial


Afunorepetirradialinclinao()usadopararepetirgradientesradiais:

Exemplo
Umgradienteradialrepetir:

#grad{
background:red;/*Forbrowsersthatdonotsupportgradients
*/
/*ForSafari5.1to6.0*/
background:webkitrepeatingradialgradient(red,yellow10%,
green15%);
/*ForOpera11.6to12.0*/
background:orepeatingradialgradient(red,yellow10%,green
15%);
/*ForFirefox3.6to15*/
background:mozrepeatingradialgradient(red,yellow10%,
green15%);
/*Standardsyntax*/

13/14
30/12/2015 OsgradientesCSS3

background:repeatingradialgradient(red,yellow10%,green
15%);
}

Tentevocmesmo"

Testese com exerccios!


Exerccio1 Exerccio2 Exerccio3 Exerccio4

Exerccio5 Exerccio6 Exerccio7

"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

14/14
30/12/2015 CSS3EfeitosdeSombra

CSS3 Efeitos de Sombra


"Anterior Prximocaptulo"

ComCSS3vocpodecriarefeitosde
sombra!

CSS3 Efeitos de Sombra


ComCSS3vocpodeadicionarsombraaotextoeaoselementos.

Nestecaptulo,vocaprendersobreasseguintespropriedades:

textshadow
boxshadow

Suporte navegador
Osnmerosnatabelaespecificaraprimeiraversodonavegadorquesuporta
totalmenteapropriedade.

Nmerosseguidoporwebkitoumozespecificaaprimeiraversoquetrabalhou
comumprefixo.

Property

textshadow 4.0 12.0 10.0 3.5 4.0 9.5

boxshadow 10.0 12.0 9.0 4.0 5.1 10.5


4.0 3.5 3.1
webkit moz webkit

1/6
30/12/2015 CSS3EfeitosdeSombra

CSS3 Sombra Texto


OCSS3 textshadow propriedadeseaplicasombraaotexto.

Noseuusomaissimples,vocsespecificarasombrahorizontal(2px)easombra
vertical(2px):

Texto sombra efeito!

Exemplo

h1{
textshadow:2px2px;
}

Tentevocmesmo"

Emseguida,adicioneumacorparaasombra:

Texto sombra efeito!

Exemplo

h1{
textshadow:2px2pxred;
}

Tentevocmesmo"

Emseguida,adicioneumefeitodeborroparaasombra:

Texto sombra efeito!

Exemplo

2/6
30/12/2015 CSS3EfeitosdeSombra

h1{
textshadow:2px2px5pxred;
}

Tentevocmesmo"

Oexemploaseguirmostraumtextobrancocomsombrapreta:

Texto sombra efeito!

Exemplo

h1{
color:white;
textshadow:2px2px4px#000000;
}

Tentevocmesmo"

Oexemploaseguirmostraumfulgordenonvermelhosombra:

Texto sombra efeito!

Exemplo

h1{
textshadow:003px#FF0000;
}

Tentevocmesmo"

Vrias Sombras
Paraadicionarmaisdeumasombraaotexto,vocpodeadicionarumalistade
3/6
30/12/2015 CSS3EfeitosdeSombra

sombras,separadosporvrgulas.

Oexemploaseguirmostraumfulgordenonsombravermelhoeazul:

Texto sombra efeito!

Exemplo

h1{
textshadow:003px#FF0000,005px#0000FF;
}

Tentevocmesmo"

Oexemploaseguirmostraumtextoembrancocompreto,azul,azulescuroe
sombra:

Texto sombra efeito!

Exemplo

h1{
color:white;
textshadow:1px1px2pxblack,0025pxblue,005px
darkblue;
}

Tentevocmesmo"

CSS3 boxshadow propriedade


OCSS3 boxshadow propriedadeseaplicasombraparaelementos.

Noseuusomaissimples,vocsespecificarasombrahorizontalevertical,a
sombra:

4/6
30/12/2015 CSS3EfeitosdeSombra

Esteumamarelo<div>elemento
comumpretoboxshadow

Exemplo

div{
boxshadow:10px10px;
}

Tentevocmesmo"

Emseguida,adicioneumacorparaasombra:

Esteumamarelo<div>elemento
comumcinzaboxshadow

Exemplo

div{
boxshadow:10px10pxgrey;
}

Tentevocmesmo"

Emseguida,adicioneumefeitodeborroparaasombra:

Esteumamarelo<div>elemento
comumborrado,cinzentobox
shadow

5/6
30/12/2015 CSS3EfeitosdeSombra

Exemplo

div{
boxshadow:10px10px5pxgrey;
}

Tentevocmesmo"

Testese com exerccios!


Exerccio1 Exerccio2 Exerccio3 Exerccio4

Exerccio5

Propriedades de sombra CSS3


AtabelaaseguirlistaaspropriedadesCSS3sombra:

Property Description

boxshadow Addsoneormoreshadowstoanelement

textshadow Addsoneormoreshadowstoatext

"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

6/6
30/12/2015 CSS3Texto

CSS3 Texto
"Anterior Prximocaptulo"

CSS3 Texto
CSS3contmvriosnovosrecursosdetexto.

Nestecaptulo,vocaprendersobreasseguintespropriedadesdotexto:

textestouro
wordwrap
palavrabreak

Suporte navegador
Osnmerosnatabelaespecificaraprimeiraversodonavegadorquesuporta
totalmenteapropriedade.

Nmerosseguidosporoespecificaraprimeiraversoquetrabalhoucomum
prefixo.

Property

textoverflow 4.0 12.0 6.0 7.0 3.1 11.0


9.0o

wordwrap 23.0 12.0 5.5 3.5 6.1 12.1

wordbreak 4.0 12.0 5.5 15.0 3.1 15.0

CSS3 estouro de texto


OCSS3 textestouro propriedadeespecificacomotransbordadacontedoque
noexibidodeveserassinaladaaousurio.

Elepodesercortado:
1/5
30/12/2015 CSS3Texto

Istoalgumtextolongoquenovaicabernacaixa

ouelepodeserprocessadocomoumreticncias(...):

Istoalgumtextolongo

OcdigoCSScomosesegue:

Exemplo

p.test1{
whitespace:nowrap;
width:200px;
border:1pxsolid#000000;
overflow:hidden;
textoverflow:clip;
}

p.test2{
whitespace:nowrap;
width:200px;
border:1pxsolid#000000;
overflow:hidden;
textoverflow:ellipsis;
}

Tentevocmesmo"

Oexemploaseguirmostracomovocpodeexibirocontedotransbordadaquando
pairandosobreoelemento:

Exemplo

div.test:hover{
textoverflow:inherit;
overflow:visible;
}

Tentevocmesmo"

2/5
30/12/2015 CSS3Texto

CSS3 Palavra de Embrulho


OCSS3 palavrawrap propriedadepermitequepalavraslongasparasercapazde
serquebradaeenroleparaaprximalinha.

Seumapalavramuitograndeparacaberdentrodeumarea,eleseexpandeno
exterior:

Estepargrafo
contmumapalavra
muitolonga:
thisisaveryveryveryveryveryverylongword.
Apalavralongavai
quebrarequebra
paraaprximalinha.

Apropriedadewordwrappermiteforarotextoparaembrulharmesmoqueisso
signifiqueadivisonomeiodeumapalavra:

Estepargrafo
contmumapalavra
muitolonga:
thisisaveryveryveryv
eryveryverylongword.
Apalavralongavai
quebrarequebra
paraaprximalinha.

OcdigoCSScomosesegue:

Exemplo
Permitirpalavrascompridasparasercapazdeserquebradoeembrulharparaa
prximalinha:

p{
wordwrap:breakword;
}

Tentevocmesmo"

3/5
30/12/2015 CSS3Texto

CSS3 Palavra Quebrando


OCSS3 palavrabreak propriedadeespecificaregrasdelinhaderuptura.

Estepargrafo
contmalgum
texto.Estalinha
vaiquebrarat
hfens.

Estepargrafoco
ntmalgumtext
o.Aslinhasvaiqu
ebraraqualquerp
ersonagem.

OcdigoCSScomosesegue:

Exemplo

p.test1{
wordbreak:keepall;
}

p.test2{
wordbreak:breakall;
}

Tentevocmesmo"

Testese com exerccios!


Exerccio1 Exerccio2 Exerccio3

Propriedades do texto CSS3


AtabelaaseguirlistaasnovaspropriedadesCSS3texto:

4/5
30/12/2015 CSS3Texto

Property Description

textalignlast Specifieshowtoalignthelastlineofatext

textemphasis Ashorthandforsettingtextemphasisstyleandtext
emphasiscolorinonedeclaration

textjustify Specifieshowjustifiedtextshouldbealignedand
spaced

textoverflow Specifieshowoverflowedcontentthatisnotdisplayed
shouldbesignaledtotheuser

wordbreak SpecifieslinebreakingrulesfornonCJKscripts

wordwrap Allowslongwordstobeabletobebrokenandwrap
ontothenextline

"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

5/5
30/12/2015 CSS3WebFonts

CSS3 Web Fonts


"Anterior Prximocaptulo"

CSS3 Web Fonts A regra @ fontface


FontesdaWebpermitemqueosdesignersdaWebparausarfontesquenoesto
instaladosnocomputadordousurio.

Quandovoctiverencontrado/compradoafontequevocdesejausar,bastaincluir
oarquivodefontenoseuservidorweb,eeleserautomaticamentebaixadoparao
usurio,quandonecessrio.

Suasfontes"prprios"sodefinidosdentrodoCSS3 @fontface regra.

Suporte navegador
Osnmerosnatabelaespecificaraprimeiraversodonavegadorquesuporta
totalmenteapropriedade.

Property

@fontface 4.0 12.0 9.0 3.5 3.2 10.0

Diferentes formatos de fontes


FontesTrueType(TTF)

TrueTypeumpadrodefontedesenvolvidonofinalde1980,pelaAppleeMicrosoft.
TrueTypeoformatodafontemaiscomumparaambosossistemasoperacionais
MacOSeMicrosoftWindows.

OpenType(OTF)
1/5
30/12/2015 CSS3WebFonts

OpenTypeumformatoparafontesdecomputadorescalveis.Foiconstrudoem
TrueType,eumamarcacomercialregistradadaMicrosoft.AsfontesOpenTypeso
comumenteusadoshojenasprincipaisplataformasdecomputador.

OWebOpenFontFormat(WOFF)

WOFFumformatodefonteparausoempginasdaweb.Elefoidesenvolvidoem
2009,eagoraumaRecomendaoW3C.WOFFessencialmenteOpenTypeou
TrueTypecomcompressoemetadadosadicionais.Oobjetivoapoiaradistribuio
fonteapartirdeumservidorparaumclienteatravsdeumaredecomrestriesde
larguradebanda.

OWebOpenFontFormat(WOFF2.0)

TrueTypefont/OpenTypequeproporcionamelhorcompressodoqueWOFF1.0.

SVGFontes/Shapes

FontesSVGpermitirSVGparaserusadocomoglifosaoexibirtexto.Aespecificao
SVG1,1definirummdulodefontequepermiteacriaodefontesdentrodeum
documentoSVG.VoctambmpodeaplicarCSSparadocumentosSVG,earegra@
fontfacepodeseraplicadaaotextoemdocumentosSVG.

AsfontesOpenTypeembutidas(EOT)

FontesEOTsoumaformacompactadefontesOpenTypeprojetadospelaMicrosoft
parausocomofontesincorporadasempginasdaweb.

Compatibilidade de navegador para formatos


de fonte
Osnmerosnatabelaespecificaaprimeiraversodobrowserquesuporte
totalmenteoformatodefonte.

Font
format

TTF/OTF 9.0* 4.0 3.5 3.1 10.0

WOFF 9.0 5.0 3.6 5.1 11.1

WOFF2 Not 36.0 35.0* Not 26.0


supported supported

SVG Not 4.0 Not 3.2 9.0


supported supported
2/5
30/12/2015 CSS3WebFonts

EOT 6.0 Not Not Not Not


supported supported supported supported

*IE:Oformatodefontesfuncionaquandodefinidoparaser"instalvel".

*Firefox:Nosuportadoporpadro,maspodeserhabilitado(necessidadededefinir
umsinalizadorpara"true",parausarWOFF2).

Usando a fonte desejada


NoCSS3 @fontface regraquevocdeveprimeirodefinirumnomeparaotipo
deletra(porexemplomyFirstFont),e,emseguida,apontarparaoarquivofonte.

Dica:SempreuseletrasminsculasparaoURLfonte.Letras
maisculaspodedarresultadosinesperadosnoIE.

ParausarafonteparaumelementoHTML,referemseaonomedafonte
(myFirstFont)atravsdo fontfamily propriedade:

Exemplo

@fontface{
fontfamily:myFirstFont;
src:url(sansation_light.woff);
}

div{
fontfamily:myFirstFont;
}

Tentevocmesmo"

Usando Texto corajoso


Vocdeveadicionaroutro @fontface regracontendodescritoresparatextoem
negrito:

3/5
30/12/2015 CSS3WebFonts

Exemplo

@fontface{
fontfamily:myFirstFont;
src:url(sansation_bold.woff);
fontweight:bold;
}

Tentevocmesmo"

Oarquivo"sansation_bold.woff"outroarquivodefonte,quecontmoscaracteres
emnegritoparaafonteSansation.

Browsersvaiusarissosemprequeumpedaodetextocomofontfamily
"myFirstFont"deveprocessarcomonegrito.

Destaforma,vocpodetermuitas @fontface regrasparaamesmafonte.

Testese com exerccios!


Exerccio1 Exerccio2

CSS3 Font Descritores


Atabelaaseguirlistatodososdescritoresdefontesquepodemserdefinidosdentro
do @fontface regra:

Descriptor Values Description

fontfamily name Required.Definesanameforthefont

src URL Required.DefinestheURLofthefontfile

font normal Optional.Defineshowthefontshouldbe


stretch condensed stretched.Defaultis"normal"
ultra
condensed
extra
condensed

4/5
30/12/2015 CSS3WebFonts

semi
condensed
expanded
semi
expanded
extra
expanded
ultra
expanded

fontstyle normal Optional.Defineshowthefontshouldbe


italic styled.Defaultis"normal"
oblique

fontweight normal Optional.Definestheboldnessofthefont.


bold Defaultis"normal"
100
200
300
400
500
600
700
800
900

unicode unicode Optional.DefinestherangeofUNICODE


range range charactersthefontsupports.Defaultis"U+0
10FFFF"

"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

5/5
30/12/2015 CSS3Transformaes2D

CSS3 2D Transformaes
"Anterior Prximocaptulo"

CSS3 Transformaes
TransformaesCSS3permitirquevoctraduzir,girar,dimensionaredistorcer
elementos.

Atransformaoumefeitoquepermitequeumelementomudamdeforma,
tamanhoeposio.

CSS3suportatransformaes2De3D.

Passeomousesobreoselementosabaixoparaveradiferenaentreum2Deuma
transformao3D:

2D D3
girar rarig

Compatibilidade de navegador para 2D


Transformaes
Osnmerosnatabelaespecificaraprimeiraversodonavegadorquesuporta
totalmenteapropriedade.

Nmerosseguidosdems,webkit,moz,ouOespecificaraprimeiraversoque
trabalhoucomumprefixo.

Property

transform 36.0 12.0 10.0 16.0 3.2 23.0


4.0 9.0ms 3.5 webkit 15.0
webkit moz webkit
12.1
10.5o
1/8
30/12/2015 CSS3Transformaes2D

transform 36.0 12.0 10.0 16.0 3.2 23.0


origin 4.0 9.0ms 3.5 webkit 15.0
(twovalue webkit moz webkit
syntax) 12.1
10.5o

CSS3 Transformaes 2D
Nestecaptulo,vocaprendersobreosseguintesmtodosdetransformao2D:

traduzir()
rotate()
escala()
skewX()
skewY()
matriz()

Dica:Vocvaiaprendersobretransformaes3Dnoprximocaptulo.

O traduzir Mtodo

O traduzir() mtodomovimentaumelementodasuaposioactual(deacordo
comosparmetrosindicadosparaoeixoXeoeixoY).

Oexemploaseguirmoveoelemento<div>50pixelsparaadireita,e100pixels
parabaixodesuaposioatual:

Exemplo

div{
mstransform:translate(50px,100px);/*IE9*/
webkittransform:translate(50px,100px);/*Safari*/
transform:translate(50px,100px);
2/8
30/12/2015 CSS3Transformaes2D

Tentevocmesmo"

O rotate Mtodo

O rotate() mtodogiranosentidohorrioumelementoouantihorriode
acordocomumdeterminadograu.

Oexemploaseguirgiraoelemento<div>nosentidohorriocom20graus:

Exemplo

div{
mstransform:rotate(20deg);/*IE9*/
webkittransform:rotate(20deg);/*Safari*/
transform:rotate(20deg);
}

Tentevocmesmo"

Usandovaloresnegativosirrodaroelementoantihorrio.

Oexemploaseguirgiraoelemento<div>sentidoantihorriocom20graus:

Exemplo

div{
mstransform:rotate(20deg);/*IE9*/
webkittransform:rotate(20deg);/*Safari*/
transform:rotate(20deg);
}
3/8
30/12/2015 CSS3Transformaes2D

Tentevocmesmo"

O Mtodo de escala

Os scale() mtodoaumentaoudiminuiotamanhodeumelemento(deacordo
comosparmetrosdadosporalarguraealtura).

Oexemploaseguiraumentaoelemento<div>paraserduasvezesdesualargura
original,etrsvezesdesuaalturaoriginal:

Exemplo

div{
mstransform:scale(2,3);/*IE9*/
webkittransform:scale(2,3);/*Safari*/
transform:scale(2,3);
}

Tentevocmesmo"

Oexemploaseguirdiminuioelemento<div>paraserametadedasualargurae
alturaoriginal:

Exemplo

div{
mstransform:scale(0.5,0.5);/*IE9*/
webkittransform:scale(0.5,0.5);/*Safari*/
transform:scale(0.5,0.5);

4/8
30/12/2015 CSS3Transformaes2D

Tentevocmesmo"

O skewX Mtodo
O skewX() mtododistorceumelementoaolongodoeixoXpelongulodado.

Oexemploaseguirinclinaoelemento<div>20grausaolongodoeixoX:

Exemplo

div{
mstransform:skewX(20deg);/*IE9*/
webkittransform:skewX(20deg);/*Safari*/
transform:skewX(20deg);
}

Tentevocmesmo"

O skewY Mtodo
O skewY() mtododistorceumelementoaolongodoeixoYpelongulodado.

Oexemploaseguirinclinaoelemento<div>20grausaolongodoeixoY:

Exemplo

div{
mstransform:skewY(20deg);/*IE9*/
webkittransform:skewY(20deg);/*Safari*/
transform:skewY(20deg);
}

5/8
30/12/2015 CSS3Transformaes2D

Tentevocmesmo"

A inclinao Mtodo
A inclinao() mtododistorceumelementoaolongodoXedoeixoYpelos
ngulosdadas.

Oexemploaseguirdistorceoelemento<div>20grausaolongodoeixoX,e10
grausaolongodoeixoY:

Exemplo

div{
mstransform:skew(20deg,10deg);/*IE9*/
webkittransform:skew(20deg,10deg);/*Safari*/
transform:skew(20deg,10deg);
}

Tentevocmesmo"

Seosegundoparmetronoespecificado,eletemumvalordezero.Assim,o
exemploaseguirinclinaoelemento<div>20grausaolongodoeixoX:

Exemplo

div{
mstransform:skew(20deg);/*IE9*/
webkittransform:skew(20deg);/*Safari*/
transform:skew(20deg);
}

Tentevocmesmo"

A matriz Mtodo
6/8
30/12/2015 CSS3Transformaes2D

A matriz() mtodocombinatransformartodososmtodos2Demum.

Omtododematriz()levarseisparmetros,contendofunesmatemticas,oque
lhepermitegirar,redimensionar,mover(traduzir),edistorcerelementos:

Exemplo

div{
mstransform:matrix(1,0.3,0,1,0,0);/*IE9*/
webkittransform:matrix(1,0.3,0,1,0,0);/*Safari*/
transform:matrix(1,0.3,0,1,0,0);
}

Tentevocmesmo"

Testese com exerccios!


Exerccio1 Exerccio2 Exerccio3 Exerccio4

CSS3 Transform Properties


Atabelaseguintelistatodasaspropriedadesdetransformao2D:

Property Description

transform Appliesa2Dor3Dtransformationtoanelement

transform Allowsyoutochangethepositionontransformed
origin elements

2D Transform Mtodos
7/8
30/12/2015 CSS3Transformaes2D

Function Description

matrix(n,n,n,n,n,n) Definesa2Dtransformation,usingamatrixofsix
values

translate(x,y) Definesa2Dtranslation,movingtheelementalongthe
XandtheYaxis

translateX(n) Definesa2Dtranslation,movingtheelementalongthe
Xaxis

translateY(n) Definesa2Dtranslation,movingtheelementalongthe
Yaxis

scale(x,y) Definesa2Dscaletransformation,changingthe
elementswidthandheight

scaleX(n) Definesa2Dscaletransformation,changingthe
element'swidth

scaleY(n) Definesa2Dscaletransformation,changingthe
element'sheight

rotate(angle) Definesa2Drotation,theangleisspecifiedinthe
parameter

skew(xangle,y Definesa2DskewtransformationalongtheXandthe
angle) Yaxis

skewX(angle) Definesa2DskewtransformationalongtheXaxis

skewY(angle) Definesa2DskewtransformationalongtheYaxis

"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

8/8
30/12/2015 CSS3transformaes3D

CSS3 transformaes 3D
"Anterior Prximocaptulo"

CSS3 transformaes 3D
CSS3permitequevocformateseuselementosusandotransformaes3D.

Passeomousesobreoselementosabaixoparaveradiferenaentreum2Deuma
transformao3D:

2D 3D
girar girar

Compatibilidade de navegador para


transformaes 3D
Osnmerosnatabelaespecificaraprimeiraversodonavegadorquesuporta
totalmenteapropriedade.

Nmerosseguidoporwebkit,moz,ouOespecificaraprimeiraversoque
trabalhoucomumprefixo.

Property

transform 36.0 12.0 10.0 16.0 4.0 23.0


12.0 10.0 webkit 15.0
webkit moz webkit

transform 36.0 12.0 10.0 16.0 4.0 23.0


origin 12.0 10.0 webkit 15.0
(threevalue webkit moz webkit
syntax)

transformstyle 36.0 12.0 11.0 16.0 4.0 23.0


12.0 10.0 webkit 15.0
webkit moz webkit
1/5
30/12/2015 CSS3transformaes3D

perspective 36.0 12.0 10.0 16.0 4.0 23.0


12.0 10.0 webkit 15.0
webkit moz webkit

perspective 36.0 12.0 10.0 16.0 4.0 23.0


origin 12.0 10.0 webkit 15.0
webkit moz webkit

backface 36.0 12.0 10.0 16.0 4.0 23.0


visibility 12.0 10.0 webkit 15.0
webkit moz webkit

CSS3 transformaes 3D
Nestecaptulo,vocaprendersobreosseguintesmtodosdetransformao3D:

rotateX()
rotateY()
rotateZ()

O rotateX Mtodo

O rotateX() mtodogiraumelementoemtornodoseueixoXemum
determinadograu:

Exemplo

div{
webkittransform:rotateX(150deg);/*Safari*/
transform:rotateX(150deg);
}

Tentevocmesmo"

2/5
30/12/2015 CSS3transformaes3D

O rotateY Mtodo

O rotateY() mtodogiraumelementoemtornodoseueixoYemum
determinadograu:

Exemplo

div{
webkittransform:rotateY(130deg);/*Safari*/
transform:rotateY(130deg);
}

Tentevocmesmo"

O rotateZ Mtodo
O rotateZ() mtodogiraumelementoemtornodoseueixoZemum
determinadograu:

Exemplo

div{
webkittransform:rotateZ(90deg);/*Safari*/
transform:rotateZ(90deg);
}

Tentevocmesmo"

Testese com exerccios!


3/5
30/12/2015 CSS3transformaes3D

Exerccio1 Exerccio2 Exerccio3

CSS3 Transform Properties


Atabelaseguintelistatodasaspropriedadesdetransformao3D:

Property Description

transform Appliesa2Dor3Dtransformationtoanelement

transform Allowsyoutochangethepositionontransformedelements
origin

transform Specifieshownestedelementsarerenderedin3Dspace
style

perspective Specifiestheperspectiveonhow3Delementsareviewed

perspective Specifiesthebottompositionof3Delements
origin

backface Defineswhetherornotanelementshouldbevisiblewhen
visibility notfacingthescreen

3D Transform Mtodos
Function Description

matrix3d Definesa3Dtransformation,usinga4x4
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) matrixof16values

translate3d(x,y,z) Definesa3Dtranslation

translateX(x) Definesa3Dtranslation,usingonlythe
valuefortheXaxis

translateY(y) Definesa3Dtranslation,usingonlythe
valuefortheYaxis

translateZ(z) Definesa3Dtranslation,usingonlythe
valuefortheZaxis

scale3d(x,y,z) Definesa3Dscaletransformation

scaleX(x) Definesa3Dscaletransformationby
givingavaluefortheXaxis

4/5
30/12/2015 CSS3transformaes3D

scaleY(y) Definesa3Dscaletransformationby
givingavaluefortheYaxis

scaleZ(z) Definesa3Dscaletransformationby
givingavaluefortheZaxis

rotate3d(x,y,z,angle) Definesa3Drotation

rotateX(angle) Definesa3DrotationalongtheXaxis

rotateY(angle) Definesa3DrotationalongtheYaxis

rotateZ(angle) Definesa3DrotationalongtheZaxis

perspective(n) Definesaperspectiveviewfora3D
transformedelement

"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

5/5
30/12/2015 CSS3Transies

CSS3 Transies
"Anterior Prximocaptulo"

CSS3 Transies
TransiesCSS3permitequevocaltereosvaloresdepropriedadesemproblemas
(apartirdeumvalorparaoutro),duranteumdeterminadoperodo.

Exemplo:Passeomousesobreoelementoabaixoparaverumefeitodetransio
CSS3:

CSS3

Compatibilidade de navegador para Transies


Osnmerosnatabelaespecificaraprimeiraversodonavegadorquesuporta
totalmenteapropriedade.

Nmerosseguidoporwebkit,moz,ouOespecificaraprimeiraversoque
trabalhoucomumprefixo.

Property

transition 26.0 12.0 10.0 16.0 6.1 12.1


4.0 4.0 3.1 10.5o
webkit moz webkit

transitiondelay 26.0 12.0 10.0 16.0 6.1 12.1


4.0 4.0 3.1 10.5o
webkit moz webkit

transition 26.0 12.0 10.0 16.0 6.1 12.1


duration 4.0 4.0 3.1 10.5o
webkit moz webkit

transition 26.0 12.0 10.0 16.0 6.1 12.1


1/6
30/12/2015 CSS3Transies

property 4.0 4.0 3.1 10.5o


webkit moz webkit

transition 26.0 12.0 10.0 16.0 6.1 12.1


timingfunction 4.0 4.0 3.1 10.5o
webkit moz webkit

Como usar CSS3 transies?


Paracriarumefeitodetransio,vocdeveespecificarduascoisas:

apropriedadeCSSquevocdesejaadicionarumefeitoa
aduraodoefeito

Nota:Seaparteduraonoforespecificado,atransionoternenhumefeito,
porqueovalorpadro0.

Oexemploaseguirmostraum100px*100pxvermelho<div>elemento.O
elemento<div>tambmespecificouumefeitodetransioparaapropriedadede
largura,comumaduraode2segundos:

Exemplo

div{
width:100px;
height:100px;
background:red;
webkittransition:width2s;/*Safari*/
transition:width2s;
}

OefeitodetransioterincioquandoapropriedadeCSSespecificado(largura)
alteraovalor.

Agora,vamosespecificarumnovovalorparaapropriedadedelarguraquandoo
usuriopassaomousesobreoelemento<div>:

Exemplo

div:hover{
2/6
30/12/2015 CSS3Transies

width:300px;
}

Tentevocmesmo"

Observequequandoosmousescursorparaforadoelemento,elevaimudar
gradualmentedevoltaaseuestilooriginal.

Alterar Vrios valores de propriedade


Oexemploaseguiradicionaumefeitodetransioparaalarguraealturade
propriedade,comumaduraode2segundosparaalargurae4segundosparaa
altura:

Exemplo

div{
webkittransition:width2s,height4s;/*Safari*/
transition:width2s,height4s;
}

Tentevocmesmo"

Especifique a curva velocidade da transio


Atimingfunctiontransiopropriedadeespecificaacurvadevelocidadedoefeitode
transio.

Apropriedadetimingfunctiontransiopodeterosseguintesvalores:

facilidade especificaumefeitodetransiocomuminciolento,em
seguida,rapidamente,emseguida,terminarlentamente(esteopadro)
linear especificaumefeitodetransiocomamesmavelocidadedoincio
aofim
aliviarin especificaumefeitodetransiocomuminciolento
aliviarout especificaumefeitodetransiocomumfinallento
aliviarinout especificaumefeitodetransiocomumincioefim
3/6
30/12/2015 CSS3Transies

lento
cbicobezier(n,n,n,n) permitedefinirseusprpriosvaloresem
umafunocbicabezier

Oexemploaseguirmostraaalgumasdasdiferentescurvasdevelocidadeque
podemserutilizados:

Exemplo

#div1{transitiontimingfunction:linear;}
#div2{transitiontimingfunction:ease;}
#div3{transitiontimingfunction:easein;}
#div4{transitiontimingfunction:easeout;}
#div5{transitiontimingfunction:easeinout;}

Tentevocmesmo"

Atrasar o efeito de transio


A transiodeatrasode propriedadeespecificaumatraso(emsegundos)
paraoefeitodetransio.

Oexemploaseguirtemumatrasode1segundoantesdepartida:

Exemplo

div{
webkittransitiondelay:1s;/*Safari*/
transitiondelay:1s;
}

Tentevocmesmo"

Transio + Transformation
Oexemploaseguiradicionatambmumatransformaoparaoefeitodetransio:
4/6
30/12/2015 CSS3Transies

Exemplo

div{
webkittransition:width2s,height2s,webkittransform2s;
/*Safari*/
transition:width2s,height2s,transform2s;
}

Tentevocmesmo"

Mais Exemplos de Transio


AspropriedadesdetransioCSS3podeserespecificadoumporum,comoeste:

Exemplo

div{
transitionproperty:width;
transitionduration:2s;
transitiontimingfunction:linear;
transitiondelay:1s;
}

Tentevocmesmo"

ouusandoapropriedadeestenogrfica de transio:

Exemplo

div{
transition:width2slinear1s;
}

Tentevocmesmo"

5/6
30/12/2015 CSS3Transies

Testese com exerccios!


Exerccio1 Exerccio2 Exerccio3 Exerccio4

Exerccio5

Propriedades CSS3 Transio


Atabelaaseguirlistatodasaspropriedadesdetransio:

Property Description

transition Ashorthandpropertyforsettingthefourtransition
propertiesintoasingleproperty

transitiondelay Specifiesadelay(inseconds)forthetransitioneffect

transition Specifieshowmanysecondsormillisecondsatransition
duration effecttakestocomplete

transition SpecifiesthenameoftheCSSpropertythetransition
property effectisfor

transition Specifiesthespeedcurveofthetransitioneffect
timingfunction

"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

6/6
30/12/2015 CSS3animaes

CSS3 animaes
"Anterior Prximocaptulo"

CSS3 animaes
AnimaesCSS3permiteanimaodamaioriadoselementosHTMLsemautilizao
deJavaScriptouFlash!

CSS3
Animao

Compatibilidade de navegador para Animations


Osnmerosnatabelaespecificaraprimeiraversodonavegadorquesuporta
totalmenteapropriedade.

Nmerosseguidoporwebkit,moz,ouOespecificaraprimeiraversoque
trabalhoucomumprefixo.

Property

@keyframes 43.0 12.0 10.0 16.0 9.0 30.0


4.0 5.0 4.0 15.0
webkit moz webkit webkit
12.0o

animation 43.0 12.0 10.0 16.0 9.0 30.0


4.0 5.0 4.0 15.0
webkit moz webkit webkit
12.0o

Quais so CSS3 animaes?


Umaanimaopermitequeumelementogradualmentemudardeumestilopara
outro.

1/9
30/12/2015 CSS3animaes

VocpodemudarquantaspropriedadesCSSquequiser,quantasvezesquiser.

ParausaranimaoCSS3,vocdeveprimeiroespecificaralgunsquadroschavepara
aanimao.

Keyframesseguraroqueosestilosoelementoteremdeterminadosmomentos.

A Regrakeyframes
QuandovocespecificarestilosCSSdentro dokeyframes regra,aanimaoir
mudargradualmenteapartirdoestiloatualparaonovoestiloemdeterminados
momentos.

Paraseterumaanimaoparaotrabalho,vocdeveligaraanimaoaum
elemento.

Oexemploaseguirvinculao"exemplo"deanimaoparao<div>elemento.A
vontadedeanimaotemaduraode4segundos,eeleirgradualmentemudara
cordefundodoelemento<div>de"vermelho"para"amarelo":

Exemplo

/*Theanimationcode*/
@keyframesexample{
from{backgroundcolor:red;}
to{backgroundcolor:yellow;}
}

/*Theelementtoapplytheanimationto*/
div{
width:100px;
height:100px;
backgroundcolor:red;
animationname:example;
animationduration:4s;
}

Tentevocmesmo"

Nota:Sea animaodurao propriedadenoforespecificada,aanimaono


ternenhumefeito,porqueovalorpadro0.
2/9
30/12/2015 CSS3animaes

Noexemploacima,temosespecificadoquandooestilovaimudarusandoas
palavraschave"de"e"para"(querepresenta0%(incio)e100%(completo)).

Tambmpossvelutilizarporcento.Aousarporcento,vocpodeadicionarquantos
mudanasdeestilocomovocgosta.

Oexemploaseguiriralteraracordefundodoelemento<div>quandoaanimao
de25%completo,50%completo,enovamentequandoaanimaoest100%
concluda:

Exemplo

/*Theanimationcode*/
@keyframesexample{
0%{backgroundcolor:red;}
25%{backgroundcolor:yellow;}
50%{backgroundcolor:blue;}
100%{backgroundcolor:green;}
}

/*Theelementtoapplytheanimationto*/
div{
width:100px;
height:100px;
backgroundcolor:red;
animationname:example;
animationduration:4s;
}

Tentevocmesmo"

Oexemploaseguirvaimudartantoacordefundoeaposiodoelemento<div>
quandoaanimaode25%completo,50%completo,enovamentequandoa
animaoest100%concluda:

Exemplo

/*Theanimationcode*/
@keyframesexample{
0%{backgroundcolor:red;left:0px;top:0px;}
25%{backgroundcolor:yellow;left:200px;top:0px;}
3/9
30/12/2015 CSS3animaes

50%{backgroundcolor:blue;left:200px;top:200px;}
75%{backgroundcolor:green;left:0px;top:200px;}
100%{backgroundcolor:red;left:0px;top:0px;}
}

/*Theelementtoapplytheanimationto*/
div{

width:100px;
height:100px;

position:relative;

backgroundcolor:red;

animationname:example;
animationduration:4s;
}

Tentevocmesmo"

Retardar uma animao


A animaoematraso propriedadeespecificaumatrasoparaoinciodeuma
animao.

Oexemploqueseseguetemumatrasode2segundos,antesdeiniciaraanimao:

Exemplo

div{
width:100px;
height:100px;
position:relative;
backgroundcolor:red;
animationname:example;
animationduration:4s;
animationdelay:2s;
}

Tentevocmesmo"

4/9
30/12/2015 CSS3animaes

Definir Quantas vezes uma animao deve ser


executado
A animaoiteraocontagem propriedadeespecificaonmerodevezesque
umaanimaodeveexecutar.

Oexemploaseguirirexecutaraanimao3vezesantesdeparar:

Exemplo

div{
width:100px;
height:100px;
position:relative;
backgroundcolor:red;
animationname:example;
animationduration:4s;
animationiterationcount:3;
}

Tentevocmesmo"

Oexemploaseguirusaovalor"infinito"parafazeraanimaocontinuepara
sempre

Exemplo

div{
width:100px;
height:100px;
position:relative;
backgroundcolor:red;
animationname:example;
animationduration:4s;
animationiterationcount:infinite;
}

5/9
30/12/2015 CSS3animaes

Tentevocmesmo"

Animao correr em sentido inverso ou ciclos


alternados
A animaoemdireo propriedadeusadaparadeixarqueumacorridade
animaoemsentidoinversoouciclosalternados.

Oexemploaseguirirexecutaraanimaonadireoinversa:

Exemplo

div{
width:100px;
height:100px;
position:relative;
backgroundcolor:red;
animationname:example;
animationduration:4s;
animationiterationcount:3;
animationdirection:reverse;
}

Tentevocmesmo"

Oexemploaseguirusaovalor"alternativo"parafazeraanimaoexecutadopela
primeiravezparaafrente,depoisparatrs,depoisparaafrente:

Exemplo

div{
width:100px;
height:100px;
position:relative;
backgroundcolor:red;
animationname:example;

6/9
30/12/2015 CSS3animaes

animationduration:4s;

animationiterationcount:3;

animationdirection:alternate;
}

Tentevocmesmo"

Especifique a curva velocidade da animao


Atimingfunctionanimaopropriedadeespecificaacurvavelocidadedaanimao.

Apropriedadetimingfunctionanimaopodeterosseguintesvalores:

facilidade especificaumaanimaocomuminciolento,emseguida,
rapidamente,emseguida,terminarlentamente(esteopadro)
linear especificaumaanimaocomamesmavelocidadedoincioaofim
aliviarin especificaumaanimaocomuminciolento
aliviarout especificaumaanimaocomumfinallento
aliviarinout especificaumaanimaocomumcomeoefinallento
cbicobezier(n,n,n,n) permitedefinirseusprpriosvaloresem
umafunocbicabezier

Oexemploaseguirmostraaalgumasdasdiferentescurvasdevelocidadeque
podemserutilizados:

Exemplo

#div1{animationtimingfunction:linear;}
#div2{animationtimingfunction:ease;}
#div3{animationtimingfunction:easein;}
#div4{animationtimingfunction:easeout;}
#div5{animationtimingfunction:easeinout;}

Tentevocmesmo"

Animao Taquigrafia imvel


7/9
30/12/2015 CSS3animaes

Oexemploabaixoutilizaseisdaspropriedadesdeanimao:

Exemplo

div{
animationname:example;
animationduration:5s;
animationtimingfunction:linear;
animationdelay:2s;
animationiterationcount:infinite;
animationdirection:alternate;
}

Tentevocmesmo"

Omesmoefeitodeanimaocomoacimapodeseralcanadoutilizandoaforma
abreviada deanimao propriedades:

Exemplo

div{
animation:example5slinear2sinfinitealternate;
}

Tentevocmesmo"

Testese com exerccios!


Exerccio1 Exerccio2 Exerccio3 Exerccio4

Exerccio5 Exerccio6

Propriedades CSS3 Animao


8/9
30/12/2015 CSS3animaes

Atabelaaseguirlistaaregrakeyframesetodasaspropriedadesdeanimao:

Property Description

@keyframes Specifiestheanimationcode

animation Ashorthandpropertyforsettingalltheanimation
properties

animationdelay Specifiesadelayforthestartofananimation

animationdirection Specifieswhetherananimationshouldplayinreverse
directionoralternatecycles

animationduration Specifieshowmanysecondsormillisecondsan
animationtakestocompleteonecycle

animationfillmode Specifiesastylefortheelementwhentheanimationis
notplaying(whenitisfinished,orwhenithasadelay)

animationiteration Specifiesthenumberoftimesananimationshouldbe
count played

animationname Specifiesthenameofthe@keyframesanimation

animationplay Specifieswhethertheanimationisrunningorpaused
state

animationtiming Specifiesthespeedcurveoftheanimation
function

"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

9/9
30/12/2015 CSSBotes

CSS Botes
"Anterior Prximocaptulo"

SaibacomoestilodebotesusandoCSS.

Chaveiro Bsico Styling

BotoPadro BotoCSS

Exemplo

.button{
backgroundcolor:#4CAF50;/*Green*/
border:none;
color:white;
padding:15px32px;
textalign:center;
textdecoration:none;
display:inlineblock;
fontsize:16px;
}

Tentevocmesmo"

Boto Cores

1/8
30/12/2015 CSSBotes

Verde Azul Vermelho Cinzento Preto

Useo backgroundcolor propriedadedemudaracordeumbotodefundo:

Exemplo

.button1{backgroundcolor:#4CAF50;}/*Green*/
.button2{backgroundcolor:#008CBA;}/*Blue*/
.button3{backgroundcolor:#f44336;}/*Red*/
.button4{backgroundcolor:#e7e7e7;color:black;}/*Gray*/
.button5{backgroundcolor:#555555;}/*Black*/

Tentevocmesmo"

Tamanhos boto

10px 12px 16px 20px 24px

Useo fontsize propriedadeparaalterarotamanhodeumboto:

Exemplo

.button1{fontsize:10px;}
.button2{fontsize:12px;}
.button3{fontsize:16px;}
.button4{fontsize:20px;}
.button5{fontsize:24px;}

Tentevocmesmo"

2/8
30/12/2015 CSSBotes

Arredondadas Botes

2px 4px 8px 12px 50%

Useo borderradius propriedadeparaadicionarcantosarredondadosaum


boto:

Exemplo

.button1{borderradius:2px;}
.button2{borderradius:4px;}
.button3{borderradius:8px;}
.button4{borderradius:12px;}
.button5{borderradius:50%;}

Tentevocmesmo"

Borders boto colorido

Verde Azul Vermelho Cinzento Preto

Usea fronteira propriedadeparaadicionarumabordacoloridadeumboto:

Exemplo

.button1{
backgroundcolor:white;
color:black;
border:2pxsolid#4CAF50;/*Green*/
}
...

3/8
30/12/2015 CSSBotes

Tentevocmesmo"

Hoverable Botes

Verde Azul Vermelho Cinzento Preto

Verde Azul Vermelho Cinzento Preto

Use a:hover selectorparaalteraroestilodeumbotoquandovocpassao


mousesobreele.

Dica:Usea transiodurao propriedadeparadeterminaravelocidadedo


efeito"hover":

Exemplo

.button{
webkittransitionduration:0.4s;/*Safari*/
transitionduration:0.4s;
}

.button:hover{
backgroundcolor:#4CAF50;/*Green*/
color:white;
}
...

Tentevocmesmo"

Sombra Botes

4/8
30/12/2015 CSSBotes

BotoSombra Sombraemfoco

Useo boxshadow propriedadeparaadicionarsombrasaumboto:

Exemplo

.button1{
boxshadow:08px16px0rgba(0,0,0,0.2),06px20px0
rgba(0,0,0,0.19);
}

.button2:hover{
boxshadow:012px16px0rgba(0,0,0,0.24),017px50px0
rgba(0,0,0,0.19);
}

Tentevocmesmo"

Pessoas com mobilidade Botes

Botonormal Botopessoascommobilidadecondicionada

Usea opacidade propriedadeparaadicionartransparnciaaumboto(criauma


aparncia"desativado").

Dica:Voctambmpodeadicionaro cursor propriedadecomumvalorde"no


autorizados",queirmostraruma"nenhumsinaldoestacionamento"quandovoc
passaomousesobreoboto:

Exemplo

.disabled{
opacity:0.6;

5/8
30/12/2015 CSSBotes

cursor:notallowed;
}

Tentevocmesmo"

Boto Largura

250px

50%

100%

Pordefeito,otamanhodobotodeterminadapeloseuteordetexto(tolarga
comooseucontedo).Usea largura propriedadeparaalteraralarguradeum
boto:

Exemplo

.button1{width:250px;}
.button2{width:50%;}
.button3{width:100%;}

Tentevocmesmo"

Boto Grupos
Boto Boto Boto Boto

6/8
30/12/2015 CSSBotes

Retireeadicionemargens float:left paracadabotoparacriarumgrupode


botes:

Exemplo

.button{
float:left;
}

Tentevocmesmo"

Grupos Boto fronteira


Boto Boto Boto Boto

Usea fronteira propriedadeparacriarumgrupodebotocomborda:

Exemplo

.button{
float:left;
border:1pxsolidgreen
}

Tentevocmesmo"

Animated Buttons

Exemplo
Adicionarumasetaemfoco:

7/8
30/12/2015 CSSBotes

Flutuar

Tentevocmesmo"

Exemplo
Adicionarumefeito"cascata"noclique:

Clique

Tentevocmesmo"

Exemplo
Adicionarumefeitode"pressionado"noclique:

Clique

Tentevocmesmo"

"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

8/8
30/12/2015 VriasColunasCSS3

CSS3 vrias colunas


"Anterior Prximocaptulo"

CSS3 Multicoluna layout


OlayoutCSS3multicolunapermitefcildefiniodevriascolunasdetexto
apenascomonosjornais:

Loremipsumdolorsitamet,consectetueradipiscingelit,sednonummydiam
nibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.Utwisi
enimannciomnimaveniam,Quisnostrudexerciullamcorpertaosuscipit
lobortisNISLutaliquipexeacommodoconsequat.DUISautemveleumiriure
doloremhendreritemvulputatevelitESSEmolestieconsequat,velillumdolore
eufeugiatnullafacilisisnoveroerosetiustoodioaccumsanetquidignissim
blanditPraesentluptatumzzrildelenitaugueDUISdoloretefeugaitnullafacilisi.
NamlibertemporcumSolutanobiseleifendopoconguenihilimperdietdoming
idquodmazimplaceratassumfacerpossim.

Suporte navegador
Osnmerosnatabelaespecificaraprimeiraversodonavegadorquesuporta
totalmenteapropriedade.

Nmerosseguidoporwebkitoumozespecificaraprimeiraversoquetrabalhou
comumprefixo.

Property

columncount 4.0 12.0 10.0 2.0 3.1 15.0


webkit moz webkit webkit
11.1

columngap 4.0 12.0 10.0 2.0 3.1 15.0


webkit moz webkit webkit
11.1

1/6
30/12/2015 VriasColunasCSS3

columnrule 4.0 12.0 10.0 2.0 3.1 15.0


webkit moz webkit webkit
11.1

columnrule 4.0 12.0 10.0 2.0 3.1 15.0


color webkit moz webkit webkit
11.1

columnrule 4.0 12.0 10.0 2.0 3.1 15.0


style webkit moz webkit webkit
11.1

columnrule 4.0 12.0 10.0 2.0 3.1 15.0


width webkit moz webkit webkit
11.1

columnwidth 4.0 12.0 10.0 2.0 3.1 15.0


webkit moz webkit webkit
11.1

Propriedades CSS3 Multicoluna


Nestecaptulo,vocaprendersobreasseguintespropriedadesmulticolunas:

colunadecontagem
columngap
estiloregracoluna
larguradacolunarule
colunadaregracolor
colunadaregra
colunaspan
larguradacoluna

CSS3 criar vrias colunas


A colunadecontagem propriedadeespecificaonmerodecolunasdeum
elementodeverserdivididoem.

Oexemploaseguirirdividirotextonoelemento<div>em3colunas:

Exemplo

2/6
30/12/2015 VriasColunasCSS3

div{
webkitcolumncount:3;/*Chrome,Safari,Opera*/
mozcolumncount:3;/*Firefox*/
columncount:3;
}

Tentevocmesmo"

CSS3 Especifique o Gap entre colunas


A colunagap propriedadeespecificaadiferenaentreascolunas.

Oexemploaseguirespecificaumintervalode40pixelsentreascolunas:

Exemplo

div{
webkitcolumngap:40px;/*Chrome,Safari,Opera*/
mozcolumngap:40px;/*Firefox*/
columngap:40px;
}

Tentevocmesmo"

Regras Coluna CSS3


Astyleregracolunapropriedadeespecificaoestilodaregraentreascolunas:

Exemplo

div{
webkitcolumnrulestyle:solid;/*Chrome,Safari,Opera*/
mozcolumnrulestyle:solid;/*Firefox*/
columnrulestyle:solid;
}
3/6
30/12/2015 VriasColunasCSS3

Tentevocmesmo"

A colunadelarguraregra propriedadeespecificaalarguradaregraentreas
colunas:

Exemplo

div{
webkitcolumnrulewidth:1px;/*Chrome,Safari,Opera*/
mozcolumnrulewidth:1px;/*Firefox*/
columnrulewidth:1px;
}

Tentevocmesmo"

A colunadaregracolor propriedadeespecificaacordaregraentreas
colunas:

Exemplo

div{
webkitcolumnrulecolor:lightblue;/*Chrome,Safari,Opera
*/
mozcolumnrulecolor:lightblue;/*Firefox*/
columnrulecolor:lightblue;
}

Tentevocmesmo"

A colunadaregra propriedadeumatalhoparadefinirtodasascolunas
Governa*propriedadesacima.

Oexemploaseguirdefinealargura,estiloecordaregraentreascolunas:

Exemplo

4/6
30/12/2015 VriasColunasCSS3

div{
webkitcolumnrule:1pxsolidlightblue;/*Chrome,Safari,
Opera*/
mozcolumnrule:1pxsolidlightblue;/*Firefox*/
columnrule:1pxsolidlightblue;
}

Tentevocmesmo"

Especificar quantas colunas um elemento deve


Span
A colunaspan propriedadeespecificaquantascolunasumelementodeve
abrangertoda.

Oexemploaseguirespecificaqueo<h2>elementodeveabrangerentretodasas
colunas:

Exemplo

h2{
webkitcolumnspan:all;/*Chrome,Safari,Opera*/
columnspan:all;
}

Tentevocmesmo"

Especifique a largura da coluna


A larguradacoluna propriedadeespecificaumasugerido,alarguraidealpara
ascolunas.

Oexemploaseguirespecificaqueosugeriu,alarguraidealparaascolunasdeveser
100px:

5/6
30/12/2015 VriasColunasCSS3

Exemplo

div{
webkitcolumnwidth:100px;/*Chrome,Safari,Opera*/
columnwidth:100px;
}

Tentevocmesmo"

Propriedades CSS3 Multicolunas


Atabelaaseguirlistatodasaspropriedadesmulticolunas:

Property Description

columncount Specifiesthenumberofcolumnsanelementshouldbe
dividedinto

columnfill Specifieshowtofillcolumns

columngap Specifiesthegapbetweenthecolumns

columnrule Ashorthandpropertyforsettingallthecolumnrule*
properties

columnrulecolor Specifiesthecoloroftherulebetweencolumns

columnrulestyle Specifiesthestyleoftherulebetweencolumns

columnrulewidth Specifiesthewidthoftherulebetweencolumns

columnspan Specifieshowmanycolumnsanelementshouldspan
across

columnwidth Specifiesasuggested,optimalwidthforthecolumns

columns Ashorthandpropertyforsettingcolumnwidthand
columncount

"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

6/6
30/12/2015 CSS3InterfacedeUsurio

CSS3 Interface de Usurio


"Anterior Prximocaptulo"

CSS3 Interface de Usurio


CSS3temnovosrecursosdeinterfacedousurio,comoelementosde
redimensionamento,esboos,edimensionamentocaixa.

Nestecaptulo,vocaprendersobreasseguintespropriedadesdainterfacedo
usurio:

redimensionar
delinearoffset

Suporte navegador
Osnmerosnatabelaespecificaraprimeiraversodonavegadorquesuporta
totalmenteapropriedade.

Nmerosseguidoporwebkitoumozespecificaraprimeiraversoquetrabalhou
comumprefixo.

Property

resize 4.0 Not Not 5.0 4.0 15.0


supported supported 4.0
moz

outlineoffset 4.0 Not Not 5.0 4.0 9.5


supported supported 4.0
moz

CSS3 redimensionamento
O redimensionamento propriedadeespecificaseounoumelementodeveser

1/4
30/12/2015 CSS3InterfacedeUsurio

redimensionveis
pelousurio.

Esteelementodivredimensionveispelo

usurio(funcionanoChrome,Firefox,Safarie
Opera).

Oexemploaseguirpermitequeousurioredimensionarapenasalarguradeum
elemento<div>:

Exemplo

div{
resize:horizontal;
overflow:auto;
}

Tentevocmesmo"

Oexemploaseguirpermitequeousurioredimensionarapenasaalturadeum
elemento<div>:

Exemplo

div{
resize:vertical;
overflow:auto;
}

Tentevocmesmo"

Oexemploaseguirpermitequeousurioredimensionaraalturaealarguradeum
elemento<div>:

Exemplo

div{
2/4
30/12/2015 CSS3InterfacedeUsurio

resize:both;

overflow:auto;
}

Tentevocmesmo"

CSS3 Contorno offset


O offsetesboo propriedadeadicionaespaoentreumcontornoebordaou
margemdeumelemento.

Contornosdiferemdasfronteirasdeduasmaneiras:

Umesbooumalinhatraadaemtornodeelementos,foradabordafronteira
Umesboonoocupamespao
Umesquemapodesernorectangular

Estedivtemum
esboo15pxforada
bordafronteira.

Oexemploaseguirusaapropriedadedecompensaodeesbooparaadicionarum
espao15pxentreafronteiraeocontorno:

Exemplo

div{
border:1pxsolidblack;
outline:1pxsolidred;
outlineoffset:15px;
}

Tentevocmesmo"

3/4
30/12/2015 CSS3InterfacedeUsurio

CSS3 Propriedades da Interface de Usurio


Atabelaaseguirlistatodasaspropriedadesdainterfacedousurio:

Property Description

boxsizing Allowsyoutoincludethepaddingandborderinan
element'stotalwidthandheight

navdown Specifieswheretonavigatewhenusingthearrow
downnavigationkey

navindex Specifiesthetabbingorderforanelement

navleft Specifieswheretonavigatewhenusingthearrowleft
navigationkey

navright Specifieswheretonavigatewhenusingthearrow
rightnavigationkey

navup Specifieswheretonavigatewhenusingthearrowup
navigationkey

outlineoffset Addsspacebetweenanoutlineandtheedgeorborder
ofanelement

resize Specifieswhetherornotanelementisresizablebythe
user

"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

4/4
30/12/2015 CSS3BoxDimensionamento

CSS3 Box Dimensionamento


"Anterior Prximocaptulo"

CSS3 Box Dimensionamento


OCSS3 caixadimensionamento propriedadenospermiteincluiro
preenchimentoebordadelarguraealturatotaldeumelemento.

Suporte navegador
Osnmerosnatabelaespecificaraprimeiraversodonavegadorquesuporta
totalmenteapropriedade.

Nmerosseguidoporwebkitoumozespecificaraprimeiraversoquetrabalhou
comumprefixo.

Property

boxsizing 10.0 12.0 8.0 29.0 5.1 9.5


4.0 2.0 3.1
webkit moz webkit

Sem o CSS3dimensionamento caixa Property


Porpadro,alarguraeaalturadeumelementocalculadoassim:

+largura+estofamentoborder=largurarealdeumelemento
altura+estofamento+border=alturarealdeumelemento

Issosignificaque:Quandovocdefiniralargura/alturadeumelemento,oelemento
muitasvezesparecemmaioresdoquevocdefiniu(porquebordadoelementoe
preenchimentosoadicionadosaoespecificadolargura/alturadoelemento).

Ailustraoaseguirmostradoiselementos<div>comamesmalarguraealtura
especificadas:

1/4
30/12/2015 CSS3BoxDimensionamento

Estedivmenor(largura300pxe
altura100px).

Estedivmaior(larguratambm
300pxealtura100px).

Osdoiselementos<div>acimaacabamcomtamanhosdiferentesnoresultado
(porquediv2temumpreenchimentoespecificado):

Exemplo

.div1{
width:300px;
height:100px;
border:1pxsolidblue;
}

.div2{
width:300px;
height:100px;
padding:50px;
border:1pxsolidred;
}

Tentevocmesmo"

Ento,porumlongotempoosdesenvolvedoreswebterespecificadoumvalorde
larguramenordoqueelesqueriam,porquetiveramquesubtrairopreenchimentoe
asfronteiras.

ComCSS3,o dedimensionamentodecaixa propriedaderesolveeste

2/4
30/12/2015 CSS3BoxDimensionamento

problema.

Com o CSS3dimensionamento caixa Property


OCSS3 caixadimensionamento propriedadenospermiteincluiro
preenchimentoebordadelarguraealturatotaldeumelemento.

Sevocdefinir acaixadimensionamento:Beirabox emumestofamento


elementoefronteirasoincludosnalarguraealtura:

Ambososdivssodomesmotamanho
agora!

Hooray!

Aquiestomesmoexemploacima,com caixadimensionamento:Beira
box adicionadoaambososelementos<div>:

Exemplo

.div1{
width:300px;
height:100px;
border:1pxsolidblue;
boxsizing:borderbox;
}

.div2{
width:300px;
height:100px;
padding:50px;
border:1pxsolidred;
boxsizing:borderbox;
}

3/4
30/12/2015 CSS3BoxDimensionamento

Tentevocmesmo"

Comooresultadodeusaro dedimensionamentodecaixa:Beirabox
muitomelhor,muitosdesenvolvedoresqueremtodososelementosemsuaspginas
paratrabalhardestaforma.

Ocdigoabaixoasseguraquetodososelementossodimensionadosdestemodo
maisintuitivo.Muitosnavegadoresj usadimensionamentocaixa:Beira
box paramuitoselementosdeformulrio(masnotodosporissoqueas
entradasetextareasolhardiferenteemwidth:100%).

Aplicandoestaatodososelementosseguroesbio:

Exemplo

*{
boxsizing:borderbox;
}

Tentevocmesmo"

"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

4/4
30/12/2015 BoxFlexvelCSS3

CSS3 Box flexvel


"Anterior Prximocaptulo"

CSS3 Flexbox
Caixasflexveis,ouflexbox,umnovomododelayoutemCSS3.

Usodeflexboxgarantequeoselementossecomportamdemaneiraprevisvel
quandoolayoutdapginadeveacomodardiferentestamanhosdetelaediferentes
dispositivosdeexibio.

Paramuitasaplicaes,omodelodecaixaflexvelforneceumamelhoriasobreo
modelodeblocosemqueelenousacarrosalegricos,nemmargensdecolapsodo
recipienteflexvelcomasmargensdeseucontedo.

Suporte navegador
Osnmerosnatabelaespecificaraprimeiraversodonavegadorquesuporta
totalmenteorecurso.

Nmerosseguidoporwebkitoumozespecificaraprimeiraversoquetrabalhou
comumprefixo.

Property

Basicsupport 29.0 12.0 11.0 22.0 6.1 12.1


(singleline 21.0 18.0 webkit webkit
flexbox) webkit moz

Multiline 29.0 12.0 11.0 28.0 6.1 17.0


flexbox 21.0 webkit 15.0
webkit webkit
12.1

CSS3 flexbox Conceitos


1/17
30/12/2015 BoxFlexvelCSS3

Flexboxconsistederecipientesflexveiseitensdeflex.

Umcontentorflexveldeclaradadefinindoa exibiode propriedadedeum


elemento,quer Flex (rendidacomoumbloco)ou linhaflex (rendidocomo
inline).

Dentrodeumrecipienteflexvel,humoumaisitensdeflex.

Nota:Tudoforaumrecipienteflexveledentrodeumitemdeflexoprocessado
comodecostume.FlexboxdefinecomoitensFlexsodefinidosdentrodeum
continerflex.

Flexitenssoposicionadosdentrodeumrecipienteflexvelaolongodeumalinha
flex.Porpadrohapenasumalinhaflexvelporcontinerflex.

Oexemploaseguirmostratrsitensflexveis.Elessoposicionadosporpadro:ao
longodalinhaFlexhorizontal,daesquerdaparaadireita:

Exemplo

<!DOCTYPEhtml>
<html>
<head>
<style>
.flexcontainer{
display:webkitflex;
display:flex;
width:400px;
height:250px;
backgroundcolor:lightgrey;
}

.flexitem{
backgroundcolor:cornflowerblue;
width:100px;
height:100px;
margin:10px;
}
</style>
</head>
<body>

<divclass="flexcontainer">
<divclass="flexitem">flexitem1</div>

2/17
30/12/2015 BoxFlexvelCSS3

<divclass="flexitem">flexitem2</div>
<divclass="flexitem">flexitem3</div>
</div>

</body>
</html>

Tentevocmesmo"

tambmpossvelalteraradirecodalinhadeflex.

Sedefinira direo propriedadepara RTL (dadireitaparaaesquerda),otexto


desenhadodireitaparaaesquerda,etambmalinhaFlexmudadedireo,oquevai
mudarolayoutdapgina:

Exemplo

body{
direction:rtl;
}

.flexcontainer{
display:webkitflex;
display:flex;
width:400px;
height:250px;
backgroundcolor:lightgrey;
}

.flexitem{
backgroundcolor:cornflowerblue;
width:100px;
height:100px;
margin:10px;
}

Tentevocmesmo"

3/17
30/12/2015 BoxFlexvelCSS3

Direo Flex
O flexdireo propriedadeespecificaadireodositensflexveisdentrodo
recipienteflex.Ovalorpadrode flexdireo fila (daesquerdaparaa
direita,decimaparabaixo).

Osoutrosvaloressoosseguintes:

rowreverse Seomododeescrita(direo)esquerdaparaadireita,os
itensdeflexsercolocadoparaforadireitaparaaesquerda
coluna Seosistemadeescritahorizontal,ositensdeflexsercolocado
paraforaverticalmente
colunareverter Omesmoquecoluna,masemsentidoinverso

Oexemploaseguirmostraoresultadodousoda linhareverse valor:

Exemplo

.flexcontainer{
display:webkitflex;
display:flex;
webkitflexdirection:rowreverse;
flexdirection:rowreverse;
width:400px;
height:250px;
backgroundcolor:lightgrey;
}

Tentevocmesmo"

Oexemploaseguirmostraoresultadodousoda colunade valor:

Exemplo

.flexcontainer{
display:webkitflex;
display:flex;
webkitflexdirection:column;
flexdirection:column;
width:400px;
4/17
30/12/2015 BoxFlexvelCSS3

height:250px;

backgroundcolor:lightgrey;
}

Tentevocmesmo"

Oexemploseguintemostraoresultadodousoda colunainversa valor:

Exemplo

.flexcontainer{
display:webkitflex;
display:flex;
webkitflexdirection:columnreverse;
flexdirection:columnreverse;
width:400px;
height:250px;
backgroundcolor:lightgrey;
}

Tentevocmesmo"

A propriedade justificarcontent
A justificarcontent propriedadealinhahorizontalmenteitensdocontiner
flexvelquandoositensnousetodooespaodisponvelnoeixoprincipal.

Osvalorespossveissoosseguintes:

flexstart Ovalorpadro.Osprodutossoposicionadosnoinciodo
recipiente
Flexend Osprodutossoposicionadosnaextremidadedorecipiente
Centro Osprodutossoposicionadasnocentrodorecipiente
espaoentre Ositenssoposicionadoscomespaoentreaslinhas
espaoaround Ositenssoposicionadoscomespaoantes,entreeaps
aslinhas

Oexemploaseguirmostraoresultadodeusaro flexend valor:

5/17
30/12/2015 BoxFlexvelCSS3

Exemplo

.flexcontainer{
display:webkitflex;
display:flex;
webkitjustifycontent:flexend;
justifycontent:flexend;
width:400px;
height:250px;
backgroundcolor:lightgrey;
}

Tentevocmesmo"

Oexemploaseguirmostraoresultadodautilizaodo centrode valor:

Exemplo

.flexcontainer{
display:webkitflex;
display:flex;
webkitjustifycontent:center;
justifycontent:center;
width:400px;
height:250px;
backgroundcolor:lightgrey;
}

Tentevocmesmo"

Oexemploaseguirmostraoresultadodeusaro espaoentre valor:

Exemplo

.flexcontainer{
display:webkitflex;
display:flex;
webkitjustifycontent:spacebetween;
6/17
30/12/2015 BoxFlexvelCSS3

justifycontent:spacebetween;
width:400px;
height:250px;

backgroundcolor:lightgrey;
}

Tentevocmesmo"

Oexemploaseguirmostraoresultadodautilizaodo espaoaround valor:

Exemplo

.flexcontainer{
display:webkitflex;
display:flex;
webkitjustifycontent:spacearound;
justifycontent:spacearound;
width:400px;
height:250px;
backgroundcolor:lightgrey;
}

Tentevocmesmo"

Os itensalign Propriedade
O alignitens propriedadealinhaverticalmenteitensdocontinerflexvelquando
ositensnousetodooespaodisponvelnoeixotransversal.

Osvalorespossveissoosseguintes:

esticar Ovalorpadro.Ositenssoesticadoparacaberorecipiente
flexstart Ositenssoposicionadonapartesuperiordorecipiente
Flexend Osprodutossoposicionadosnaparteinferiordorecipiente
Centro Osprodutossoposicionadasnocentrodorecipiente
(verticalmente)
basais Ositenssoposicionadosnalinhadebasedorecipiente

7/17
30/12/2015 BoxFlexvelCSS3

Oexemploaseguirmostraoresultadodeusaro trecho valor(esteovalor


padro):

Exemplo

.flexcontainer{
display:webkitflex;
display:flex;
webkitalignitems:stretch;
alignitems:stretch;
width:400px;
height:250px;
backgroundcolor:lightgrey;
}

Tentevocmesmo"

Oexemploaseguirmostraoresultadodeusaro flexstart valor:

Exemplo

.flexcontainer{
display:webkitflex;
display:flex;
webkitalignitems:flexstart;
alignitems:flexstart;
width:400px;
height:250px;
backgroundcolor:lightgrey;
}

Tentevocmesmo"

Oexemploaseguirmostraoresultadodeusaro flexend valor:

Exemplo

8/17
30/12/2015 BoxFlexvelCSS3

.flexcontainer{
display:webkitflex;
display:flex;
webkitalignitems:flexend;
alignitems:flexend;
width:400px;
height:250px;
backgroundcolor:lightgrey;
}

Tentevocmesmo"

Oexemploaseguirmostraoresultadodautilizaodo centrode valor:

Exemplo

.flexcontainer{
display:webkitflex;
display:flex;
webkitalignitems:center;
alignitems:center;
width:400px;
height:250px;
backgroundcolor:lightgrey;
}

Tentevocmesmo"

Oexemploaseguirmostraoresultadodousoda linhadebase devalor:

Exemplo

.flexcontainer{
display:webkitflex;
display:flex;
webkitalignitems:baseline;
alignitems:baseline;
width:400px;

9/17
30/12/2015 BoxFlexvelCSS3

height:250px;

backgroundcolor:lightgrey;
}

Tentevocmesmo"

O Flexwrap imvel
O Flexwrap propriedadeespecificaseositensflexveisdeveenvolverouno,se
nohouverespaosuficienteparaelesemumalinhaflex.

Osvalorespossveissoosseguintes:

nowrap Ovalorpadro.Ositensflexveisnosermoldado
embrulhe Ositensflexveisvaiembrulharsenecessrio
wrapreverter Ositensflexveisvaienvolver,senecessrio,emordem
inversa

Oexemploaseguirmostraoresultadodeusaro nowrap valor(esteovalor


padro):

Exemplo

.flexcontainer{
display:webkitflex;
display:flex;
webkitflexwrap:nowrap;
flexwrap:nowrap;
width:300px;
height:250px;
backgroundcolor:lightgrey;
}

Tentevocmesmo"

Oexemploaseguirmostraoresultadodousodo envoltriode valor:

Exemplo
10/17
30/12/2015 BoxFlexvelCSS3

.flexcontainer{
display:webkitflex;
display:flex;
webkitflexwrap:wrap;
flexwrap:wrap;
width:300px;
height:250px;
backgroundcolor:lightgrey;
}

Tentevocmesmo"

Oexemploaseguirmostraoresultadodeusaro wrapinversa valor:

Exemplo

.flexcontainer{
display:webkitflex;
display:flex;
webkitflexwrap:wrapreverse;
flexwrap:wrapreverse;
width:300px;
height:250px;
backgroundcolor:lightgrey;
}

Tentevocmesmo"

O aligncontent imvel
O aligncontent propriedademodificaocomportamentodo Flexwrap
propriedade.semelhantea alinharitens,masemvezdealinharitens
deflex,elesealinhaflexlinhas.

Osvalorespossveissoosseguintes:

esticar Ovalorpadro.Linhasesticarparaocuparoespaorestante
flexstart Linhassoembaladosemdireoaoinciodorecipienteflexvel

11/17
30/12/2015 BoxFlexvelCSS3

flexend Aslinhassoembaladosemdireoaofinaldorecipienteflexvel
Centro Aslinhassoembaladosemdireoaocentrodorecipienteflexvel
espaoentre Aslinhassodistribudasuniformementenorecipiente
flexvel
espaoaround Aslinhassodistribudasuniformementenorecipiente
flexvel,comespaosmetadedotamanhoemcadaextremidade

Oexemploaseguirmostraoresultadodautilizaodo centrode valor:

Exemplo

.flexcontainer{
display:webkitflex;
display:flex;
webkitflexwrap:wrap;
flexwrap:wrap;
webkitaligncontent:center;
aligncontent:center;
width:300px;
height:300px;
backgroundcolor:lightgrey;
}

Tentevocmesmo"

Propriedades do item Flex


Encomenda
A fim propriedadeespecificaaordemdeumprodutoflexvelemrelaoaoresto
doselementosflexveisnointeriordomesmorecipiente:

Exemplo

.flexitem{
backgroundcolor:cornflowerblue;
width:100px;
height:100px;

12/17
30/12/2015 BoxFlexvelCSS3

margin:10px;
}

.first{

webkitorder:1;
order:1;
}

Tentevocmesmo"

Margem
Definindo margin:auto absorverespaoextra.Elepodeserusadopara
empurraritensdeflexemposiesdiferentes.

Noexemploaseguirvamosdefinir marginright:auto noprimeiroitemflex.


Istoirfazercomquetodooespaoextraparaserabsorvidaparaadireitado
referidoelemento:

Exemplo

.flexitem{
backgroundcolor:cornflowerblue;
width:75px;
height:75px;
margin:10px;
}

.flexitem:firstchild{
marginright:auto;
}

Tentevocmesmo"

Centralizao perfeita
Noexemploaseguirvamosresolverumproblemaquasequediariamente:
centralizaoperfeita.

muitofcilcomflexbox.Definindo margin:auto faroartigoperfeitamente


13/17
30/12/2015 BoxFlexvelCSS3

centradaemambososeixos:

Exemplo

.flexitem{
backgroundcolor:cornflowerblue;
width:75px;
height:75px;
margin:auto;
}

Tentevocmesmo"

alinharauto
O alignauto propriedadedeitensdeflexsubstituialignitensdepropriedadedo
recipienteflexvelparaesseitem.Eletemosmesmosvalorespossveiscomoa
alinharitens propriedade.

Oexemploaseguirdefinevaloresdiferentesalignindependentesparacadaitem
Flex:

Exemplo

.flexitem{
backgroundcolor:cornflowerblue;
width:60px;
minheight:100px;
margin:10px;
}

.item1{
webkitalignself:flexstart;
alignself:flexstart;
}
.item2{
webkitalignself:flexend;
alignself:flexend;
}

14/17
30/12/2015 BoxFlexvelCSS3

.item3{

webkitalignself:center;
alignself:center;
}

.item4{

webkitalignself:baseline;
alignself:baseline;
}

.item5{

webkitalignself:stretch;
alignself:stretch;
}

Tentevocmesmo"

flexionar
O caboflexvel propriedadeespecificaocomprimentodoelementoflexvel,em
relaoaorestodoselementosflexveisnointeriordomesmorecipiente.

Noexemploaseguir,oprimeiroitemflexconsomem2/4doespaolivre,eosoutros
doisitensdeflexirconsumirumquartodoespaolivrecadaum:

Exemplo

.flexitem{
backgroundcolor:cornflowerblue;
margin:10px;
}

.item1{
webkitflex:2;
flex:2;
}

.item2{
webkitflex:1;
flex:1;
}

15/17
30/12/2015 BoxFlexvelCSS3

.item3{

webkitflex:1;
flex:1;
}

Tentevocmesmo"

Mais Exemplos
Criarumsiteresponsivocomflexbox
Esteexemplodemonstracomocriarumlayoutdesiteresponsivocomflexbox.

Propriedades flexbox CSS3


AtabelaaseguirlistaaspropriedadesCSSusados
comflexbox:

Property Description

display SpecifiesthetypeofboxusedforanHTMLelement

flexdirection Specifiesthedirectionoftheflexibleitemsinsideaflex
container

justifycontent Horizontallyalignstheflexitemswhentheitemsdonot
useallavailablespaceonthemainaxis

alignitems Verticallyalignstheflexitemswhentheitemsdonotuse
allavailablespaceonthecrossaxis

flexwrap Specifieswhethertheflexitemsshouldwrapornot,if
thereisnotenoughroomforthemononeflexline

aligncontent Modifiesthebehavioroftheflexwrapproperty.Itis
similartoalignitems,butinsteadofaligningflexitems,
italignsflexlines

flexflow Ashorthandpropertforflexdirectionandflexwrap

order Specifiestheorderofaflexibleitemrelativetotherest
oftheflexitemsinsidethesamecontainer

alignself Usedonflexitems.Overridesthecontainer'salignitems
16/17
30/12/2015 BoxFlexvelCSS3

property

flex Specifiesthelengthofaflexitem,relativetotherestof
theflexitemsinsidethesamecontainer

"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

17/17
30/12/2015 CSS3consultasdemdia

CSS3 consultas de mdia


"Anterior Prximocaptulo"

CSS2 Introduzido Tipos de mdia


Omedia regra,introduzidaemCSS2,tornoupossveldefinirdiferentesregrasde
estiloparadiferentestiposdemdia.

Exemplos:Vocpoderiaterumconjuntoderegrasdeestiloparatelasde
computador,umaparaimpressoras,umaparadispositivosdemo,umparaos
dispositivosdotipodeteleviso,eassimpordiante.

Infelizmente,essestiposdemdianuncarecebimuitoapoiopordispositivos,almdo
tipodemdiadeimpresso.

CSS3 lana consultas de mdia


ConsultasdemdiaemCSS3estenderoCSS2tiposdemdiaideia:Emvezdeolhar
paraumtipodedispositivo,elesolhamparaacapacidadedodispositivo.

Consultasdemdiapodeserusadoparaverificarmuitascoisas,taiscomo:

larguraealturadajaneladeexibio
larguraealturadodispositivo
orientao(otablet/telefonenomodopaisagemouretrato?)
resoluo

Usandoconsultasdemdiasoumatcnicapopularparaaentregadeumafolhade
estilopersonalizadaparatablets,iPhoneeAndroids.

Suporte navegador
Osnmerosnatabelaespecificaaprimeiraversodonavegadorqueapoia
plenamentearegramedia.

1/4
30/12/2015 CSS3consultasdemdia

Property

@media 21.0 12.0 9.0 3.5 4.0 9.0

Mdia Sintaxe de consulta


Umaconsultademdiaconsisteemumtipodemdiaepodeconterumoumais
expresses,queresolveaverdadeiraoufalsa.

@medianot|onlymediatypeand(expressions){
CSSCode;
}

Oresultadodaconsultaserverdadeiraseotipodemdiaespecificadocorresponde
aotipodedispositivoodocumentoestsendoexibidonaetodasasexpressesna
consultademdiasoverdadeiras.Quandoumaconsultademdiaverdade,as
regrasdefolhasdeestiloouestilocorrespondentessoaplicados,seguindoasregras
normaisemcascata.

Amenosquevocuseosoperadoresnoouapenas,otipodemdiaopcionalea
todosos tiposerimplcita.

Voctambmpodeterdiferentesfolhasdeestiloparadiferentesmdias:

<linkrel="stylesheet"media="mediatypeand|not|only(expressions)"
href="print.css">

Tipos de mdia CSS3


Value Description

all Usedforallmediatypedevices

print Usedforprinters

screen Usedforcomputerscreens,tablets,smartphonesetc.

speech Usedforscreenreadersthat"reads"thepageoutloud

2/4
30/12/2015 CSS3consultasdemdia

Consultas de mdia exemplos simples


UmamaneiradeusarconsultasdemdiaterumaseoCSSalternativodentrodo
seudireitodefolhadeestilo.

OexemploaseguiralteraobackgroundcolorparaLightgreenseajaneladeexibio
de480pixelsdelarguraoumaislarga(seajaneladeexibiomenordoque480
pixels,obackgroundcolorserrosa):

Exemplo

@mediascreenand(minwidth:480px){
body{
backgroundcolor:lightgreen;
}
}

Tentevocmesmo"

Oexemploaseguirmostraummenuqueirflutuaresquerdadapgina,seajanela
deexibiode480pixelsdelarguraoumaislarga(seajaneladeexibiomenor
doque480pixels,omenuestaremcimadocontedo):

Exemplo

@mediascreenand(minwidth:480px){
#leftsidebar{width:200px;float:left;}
#main{marginleft:216px;}
}

Tentevocmesmo"

CSS3media Referncia
Paraumavisocompletadetodosostiposdemdiae/expressescaractersticas,
porfavor,vejaomediaregraemnossarefernciaCSS.

3/4
30/12/2015 CSS3consultasdemdia

"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

4/4
30/12/2015 CSS3consultasdemdiaExemplos

CSS3 consultas de mdia Exemplos


"Anterior Prximocaptulo"

CSS3 consultas de mdia Mais Exemplos


Vejamosmaisalgunsexemplosdecomousarconsultasdemdia.

Vamoscomearcomumalistadenomesquefuncionamcomolinksdeemail.O
HTML:

Exemplo 1

<!DOCTYPEhtml>
<html>
<head>
<style>
ul{
liststyletype:none;
}

ullia{
color:green;
textdecoration:none;
padding:3px;
display:block;
}
</style>
</head>
<body>

<ul>
<li><adataemail="johndoe@example.com"
href="mailto:johndoe@example.com">JohnDoe</a></li>
<li><adataemail="marymoe@example.com"
href="mailto:marymoe@example.com">MaryMoe</a></li>
<li><adataemail="amandapanda@example.com"

1/4
30/12/2015 CSS3consultasdemdiaExemplos

href="mailto:amandapanda@example.com">AmandaPanda</a></li>
</ul>

</body>
</html>

Tentevocmesmo"

Observe aemaildedados atributo.EmHTML5,podemosusaratributos


prefixadoscom data paraarmazenarinformaes.Usaremosa data atributo
maistarde.

Largura de 520 a 699px Aplicar um cone e


mail para cada link
Quandoalarguradonavegadorentre520e699px,vamosaplicarumconeemail
paracadalinkemail:

Exemplo 2

@mediascreenand(maxwidth:699px)and(minwidth:520px){
ullia{
paddingleft:30px;
background:url(emailicon.png)leftcenternorepeat;
}
}

Tentevocmesmo"

Largura de 700 a 1000px Prefcio as ligaes


com um texto
Quandoalarguradonavegadorentre700a1000px,vamosprefaciarcadalinke
mailcomotexto"Email:":

2/4
30/12/2015 CSS3consultasdemdiaExemplos

Exemplo 3

@mediascreenand(maxwidth:1000px)and(minwidth:700px){
ullia:before{
content:"Email:";
fontstyle:italic;
color:#666666;
}
}

Tentevocmesmo"

Largura acima 1001PX Aplicar email e


ligaes
Quandoalarguradonavegadorestacima1001PX,vamosanexaroendereode
emailparaoslinks.

Nsvamosusarovalorda data atributoparaadicionaroendereodeemailaps


onomedapessoa:

Exemplo 4

@mediascreenand(minwidth:1001px){
ullia:after{
content:"("attr(dataemail)")";
fontsize:12px;
fontstyle:italic;
color:#666666;
}
}

Tentevocmesmo"

3/4
30/12/2015 CSS3consultasdemdiaExemplos

Largura acima 1151px cone Adicionar como


que usamos antes
Paraonavegadorlargurasacima1151px,maisumaveziradicionaroconecomo
queusamosantes.

Aqui,notemosparaescreverumblocodeconsultademdiaadicionais,podemos
simplesmenteanexarumaconsultademdiaadicionalaonossojexistenteusando
umavrgula(issoircomportarsecomoumoperadorOR):

Exemplo 5

@mediascreenand(maxwidth:699px)and(minwidth:520px),(min
width:1151px){
ullia{
paddingleft:30px;
background:url(emailicon.png)leftcenternorepeat;
}
}

Tentevocmesmo"

Mais Exemplos
UsealistadelinksdeemailemumabarralateralemumapginadaWeb
Esteexemplocolocaalistadelinksdeemailnabarralateralesquerdadeuma
pginaweb.

"Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.

4/4