CSS3

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.
Copyright19992015byRefsnesData.AllRightsReserved.
1/1
30/12/2015 CSS3BordersCantosarredondados
CSS3 cantos arredondados

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

#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
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
#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
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
6/6
30/12/2015 CSS3BorderImagens
CSS3 Border Imagens

CSS3 Border Imagens

Como CSS3imagemBeira propriedade,vocpodedefinirumaimagema
serusadacomoabordaemtornodeumelemento.
Suporte navegador
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
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
Exemplo
#borderimg{
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
Aquiestocdigo:
Exemplo
#borderimg1{
padding:15px;
webkitborderimage:url(border.png)50round;/*Safari3.1
5*/
oborderimage:url(border.png)50round;/*Opera1112.1*/
borderimage:url(border.png)50round;
}
#borderimg2{
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{
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"

Exerccio1 Exerccio2
4/5
Propriedades da borda CSS3

borderimage Ashorthandpropertyforsettingalltheborder
image*properties
borderimagesource Specifiesthepathtotheimagetobeusedasa
border
borderimageslice Specifieshowtoslicetheborderimage
borderimagewidth Specifiesthewidthsoftheborderimage
borderimageoutset Specifiestheamountbywhichtheborderimagearea
extendsbeyondtheborderbox
borderimagerepeat Specifieswhethertheborderimageshouldbe
repeated,roundedorstretched
5/5
30/12/2015 CSS3Fundos
CSS3 Fundos
CSS3 Fundos
CSS3contmalgumasnovaspropriedadesfundo,quepermitemmaiorcontrole
doelementodefundo.
Nestecaptulo,vocaprendercomoadicionarvriasimagensdefundoparaum
elemento.
VoctambmvaiaprendersobreasseguintesnovaspropriedadesCSS3:
backgroundsize
backgroundorigem
backgroundclipe
Suporte navegador
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
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
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

nibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.
Utwisienimannciomnimaveniam,Quisnostrudexerciullamcorpertao
3/8
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{
backgroundsize:contain;
}
#div2{
4/8
backgroundsize:cover;

}
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
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);
backgroundorigin:contentbox;
}
6/8
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"

Exerccio1 Exerccio2 Exerccio3 Exerccio4
Exerccio5
Propriedades CSS3 fundo

7/8
background Ashorthandpropertyforsettingallthebackground
propertiesinonedeclaration
backgroundclip Specifiesthepaintingareaofthebackground
backgroundimage Specifiesoneormorebackgroundimagesforan
element
backgroundorigin Specifieswherethebackgroundimage(s)is/are
positioned
backgroundsize Specifiesthesizeofthebackgroundimage(s)
8/8
30/12/2015 CSS3Colors
CSS3 Colors
CSS3 Colors
CSSoferecesuporteanomesdecores,hexadecimalecoresRGB.
Almdisso,tambmintroduzCSS3:
CoresRGBA
CoresHSL
CoresHSLA
opacidade
Suporte navegador
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
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
#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
ApropriedadeCSS3opacidadedefineaopacidadeparaumvalorRGBespecificada.
Ovalordapropriedadeopacidadedeveserumnmeroentre0.0(totalmente
transparente)e1.0(totalmenteopaco).
RGB(255,0,0)opacidade:0,2
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"

4/4
30/12/2015 OsgradientesCSS3
CSS3 gradientes
BackgroundGradient
GradientesCSS3permitemexibirtransiessuavesentredoisoumaismodelos
especificadoscores.
Anteriormente,voctinhaqueusarasimagensparaestesefeitos.Noentanto,
usandogradientesCSS3vocpodereduzirotempodedownloadeusodebanda.
Almdisso,elementoscomgradientesolharmelhorquandoampliada,porqueo
gradientegeradopelonavegador.
CSS3definedoistiposdegradientes:
Osgradienteslineares(vaiparacima/baixo/esquerda/direita/
diagonal)
Osgradientesradiais(definidopeloseucentro)
Suporte navegador
1/14
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
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: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
background:lineargradient(toright,red,yellow);/*Standard
syntax*/
}
Tentevocmesmo"
GradienteLinearDiagonal
Vocpodefazerumgradienteemdiagonal,especificandoambasasposiesde
partidahorizontaiseverticais.
Oexemploaseguirmostraumgradientelinearquecomeanocantosuperior
esquerdo(evaiparaocantoinferiordireito).Elecomeaavermelho,atransio
paraoamarelo:
Exemplo
#grad{
*/
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
Usando Angles
Sevocquisermaiscontrolesobreadireodogradiente,vocpodedefinirum
ngulo,emvezdeasdireespredefinidos(parabaixo,paracima,paraadireita,
paraaesquerda,paraadireitainferior,etc.).
Sintaxe
background:lineargradient(angle,colorstop1,colorstop2);
Onguloespecificadocomoumnguloentreumalinhahorizontalepelalinhade
gradiente.
Oexemploaseguirmostracomousarngulosemgradienteslineares:
Exemplo
#grad{
*/
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
Usando mltiplas paradas Cor

Oexemploaseguirmostraumgradientelinear(decimaparabaixo)comvrios
limitesdecor:
Exemplo
#grad{
*/
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
Exemplo
#grad{
*/
/*ForSafari5.1to6.0*/
background:webkitlinear
gradient(left,red,orange,yellow,green,blue,indigo,violet);
/*ForOpera11.1to12.0*/
background:olinear
/*ForFx3.6to15*/
background:mozlinear
/*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
Exemplo
#grad{
*/
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{
*/
/*Safari5.1to6.0*/
background:webkitrepeatinglineargradient(red,yellow10%,
8/14
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
Exemplo
#grad{
*/
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: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
background:radialgradient(red5%,yellow15%,green60%);/*
Standardsyntax*/
}
Tentevocmesmo"
Definir Forma
Oparmetrodeformadefineaforma.Podelevarocrculovalorouelipse.Ovalor
padroelipse.
Oexemploaseguirmostraumgradienteradialcomaformadeumcrculo:
Exemplo
#grad{
*/
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
Tentevocmesmo"
O uso de diferentes tamanhos Palavraschave

Oparmetrodetamanhodefineotamanhodogradiente.Podelevarquatrovalores:
maisprximodolado
doladomaisdistante
maisprximocanto
maisdistantecanto
Exemplo
Umgradienteradialcompalavraschavediferentestamanho:
#grad1{
*/
/*Safari5.1to6.0*/
background:webkitradialgradient(60%55%,closestside,red,
yellow,black);
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
yellow,black);


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{
*/
/*ForSafari5.1to6.0*/
background:webkitrepeatingradialgradient(red,yellow10%,
green15%);
background:orepeatingradialgradient(red,yellow10%,green
15%);
background:mozrepeatingradialgradient(red,yellow10%,
green15%);
/*Standardsyntax*/
13/14
background:repeatingradialgradient(red,yellow10%,green
15%);
}
Tentevocmesmo"

Exerccio5 Exerccio6 Exerccio7
14/14
30/12/2015 CSS3EfeitosdeSombra
CSS3 Efeitos de Sombra

ComCSS3vocpodecriarefeitosde
sombra!
CSS3 Efeitos de Sombra

ComCSS3vocpodeadicionarsombraaotextoeaoselementos.
Nestecaptulo,vocaprendersobreasseguintespropriedades:
textshadow
boxshadow
Suporte navegador
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
CSS3 Sombra Texto

OCSS3 textshadow propriedadeseaplicasombraaotexto.
Noseuusomaissimples,vocsespecificarasombrahorizontal(2px)easombra
vertical(2px):
Texto sombra efeito!
Exemplo
h1{
textshadow:2px2px;
}
Tentevocmesmo"
Emseguida,adicioneumacorparaasombra:
Exemplo
h1{
textshadow:2px2pxred;
}
Tentevocmesmo"
Emseguida,adicioneumefeitodeborroparaasombra:
Exemplo
2/6
h1{
textshadow:2px2px5pxred;
}
Tentevocmesmo"
Oexemploaseguirmostraumtextobrancocomsombrapreta:
Exemplo
h1{
color:white;
textshadow:2px2px4px#000000;
}
Tentevocmesmo"
Oexemploaseguirmostraumfulgordenonvermelhosombra:
Exemplo
h1{
textshadow:003px#FF0000;
}
Tentevocmesmo"
Vrias Sombras
Paraadicionarmaisdeumasombraaotexto,vocpodeadicionarumalistade
3/6
sombras,separadosporvrgulas.
Oexemploaseguirmostraumfulgordenonsombravermelhoeazul:
Exemplo
h1{
textshadow:003px#FF0000,005px#0000FF;
}
Tentevocmesmo"
Oexemploaseguirmostraumtextoembrancocompreto,azul,azulescuroe
sombra:
Exemplo
h1{
color:white;
textshadow:1px1px2pxblack,0025pxblue,005px
darkblue;
}
Tentevocmesmo"
CSS3 boxshadow propriedade

OCSS3 boxshadow propriedadeseaplicasombraparaelementos.
Noseuusomaissimples,vocsespecificarasombrahorizontalevertical,a
sombra:
4/6
Esteumamarelo<div>elemento
comumpretoboxshadow
Exemplo
div{
boxshadow:10px10px;
}
Tentevocmesmo"
Emseguida,adicioneumacorparaasombra:
comumcinzaboxshadow
Exemplo
div{
boxshadow:10px10pxgrey;
}
Tentevocmesmo"
Emseguida,adicioneumefeitodeborroparaasombra:
comumborrado,cinzentobox
shadow
5/6
Exemplo
div{
boxshadow:10px10px5pxgrey;
}
Tentevocmesmo"

Exerccio5
Propriedades de sombra CSS3

AtabelaaseguirlistaaspropriedadesCSS3sombra:
boxshadow Addsoneormoreshadowstoanelement
textshadow Addsoneormoreshadowstoatext
6/6
30/12/2015 CSS3Texto
CSS3 Texto
CSS3 Texto
CSS3contmvriosnovosrecursosdetexto.
Nestecaptulo,vocaprendersobreasseguintespropriedadesdotexto:
textestouro
wordwrap
palavrabreak
Suporte navegador
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
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
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.
Exemplo
Permitirpalavrascompridasparasercapazdeserquebradoeembrulharparaa
prximalinha:
p{
wordwrap:breakword;
}
Tentevocmesmo"
3/5
CSS3 Palavra Quebrando

OCSS3 palavrabreak propriedadeespecificaregrasdelinhaderuptura.
Estepargrafo
contmalgum
texto.Estalinha
vaiquebrarat
hfens.
Estepargrafoco
ntmalgumtext
o.Aslinhasvaiqu
ebraraqualquerp
ersonagem.
Exemplo
p.test1{
wordbreak:keepall;
}
p.test2{
wordbreak:breakall;
}
Tentevocmesmo"

Propriedades do texto CSS3

AtabelaaseguirlistaasnovaspropriedadesCSS3texto:
4/5
textalignlast Specifieshowtoalignthelastlineofatext
textemphasis Ashorthandforsettingtextemphasisstyleandtext
emphasiscolorinonedeclaration
textjustify Specifieshowjustifiedtextshouldbealignedand
spaced
textoverflow Specifieshowoverflowedcontentthatisnotdisplayed
shouldbesignaledtotheuser
wordbreak SpecifieslinebreakingrulesfornonCJKscripts
wordwrap Allowslongwordstobeabletobebrokenandwrap
ontothenextline
5/5
30/12/2015 CSS3WebFonts
CSS3 Web Fonts

CSS3 Web Fonts A regra @ fontface

FontesdaWebpermitemqueosdesignersdaWebparausarfontesquenoesto
instaladosnocomputadordousurio.
Quandovoctiverencontrado/compradoafontequevocdesejausar,bastaincluir
oarquivodefontenoseuservidorweb,eeleserautomaticamentebaixadoparao
usurio,quandonecessrio.
Suasfontes"prprios"sodefinidosdentrodoCSS3 @fontface regra.
Suporte navegador
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
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
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{
}
Tentevocmesmo"
Usando Texto corajoso

Vocdeveadicionaroutro @fontface regracontendodescritoresparatextoem
negrito:
3/5
Exemplo
@fontface{
src:url(sansation_bold.woff);
fontweight:bold;
}
Tentevocmesmo"
Oarquivo"sansation_bold.woff"outroarquivodefonte,quecontmoscaracteres
emnegritoparaafonteSansation.
Browsersvaiusarissosemprequeumpedaodetextocomofontfamily
"myFirstFont"deveprocessarcomonegrito.
Destaforma,vocpodetermuitas @fontface regrasparaamesmafonte.

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
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"
5/5
30/12/2015 CSS3Transformaes2D
CSS3 2D Transformaes
CSS3 Transformaes
TransformaesCSS3permitirquevoctraduzir,girar,dimensionaredistorcer
elementos.
Atransformaoumefeitoquepermitequeumelementomudamdeforma,
tamanhoeposio.
CSS3suportatransformaes2De3D.
Passeomousesobreoselementosabaixoparaveradiferenaentreum2Deuma
transformao3D:
2D D3
girar rarig
Compatibilidade de navegador para 2D

Transformaes
Nmerosseguidosdems,webkit,moz,ouOespecificaraprimeiraversoque
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
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
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
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
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
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
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"

CSS3 Transform Properties

Atabelaseguintelistatodasaspropriedadesdetransformao2D:
transform Appliesa2Dor3Dtransformationtoanelement
transform Allowsyoutochangethepositionontransformed
origin elements
2D Transform Mtodos
7/8
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
8/8
30/12/2015 CSS3transformaes3D
CSS3 transformaes 3D
CSS3permitequevocformateseuselementosusandotransformaes3D.
Passeomousesobreoselementosabaixoparaveradiferenaentreum2Deuma
transformao3D:
2D 3D
girar girar
Compatibilidade de navegador para

transformaes 3D
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
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
Nestecaptulo,vocaprendersobreosseguintesmtodosdetransformao3D:
rotateX()
rotateY()
rotateZ()
O rotateX Mtodo
O rotateX() mtodogiraumelementoemtornodoseueixoXemum
determinadograu:
Exemplo
div{
webkittransform:rotateX(150deg);/*Safari*/
transform:rotateX(150deg);
}
Tentevocmesmo"
2/5
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"

3/5
CSS3 Transform Properties

Atabelaseguintelistatodasaspropriedadesdetransformao3D:
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
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
5/5
30/12/2015 CSS3Transies
CSS3 Transies
CSS3 Transies
TransiesCSS3permitequevocaltereosvaloresdepropriedadesemproblemas
(apartirdeumvalorparaoutro),duranteumdeterminadoperodo.
Exemplo:Passeomousesobreoelementoabaixoparaverumefeitodetransio
CSS3:
CSS3
Compatibilidade de navegador para Transies

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

Exerccio5
Propriedades CSS3 Transio

Atabelaaseguirlistatodasaspropriedadesdetransio:
transition Ashorthandpropertyforsettingthefourtransition
propertiesintoasingleproperty
transitiondelay Specifiesadelay(inseconds)forthetransitioneffect
transition Specifieshowmanysecondsormillisecondsatransition
duration effecttakestocomplete
transition SpecifiesthenameoftheCSSpropertythetransition
property effectisfor
transition Specifiesthespeedcurveofthetransitioneffect
timingfunction
6/6
30/12/2015 CSS3animaes
CSS3 animaes
CSS3 animaes
AnimaesCSS3permiteanimaodamaioriadoselementosHTMLsemautilizao
deJavaScriptouFlash!
CSS3
Animao
Compatibilidade de navegador para Animations

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
12.0o
Quais so CSS3 animaes?

Umaanimaopermitequeumelementogradualmentemudardeumestilopara
outro.
1/9
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
Noexemploacima,temosespecificadoquandooestilovaimudarusandoas
palavraschave"de"e"para"(querepresenta0%(incio)e100%(completo)).
Tambmpossvelutilizarporcento.Aousarporcento,vocpodeadicionarquantos
mudanasdeestilocomovocgosta.
Oexemploaseguiriralteraracordefundodoelemento<div>quandoaanimao
de25%completo,50%completo,enovamentequandoaanimaoest100%
concluda:
Exemplo
@keyframesexample{
0%{backgroundcolor:red;}
25%{backgroundcolor:yellow;}
50%{backgroundcolor:blue;}
100%{backgroundcolor:green;}
}
div{
width:100px;
height:100px;
}
Tentevocmesmo"
Oexemploaseguirvaimudartantoacordefundoeaposiodoelemento<div>
quandoaanimaode25%completo,50%completo,enovamentequandoa
animaoest100%concluda:
Exemplo
@keyframesexample{
0%{backgroundcolor:red;left:0px;top:0px;}
25%{backgroundcolor:yellow;left:200px;top:0px;}
3/9
50%{backgroundcolor:blue;left:200px;top:200px;}
75%{backgroundcolor:green;left:0px;top:200px;}
100%{backgroundcolor:red;left:0px;top:0px;}
}

div{

width:100px;
height:100px;

position:relative;


}
Tentevocmesmo"
Retardar uma animao

A animaoematraso propriedadeespecificaumatrasoparaoinciodeuma
animao.
Oexemploqueseseguetemumatrasode2segundos,antesdeiniciaraanimao:
Exemplo
div{
width:100px;
height:100px;
position:relative;
animationdelay:2s;
}
Tentevocmesmo"
4/9
Definir Quantas vezes uma animao deve ser

executado
A animaoiteraocontagem propriedadeespecificaonmerodevezesque
umaanimaodeveexecutar.
Oexemploaseguirirexecutaraanimao3vezesantesdeparar:
Exemplo
div{
width:100px;
height:100px;
position:relative;
animationiterationcount:3;
}
Tentevocmesmo"
Oexemploaseguirusaovalor"infinito"parafazeraanimaocontinuepara
sempre
Exemplo
div{
width:100px;
height:100px;
position:relative;
animationiterationcount:infinite;
}
5/9
Tentevocmesmo"
Animao correr em sentido inverso ou ciclos

alternados
A animaoemdireo propriedadeusadaparadeixarqueumacorridade
animaoemsentidoinversoouciclosalternados.
Oexemploaseguirirexecutaraanimaonadireoinversa:
Exemplo
div{
width:100px;
height:100px;
position:relative;
animationdirection:reverse;
}
Tentevocmesmo"
Oexemploaseguirusaovalor"alternativo"parafazeraanimaoexecutadopela
primeiravezparaafrente,depoisparatrs,depoisparaafrente:
Exemplo
div{
width:100px;
height:100px;
position:relative;
6/9


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
Oexemploabaixoutilizaseisdaspropriedadesdeanimao:
Exemplo
div{
animationtimingfunction:linear;
animationdelay:2s;
animationiterationcount:infinite;
animationdirection:alternate;
}
Tentevocmesmo"
Omesmoefeitodeanimaocomoacimapodeseralcanadoutilizandoaforma
abreviada deanimao propriedades:
Exemplo
div{
animation:example5slinear2sinfinitealternate;
}
Tentevocmesmo"

Exerccio5 Exerccio6
Propriedades CSS3 Animao

8/9
Atabelaaseguirlistaaregrakeyframesetodasaspropriedadesdeanimao:
@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
9/9
30/12/2015 CSSBotes
CSS Botes
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;}
Tentevocmesmo"
2/8
30/12/2015 CSSBotes
Arredondadas Botes
2px 4px 8px 12px 50%
Useo borderradius propriedadeparaadicionarcantosarredondadosaum

boto:
Exemplo
.button1{borderradius:2px;}
.button5{borderradius:50%;}
Tentevocmesmo"
Borders boto colorido
Usea fronteira propriedadeparaadicionarumabordacoloridadeumboto:
Exemplo
.button1{
backgroundcolor:white;
color:black;
border:2pxsolid#4CAF50;/*Green*/
}
...
3/8
30/12/2015 CSSBotes
Tentevocmesmo"
Hoverable Botes
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"
8/8
30/12/2015 VriasColunasCSS3
CSS3 vrias colunas

CSS3 Multicoluna layout

OlayoutCSS3multicolunapermitefcildefiniodevriascolunasdetexto
apenascomonosjornais:
nibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.Utwisi
enimannciomnimaveniam,Quisnostrudexerciullamcorpertaosuscipit
lobortisNISLutaliquipexeacommodoconsequat.DUISautemveleumiriure
doloremhendreritemvulputatevelitESSEmolestieconsequat,velillumdolore
eufeugiatnullafacilisisnoveroerosetiustoodioaccumsanetquidignissim
blanditPraesentluptatumzzrildelenitaugueDUISdoloretefeugaitnullafacilisi.
NamlibertemporcumSolutanobiseleifendopoconguenihilimperdietdoming
idquodmazimplaceratassumfacerpossim.
Suporte navegador
comumprefixo.
Property
columncount 4.0 12.0 10.0 2.0 3.1 15.0

11.1
columngap 4.0 12.0 10.0 2.0 3.1 15.0

11.1
1/6
columnrule 4.0 12.0 10.0 2.0 3.1 15.0

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

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
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
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
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
Exemplo
div{
webkitcolumnwidth:100px;/*Chrome,Safari,Opera*/
columnwidth:100px;
}
Tentevocmesmo"
Propriedades CSS3 Multicolunas

Atabelaaseguirlistatodasaspropriedadesmulticolunas:
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
6/6
30/12/2015 CSS3InterfacedeUsurio
CSS3 Interface de Usurio

CSS3 Interface de Usurio

CSS3temnovosrecursosdeinterfacedousurio,comoelementosde
redimensionamento,esboos,edimensionamentocaixa.
Nestecaptulo,vocaprendersobreasseguintespropriedadesdainterfacedo
usurio:
redimensionar
delinearoffset
Suporte navegador
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
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
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
CSS3 Propriedades da Interface de Usurio

Atabelaaseguirlistatodasaspropriedadesdainterfacedousurio:
boxsizing Allowsyoutoincludethepaddingandborderinan
element'stotalwidthandheight
navdown Specifieswheretonavigatewhenusingthearrow
downnavigationkey
navindex Specifiesthetabbingorderforanelement
navleft Specifieswheretonavigatewhenusingthearrowleft
navigationkey
navright Specifieswheretonavigatewhenusingthearrow
rightnavigationkey
navup Specifieswheretonavigatewhenusingthearrowup
navigationkey
outlineoffset Addsspacebetweenanoutlineandtheedgeorborder
ofanelement
resize Specifieswhetherornotanelementisresizablebythe
user
4/4
30/12/2015 CSS3BoxDimensionamento
CSS3 Box Dimensionamento

CSS3 Box Dimensionamento

OCSS3 caixadimensionamento propriedadenospermiteincluiro
preenchimentoebordadelarguraealturatotaldeumelemento.
Suporte navegador
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
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
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;
}
3/4
Tentevocmesmo"
Comooresultadodeusaro dedimensionamentodecaixa:Beirabox
muitomelhor,muitosdesenvolvedoresqueremtodososelementosemsuaspginas
paratrabalhardestaforma.
Ocdigoabaixoasseguraquetodososelementossodimensionadosdestemodo
maisintuitivo.Muitosnavegadoresj usadimensionamentocaixa:Beira
box paramuitoselementosdeformulrio(masnotodosporissoqueas
entradasetextareasolhardiferenteemwidth:100%).
Aplicandoestaatodososelementosseguroesbio:
Exemplo
*{
}
Tentevocmesmo"
4/4
30/12/2015 BoxFlexvelCSS3
CSS3 Box flexvel

CSS3 Flexbox
Caixasflexveis,ouflexbox,umnovomododelayoutemCSS3.
Usodeflexboxgarantequeoselementossecomportamdemaneiraprevisvel
quandoolayoutdapginadeveacomodardiferentestamanhosdetelaediferentes
dispositivosdeexibio.
Paramuitasaplicaes,omodelodecaixaflexvelforneceumamelhoriasobreo
modelodeblocosemqueelenousacarrosalegricos,nemmargensdecolapsodo
recipienteflexvelcomasmargensdeseucontedo.
Suporte navegador
totalmenteorecurso.
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
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
</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;
}
.flexitem{
width:100px;
height:100px;
margin:10px;
}
Tentevocmesmo"
3/17
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;
}
Tentevocmesmo"
Oexemploaseguirmostraoresultadodousoda colunade valor:
Exemplo
.flexcontainer{
display:webkitflex;
display:flex;
webkitflexdirection:column;
flexdirection:column;
width:400px;
4/17
height:250px;

}
Tentevocmesmo"
Oexemploseguintemostraoresultadodousoda colunainversa valor:
Exemplo
.flexcontainer{
display:webkitflex;
display:flex;
webkitflexdirection:columnreverse;
flexdirection:columnreverse;
width:400px;
height:250px;
}
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
Exemplo
.flexcontainer{
display:webkitflex;
display:flex;
webkitjustifycontent:flexend;
justifycontent:flexend;
width:400px;
height:250px;
}
Tentevocmesmo"
Oexemploaseguirmostraoresultadodautilizaodo centrode valor:
Exemplo
.flexcontainer{
display:webkitflex;
display:flex;
webkitjustifycontent:center;
justifycontent:center;
width:400px;
height:250px;
}
Tentevocmesmo"
Oexemploaseguirmostraoresultadodeusaro espaoentre valor:
Exemplo
.flexcontainer{
display:webkitflex;
display:flex;
webkitjustifycontent:spacebetween;
6/17
justifycontent:spacebetween;
width:400px;
height:250px;

}
Tentevocmesmo"
Oexemploaseguirmostraoresultadodautilizaodo espaoaround valor:
Exemplo
.flexcontainer{
display:webkitflex;
display:flex;
webkitjustifycontent:spacearound;
justifycontent:spacearound;
width:400px;
height:250px;
}
Tentevocmesmo"
Os itensalign Propriedade
O alignitens propriedadealinhaverticalmenteitensdocontinerflexvelquando
ositensnousetodooespaodisponvelnoeixotransversal.
esticar Ovalorpadro.Ositenssoesticadoparacaberorecipiente
flexstart Ositenssoposicionadonapartesuperiordorecipiente
Flexend Osprodutossoposicionadosnaparteinferiordorecipiente
Centro Osprodutossoposicionadasnocentrodorecipiente
(verticalmente)
basais Ositenssoposicionadosnalinhadebasedorecipiente
7/17
Oexemploaseguirmostraoresultadodeusaro trecho valor(esteovalor

padro):
Exemplo
.flexcontainer{
display:webkitflex;
display:flex;
webkitalignitems:stretch;
alignitems:stretch;
width:400px;
height:250px;
}
Tentevocmesmo"
Oexemploaseguirmostraoresultadodeusaro flexstart valor:
Exemplo
.flexcontainer{
display:webkitflex;
display:flex;
webkitalignitems:flexstart;
alignitems:flexstart;
width:400px;
height:250px;
}
Tentevocmesmo"
Oexemploaseguirmostraoresultadodeusaro flexend valor:
Exemplo
8/17
.flexcontainer{
display:webkitflex;
display:flex;
webkitalignitems:flexend;
alignitems:flexend;
width:400px;
height:250px;
}
Tentevocmesmo"
Exemplo
.flexcontainer{
display:webkitflex;
display:flex;
webkitalignitems:center;
alignitems:center;
width:400px;
height:250px;
}
Tentevocmesmo"
Oexemploaseguirmostraoresultadodousoda linhadebase devalor:
Exemplo
.flexcontainer{
display:webkitflex;
display:flex;
webkitalignitems:baseline;
alignitems:baseline;
width:400px;
9/17
height:250px;

}
Tentevocmesmo"
O Flexwrap imvel
O Flexwrap propriedadeespecificaseositensflexveisdeveenvolverouno,se
nohouverespaosuficienteparaelesemumalinhaflex.
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;
}
Tentevocmesmo"
Oexemploaseguirmostraoresultadodousodo envoltriode valor:
Exemplo
10/17
.flexcontainer{
display:webkitflex;
display:flex;
webkitflexwrap:wrap;
flexwrap:wrap;
width:300px;
height:250px;
}
Tentevocmesmo"
Oexemploaseguirmostraoresultadodeusaro wrapinversa valor:
Exemplo
.flexcontainer{
display:webkitflex;
display:flex;
webkitflexwrap:wrapreverse;
flexwrap:wrapreverse;
width:300px;
height:250px;
}
Tentevocmesmo"
O aligncontent imvel
O aligncontent propriedademodificaocomportamentodo Flexwrap
propriedade.semelhantea alinharitens,masemvezdealinharitens
deflex,elesealinhaflexlinhas.
esticar Ovalorpadro.Linhasesticarparaocuparoespaorestante
flexstart Linhassoembaladosemdireoaoinciodorecipienteflexvel
11/17
flexend Aslinhassoembaladosemdireoaofinaldorecipienteflexvel
Centro Aslinhassoembaladosemdireoaocentrodorecipienteflexvel
espaoentre Aslinhassodistribudasuniformementenorecipiente
flexvel
espaoaround Aslinhassodistribudasuniformementenorecipiente
flexvel,comespaosmetadedotamanhoemcadaextremidade
Exemplo
.flexcontainer{
display:webkitflex;
display:flex;
webkitflexwrap:wrap;
flexwrap:wrap;
webkitaligncontent:center;
aligncontent:center;
width:300px;
height:300px;
}
Tentevocmesmo"
Propriedades do item Flex

Encomenda
A fim propriedadeespecificaaordemdeumprodutoflexvelemrelaoaoresto
doselementosflexveisnointeriordomesmorecipiente:
Exemplo
.flexitem{
width:100px;
height:100px;
12/17
margin:10px;
}

.first{

webkitorder:1;
order:1;
}
Tentevocmesmo"
Margem
Definindo margin:auto absorverespaoextra.Elepodeserusadopara
empurraritensdeflexemposiesdiferentes.
Noexemploaseguirvamosdefinir marginright:auto noprimeiroitemflex.

Istoirfazercomquetodooespaoextraparaserabsorvidaparaadireitado
referidoelemento:
Exemplo
.flexitem{
width:75px;
height:75px;
margin:10px;
}
.flexitem:firstchild{
marginright:auto;
}
Tentevocmesmo"
Centralizao perfeita
Noexemploaseguirvamosresolverumproblemaquasequediariamente:
centralizaoperfeita.
muitofcilcomflexbox.Definindo margin:auto faroartigoperfeitamente

13/17
centradaemambososeixos:
Exemplo
.flexitem{
width:75px;
height:75px;
margin:auto;
}
Tentevocmesmo"
alinharauto
O alignauto propriedadedeitensdeflexsubstituialignitensdepropriedadedo
recipienteflexvelparaesseitem.Eletemosmesmosvalorespossveiscomoa
alinharitens propriedade.
Oexemploaseguirdefinevaloresdiferentesalignindependentesparacadaitem
Flex:
Exemplo
.flexitem{
width:60px;
minheight:100px;
margin:10px;
}
.item1{
webkitalignself:flexstart;
alignself:flexstart;
}
.item2{
webkitalignself:flexend;
alignself:flexend;
}
14/17
.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{
margin:10px;
}
.item1{
webkitflex:2;
flex:2;
}
.item2{
webkitflex:1;
flex:1;
}
15/17
.item3{

webkitflex:1;
flex:1;
}
Tentevocmesmo"
Mais Exemplos
Criarumsiteresponsivocomflexbox
Esteexemplodemonstracomocriarumlayoutdesiteresponsivocomflexbox.
Propriedades flexbox CSS3

AtabelaaseguirlistaaspropriedadesCSSusados
comflexbox:

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
property
flex Specifiesthelengthofaflexitem,relativetotherestof
theflexitemsinsidethesamecontainer
17/17
30/12/2015 CSS3consultasdemdia
CSS3 consultas de mdia

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
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
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
#leftsidebar{width:200px;float:left;}
#main{marginleft:216px;}
}
Tentevocmesmo"
CSS3media Referncia
Paraumavisocompletadetodosostiposdemdiae/expressescaractersticas,
porfavor,vejaomediaregraemnossarefernciaCSS.
3/4
4/4
30/12/2015 CSS3consultasdemdiaExemplos
CSS3 consultas de mdia Exemplos

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
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
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
ullia:after{
content:"("attr(dataemail)")";
fontsize:12px;
fontstyle:italic;
color:#666666;
}
}
Tentevocmesmo"
3/4
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.
4/4

CSS3

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

CSS3

Încărcat de

Drepturi de autor:

Formate disponibile

30/12/2015 CSS3Introduo

CSS3 cantos arredondados

CSS3 cantos arredondados

borderradius 5.0 12.0 9.0 4.0 5.0 10.5

CSS3 borderradius propriedade

Dica:O borderradius propriedadenaverdadeumatalhoparathe

CSS3 borderradius Especifique cada canto

Testese com exerccios!

Cantos arredondados Propriedades CSS3

CSS3 Border Imagens

CSS3 Border Imagens

borderimage 16.0 12.0 11.0 15.0 6.0 15.0

CSS3 borderimage imvel

Nota:Para borderimagem paraotrabalho,oelementotambmprecisada

Dica:O borderimage propriedadenaverdadeumatalhoparathe

CSS3 borderimage Diferentes Valores Fatia

Testese com exerccios!

Propriedades da borda CSS3

background 4.0 12.0 9.0 3.6 3.1 11.5

background 4.0 12.0 9.0 4.0 4.1 10.5

background 1.0 12.0 9.0 4.0 3.0 10.5

backgroundclip 4.0 12.0 9.0 4.0 3.0 10.5

CSS3 Mltiplos Fundos

Oexemploaseguirusao fundo propriedadeestenogrfica(mesmoresultadoqueo

CSS3 Fundo Tamanho

Lorem Ipsum Dolor

Lorem Ipsum Dolor

Osoutrosdoisvalorespossveispara backgroundsize so conter e

Oexemploaseguirilustraousode conter etampa:

Definir tamanhos de multiple Imagens de Fundo

O tamanho da imagem de fundo

CSS3 backgroundorigem imvel

Oexemploaseguirilustrao backgroundorigem dapropriedade:

CSS3 backgroundclip de Propriedade

Oexemploaseguirilustrao backgroundclipde propriedade:

Testese com exerccios!

Propriedades CSS3 fundo

RGBA,HSL,and 4.0 12.0 9.0 3.0 3.1 10.1

opacity 4.0 12.0 9.0 2.0 3.1 10.1

Testese com exerccios!

lineargradient 26.0 12.0 10.0 16.0 6.1 12.1

radialgradient 26.0 12.0 10.0 16.0 6.1 12.1

repeating 26.0 12.0 10.0 16.0 6.1 12.1

repeating 26.0 12.0 10.0 16.0 6.1 12.1

CSS3 lineares gradientes

Usando mltiplas paradas Cor

Repetindo um gradiente linear

CSS3 gradientes radiais

O uso de diferentes tamanhos Palavraschave

Repetindo um gradiente radial

Testese com exerccios!

Exerccio5 Exerccio6 Exerccio7

CSS3 Efeitos de Sombra

CSS3 Efeitos de Sombra

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

CSS3 Sombra Texto

Texto sombra efeito!

Texto sombra efeito!

Texto sombra efeito!

Texto sombra efeito!

Texto sombra efeito!

Texto sombra efeito!

Texto sombra efeito!