Beruflich Dokumente
Kultur Dokumente
CSSIncio
W3.CSS Tutorial
Anterior Prximocaptulo"
W3.CSS
maisrpidaemelhor
WebSitesResponsive
O que W3.CSS?
W3.CSSumquadroCSSpequeno,rpidoemoderno,combuiltincapacidadede
resposta:
ProjetadoparasermenoremaisrpidodoqueoutrosquadrosCSS.
Projetadoparasermaisfcildeaprender,emaisfcildeusardoqueoutros
quadrosCSS.
ConcebidoparaproporcionaraigualdadeCSSparatodososdispositivos:PC,
laptop,tabletemvel.
ConcebidoparautilizarapenasCSSpadro(NohnecessidadedejQueryou
JavaScript).
ProjetadoparaaceleraraplicativosHTMLmveis.
W3.CSS gratuito
1/3
29/02/2016 W3.CSSIncio
W3.CSSlivreparausar.Nenhumalicenanecessria.
Fcil de usar
Tornloomaissimplespossvel,masnomaissimples.
AlbertEinstein
Exemplo
<divclass="w3containerw3teal">
<h1>MyHeader</h1>
</div>
<imgsrc="img_car.png"alt="Car">
<divclass="w3container">
<p>Acarisawheeled,selfpoweredmotorvehicleusedfor
transportation.</p>
</div>
<divclass="w3containerw3teal">
<p>MyFooter</p>
</div>
Tentevocmesmo"
Como
ParausarW3.CSSnoseusite,bastaadicionarumlinkpara"w3.css"desuaspginas
daweb:
Exemplo
<!DOCTYPEhtml>
<html>
<metaname="viewport"content="width=devicewidth,initial
2/3
29/02/2016 W3.CSSIncio
scale=1">
<linkrel="stylesheet"href="http://www.w3schools.com/lib/w3.css">
Tentevocmesmo"
Oubaixarw3.cssdew3css_downloadseadicionarumlinkparaumapastanoseu
prprioWebsite:
Exemplo
<!DOCTYPEhtml>
<html>
<metaname="viewport"content="width=devicewidth,initial
scale=1">
<linkrel="stylesheet"href="/lib/w3.css">
Tentevocmesmo"
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
3/3
29/02/2016 W3.CSSDemonstrao
W3.CSS Demonstrao
Anterior Prximocaptulo"
W3.CSS Cores
Osw3coloraulassoinspiradasemcoresmodernasusadasemmarketing,sinais
detrnsito,enotas:
Vermelho
Azul
Azulacinzentado
Cerceta
Amarelo
laranja
LondresacidadecapitaldaInglaterra.acidademaispopulosadoReino
Unido,comumareametropolitanademaisde13milhesdehabitantes.
LondresacidadecapitaldaInglaterra.acidademaispopulosadoReinoUnido,
1/17
29/02/2016 W3.CSSDemonstrao
comumareametropolitanademaisde13milhesdehabitantes.
LondresacidadecapitaldaInglaterra.acidademaispopulosadoReinoUnido,
comumareametropolitanademaisde13milhesdehabitantes.
"Tornloomaissimplespossvel,masnomaissimples."
AlbertEinstein
Londres
meu Rodap
informaesderodapvaiaqui
W3.CSS Alertas
OW3recipienteclassetambmpodeserutilizadoparatodosostiposdealertas:
Perigo!
Overmelhoindicafrequentementeumaaoperigosaoupotencialmente
negativa.
Aviso!
Amarelo,muitasvezesindicaumavisodequepodeprecisardeateno.
2/17
29/02/2016 W3.CSSDemonstrao
Sucesso!
Verde,muitasvezesindicaalgobemsucedidaoupositivo.
Perigo!
Overmelhoindicafrequentementeumaaoperigosaoupotencialmente
negativa.
Aviso!
Amarelo,muitasvezesindicaumavisodequepodeprecisardeateno.
Sucesso!
Verde,muitasvezesindicaalgobemsucedidaoupositivo.
W3.CSS Cartes
Osw3decartodeclassessosuitibleparaimagensenotas:
3/17
29/02/2016 W3.CSSDemonstrao
w3card2
4/17
29/02/2016 W3.CSSDemonstrao
w3card4
5/17
29/02/2016 W3.CSSDemonstrao
w3card8
Cabealho
Umcarroumveculomotorizadorodado,autoalimentadoutilizadoparao
transporte.Amaioriadasdefiniesdotermoespecificaqueoscarrosso
projetadosparafuncionarprincipalmenteemestradas,parateroassentoparaum
aoitopessoasetipicamenteterquatrorodas.(Wikipedia)
Nota
Lembromeestefimdesemana!
Nota
Lembromeestefimdesemana!
6/17
29/02/2016 W3.CSSDemonstrao
Tabelas W3.CSS
Osw3mesaclassespodemlidarcomtodosostiposdetabelas:
Jill ferreiro 50
vspera Jackson 94
Ado Johnson 67
Ado Johnson 67
W3.CSS Botes
Obtnw3classefornecebotesdetodosostamanhosetipos.
7/17
29/02/2016 W3.CSSDemonstrao
DelarguracompletaBotes
+ +
Tokyo 6
London 8
FalconRidgeParkway
S UMA eu E
8/17
29/02/2016 W3.CSSDemonstrao
NO
RESPIRAR
DEBAIXODEGUA
Listas W3.CSS
Aclassew3ulpodelidarcomtodosostiposdelistas:
Lista normal:
Jill
vspera
Ado
Grande e Red:
Jill
vspera
Ado
Minscula e limitado:
Jill
vspera
Ado
Pequeno e plido:
Jill
vspera
Ado
9/17
29/02/2016 W3.CSSDemonstrao
apresentaes de slides
W3.CSS Modais
Ow3modalclassefornecedilogomodalemHTMLpuro:
CliqueparaabrirModal
W3.CSS Dropdowns
Osw3suspensasclassesfornecemdropdowns:
Passeme!
Cliqueme!
W3.CSS Acordees
10/17
29/02/2016 W3.CSSDemonstrao
Ow3acordeoclassefornecemacordees:
AbrirSeo1
AbrirSeo2
AbrirSeo3
W3.CSS Navigation
Ow3navbarclassecriaumabarradenavegao:
Aclassew3sidenavcriaumanavegaolateral:
Menu
Home Page content..
About
Contact
Dropdown
Support
W3.CSS Paginao
11/17
29/02/2016 W3.CSSDemonstrao
Ow3paginationclasseforneceumamaneirasimplesparanavegaodepgina:
1 2 3 4 5 6
Anterior Prximo"
W3.CSS fontes
ComW3.CSSextremamentefcildeadicionarfontesaumapginadaweb:
Tornaraweblindo!
Tornar a web!
W3.CSS Tabs
Tabssoperfeitosparaaplicaesnicapginadaweb,ouparapginasWebcapaz
deexibirdiferentesassuntos.
Londres
LondresacidadecapitaldaInglaterra.
acidademaispopulosadoReinoUnido,comumareametropolitanademais
de13milhesdehabitantes.
W3.CSS Receptividade
12/17
29/02/2016 W3.CSSDemonstrao
Osw3responsiveclassesfornecemacapacidadederespostaparatodosostiposde
dispositivos:PC,laptop,tabletemvel.
W3meia
AclasseW3meiautilizaametade(50%)dajaneladoecr.
Emtelaspequenas(mximode600pixels)queredimensionaautomaticamente
alarguradetelacheia.
W3meia
W3 tero
Ow3deterceiraclasseusaumtero(33,33%)davivatela.
Emtelaspequenas(mximode600pixels)queredimensionaautomaticamente
alarguradetelacheia.
W3 tero
W3 tero
w3 trimestre
Aclassew3trimestreusaumquarto(25%)dajaneladoecr.
Emtelaspequenas(mximode600pixels)queredimensionaautomaticamente
alarguradetelacheia.
w3 trimestre
w3 trimestre
w3 trimestre
13/17
29/02/2016 W3.CSSDemonstrao
W3.CSStambmsuportaumagradefludica12colunamvel,primeirocom
pequenas,mdiasegrandesclasses.
Formulrio de entrada
Nome
Oemail
Sujeito
Leite
Acar
Lemon(Disabled)
Formulrio de entrada
Nome
Oemail
Sujeito
14/17
29/02/2016 W3.CSSDemonstrao
Masculino
Fmea
Nosei(Disabled)
W3.CSS Animations
Osw3Animarclassesfornecemumamaneirafcildedeslizarefadeinelementos:
Girar
Animao divertimento!
W3.CSS Tooltips
Ow3dicaclassepodeexibirtodosostiposdedicasdeferramentas:
Passeomousesobreestetexto!
Passeomousesobreestetexto!
Passeomousesobreestetexto!
15/17
29/02/2016 W3.CSSDemonstrao
Cliqueemmim
tema Indigo
Filmes 2014
16/17
29/02/2016 W3.CSSDemonstrao
Congeladas
Arespostaparaasanimaeseraridculo
Os Vingadores
UmenormesucessoparaaMarveleDisney
Teal tema
Filmes 2014
Congeladas
Arespostaparaasanimaeseraridculo
Os Vingadores
UmenormesucessoparaaMarveleDisney
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
17/17
29/02/2016 W3.CSSCores
W3.CSS Cores
Anterior Prximocaptulo"
Classes de cor
W3.CSSusaclassesdecor.
Asclassesdecorsoinspiradosporcoresusadasemmarketing,sinaisdetrnsito,e
notas.
W3vermelho
w3rosa
w3roxo
w3deeppurple
w3indigo
w3blue
w3azulclaro
w3ciano
1/8
29/02/2016 W3.CSSCores
w3Aqua
w3teal
w3verde
w3luzverde
w3lime
w3deareia
w3khaki
w3amarelo
w3mbar
W3laranja
w3deeplaranja
w3azulcinzento
w3brown
2/8
29/02/2016 W3.CSSCores
w3cinzaclaro
w3cinza
w3cinzaescuro
w3preta
w3plidovermelho
w3amareloplido
w3verdeclaro
w3azulclaro
Cores Hover
Osw3hovercorclassesdepermitirousodetodasascoresacimacomocoresem
foco.
Passeomousesobreestesbotes:
3/8
29/02/2016 W3.CSSCores
Teclas coloridas
caqui Amarelo laranja Vermelho Roxa
Colorido Containers
LondresacidadecapitaldaInglaterra.acidademaispopulosadoReino
Unido,comumareametropolitanademaisde13milhesdehabitantes.
LondresacidadecapitaldaInglaterra.acidademaispopulosadoReino
Unido,comumareametropolitanademaisde13milhesdehabitantes.
Tabelas coloridas
Nome Pontos
JillSmith 50
EveJackson 94
AdamJohnson 67
BoNilson 35
Colorido Cartes
Umcarroumveculomotorizado
rodado,autoalimentadoutilizadopara
otransporte.Amaioriadasdefinies
dotermoespecificaqueoscarrosso
projetadosparafuncionar
principalmenteemestradas,parater
oassentoparaumaoitopovos,
tipicamenteterdeumaoitopovos,
tipicamenteterquatrorodas.
(Wikipedia)
4/8
29/02/2016 W3.CSSCores
No preto
w3textvermelho
w3textrosa
w3textroxo
w3textdeeproxo
w3textindigo
w3textazul
w3textazulclaro
w3textciano
w3textAqua
w3textteal
w3textverde
w3textluzverde
w3textcal
w3textareia
w3textkhaki
w3textamarelo
w3textmbar
w3textlaranja
w3textdeeplaranja
w3textazulcinzento
w3textmarrom
w3textcinzaclaro
5/8
29/02/2016 W3.CSSCores
w3textcinza
w3textcinzaescuro
w3textpreta
W3textobranco
No cinza
w3textvermelho
w3textrosa
w3textroxo
w3textdeeproxo
w3textindigo
w3textazul
w3textazulclaro
w3textciano
w3textAqua
w3textteal
w3textverde
w3textluzverde
w3textcal
w3textareia
w3textkhaki
w3textamarelo
w3textmbar
w3textlaranja
w3textdeeplaranja
w3textazulcinzento
w3textmarrom
6/8
29/02/2016 W3.CSSCores
w3textcinzaclaro
w3textcinza
w3textcinzaescuro
w3textpreta
W3textobranco
No Branco
w3textvermelho
w3textrosa
w3textroxo
w3textdeeproxo
w3textindigo
w3textazul
w3textazulclaro
w3textciano
w3textAqua
w3textteal
w3textverde
w3textluzverde
w3textcal
w3textareia
w3textkhaki
w3textamarelo
w3textmbar
w3textlaranja
w3textdeeplaranja
7/8
29/02/2016 W3.CSSCores
w3textazulcinzento
w3textmarrom
w3textcinzaclaro
w3textcinza
w3textcinzaescuro
w3textpreta
W3textobranco
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
8/8
29/02/2016 W3.CSSUtilities
LondresacidadecapitaldaInglaterra.acidademaispopulosadoReino
Unido,comumareametropolitanademaisde13milhesdehabitantes.
Exemplo
<divclass="w3containerw3orange">
<p>
LondonisthecapitalcityofEngland.Itisthemostpopulous
cityintheUnitedKingdom,withametropolitanareaofover13
millioninhabitants.
</p>
</div>
<divclass="w3containerw3red">
<p>LondonisthecapitalcityofEngland.Itisthemostpopulous
cityintheUnitedKingdom,withametropolitanareaofover13
millioninhabitants.
</p>
</div>
Tentevocmesmo"
Utilitriossofreqentementechamadosdeajudantes.
1/6
29/02/2016 W3.CSSUtilities
LondresacidadecapitaldaInglaterra.acidademaispopulosado
ReinoUnido,comumareametropolitanademaisde13milhesde
habitantes.
Exemplo
<divclass="w3paddingjumbow3orange">
<p>
LondonisthecapitalcityofEngland.Itisthemostpopulous
cityintheUnitedKingdom,withametropolitanareaofover13
millioninhabitants.
</p>
</div>
Tentevocmesmo"
Exemplo
<divclass="w3padding16w3orange">
<p>
LondonisthecapitalcityofEngland.Itisthemostpopulous
cityintheUnitedKingdom,withametropolitanareaofover13
millioninhabitants.
</p>
</div>
Tentevocmesmo"
Utilitrios de fronteira
2/6
29/02/2016 W3.CSSUtilities
LondresacidadecapitaldaInglaterra.acidademaispopulosadoReino
Unido,comumareametropolitanademaisde13milhesdehabitantes.
LondresacidadecapitaldaInglaterra.acidademaispopulosadoReino
Unido,comumareametropolitanademaisde13milhesdehabitantes.
Exemplo
<divclass="w3borderleftw3borderright">
<p>
LondonisthecapitalcityofEngland.Itisthemostpopulous
cityintheUnitedKingdom,withametropolitanareaofover13
millioninhabitants.
</p>
</div>
Tentevocmesmo"
Exemplo
<divclass="w3border">
<p>
LondonisthecapitalcityofEngland.Itisthemostpopulous
cityintheUnitedKingdom,withametropolitanareaofover13
millioninhabitants.
</p>
</div>
Tentevocmesmo"
Utilities Tamanho
Estoupequena(usandow3tiny)
Estoupequena(usandow3pequeno)
3/6
29/02/2016 W3.CSSUtilities
Eusoumdio.Opadro.
Estougrande(usandow3large)
Estouxlarge(usandow3xlarge)
Exemplo
<pclass="w3small">I'msmall(usingw3small)</p>
<p>I'mmedium.Thedefault.</p>
<pclass="w3large">I'mlarge(usingw3large)</p>
<pclass="w3xlarge">I'mxlarge(usingw3xlarge)</p>
Tentevocmesmo"
Utilitrios de margem
LondresacidadecapitaldaInglaterra.acidademaispopulosadoReino
Unido,comumareametropolitanademaisde13milhesdehabitantes.
LondresacidadecapitaldaInglaterra.acidademais
populosadoReinoUnido,comumareametropolitanademais
de13milhesdehabitantes.
Exemplo
<divclass="w3containerw3margin64">
<p>
LondonisthecapitalcityofEngland.Itisthemostpopulous
cityintheUnitedKingdom,withametropolitanareaofover13
millioninhabitants.
4/6
29/02/2016 W3.CSSUtilities
</p>
</div>
Tentevocmesmo"
Crculo
Exemplo
<imgclass="w3circle"src="img_car.png"alt="Car">
Tentevocmesmo"
Centro
5/6
29/02/2016 W3.CSSUtilities
Exemplo
<divclass="w3containerw3centerw3blackw3card2">
<imgclass="w3circle"src="img_car.png"alt="Car">
</div>
Tentevocmesmo"
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
6/6
29/02/2016 W3.CSSContainers
W3.CSS Containers
Anterior Prximocaptulo"
HTML Containers
ElementostpicosdecontinerHTMLso:
<Div>
<Header>
<Footer>
<Artigo>
<Section>
<Blockquote>
Classes de continer
Classesrecipientessoimportantesparaofornecimento:
margenscomuns
paddingscomuns
alinhamentosverticaiscomuns
alinhamentoshorizontaiscomuns
fontescomuns
Ascorescomuns
OW3.CSSw3containerclasseaclasseCSSperfeitopararecipientesHTML.Ele
podeserusadoparaexibirtodosostiposdecabealhos,rodaps,artigos,sees,
alertas,notas,painis,oucitaes.
Sdependedequaisascoresquevocescolher!!!
Exemplo
1/11
29/02/2016 W3.CSSContainers
<divclass="w3container">
<p>Acarisawheeled,selfpoweredmotorvehicleusedfor
transportation.</p>
</div>
Tentevocmesmo"
Paraadicionarumacor,bastaadicionarumaclassedecor:
Exemplo
<divclass="w3containerw3red">
<p>Acarisawheeled,selfpoweredmotorvehicleusedfor
transportation.</p>
</div>
Tentevocmesmo"
LondresacidadecapitaldaInglaterra.acidademaispopulosadoReino
Unido,comumareametropolitanademaisde13milhesdehabitantes.
LondresacidadecapitaldaInglaterra.acidademaispopulosadoReino
Unido,comumareametropolitanademaisde13milhesdehabitantes.
Exemplo
2/11
29/02/2016 W3.CSSContainers
<divclass="w3containerw3palebluew3leftbarw3borderblue">
<p>LondonisthemostpopulouscityintheUnitedKingdom,
withametropolitanareaofover13millioninhabitants.</p>
</div>
Tentevocmesmo"
Ospainispodemserexibidosemummilhodemaneirasdiferentes:
LondresacidadecapitaldaInglaterra.acidademaispopulosadoReino
Unido,comumareametropolitanademaisde13milhesdehabitantes.
LondresacidadecapitaldaInglaterra.acidademaispopulosadoReino
Unido,comumareametropolitanademaisde13milhesdehabitantes.
LondresacidadecapitaldaInglaterra.acidademaispopulosadoReino
Unido,comumareametropolitanademaisde13milhesdehabitantes.
LondresacidadecapitaldaInglaterra.acidademaispopulosadoReino
Unido,comumareametropolitanademaisde13milhesdehabitantes.
LondresacidadecapitaldaInglaterra.acidademaispopulosadoReino
Unido,comumareametropolitanademaisde13milhesdehabitantes.
LondresacidadecapitaldaInglaterra.acidademaispopulosadoReino
Unido,comumareametropolitanademaisde13milhesdehabitantes.
Exemplo
<divclass="w3containerw3lightgreyw3border">
<p>LondonisthemostpopulouscityintheUnitedKingdom,
withametropolitanareaofover13millioninhabitants.</p>
3/11
29/02/2016 W3.CSSContainers
</div>
Tentevocmesmo"
Exibindo Quotes
Ow3containerclassepodeserusadaparaexibircitaes.
"Tornloomaissimplespossvel,masnomaissimples."
AlbertEinstein
"Tornloomaissimplespossvel,masnomaissimples."
AlbertEinstein
"Tornloomaissimplespossvel,mas
nomaissimples."
AlbertEinstein
Exemplo
<divclass="w3containerw3leftbarw3lightgrey">
<p><i>"Makeitassimpleaspossible,butnotsimpler."</i></p>
<p>AlbertEinstein</p>
</div>
Tentevocmesmo"
4/11
29/02/2016 W3.CSSContainers
SevocusarHTML<blockquote>,lembresequeoHTMLiradicionarumamargem
extraesquerda:
"Tornloomaissimplespossvel,masnomaissimples."
AlbertEinstein
"Tornloomaissimplespossvel,masnomaissimples."
AlbertEinstein
"Tornloomaissimplespossvel,
masnomaissimples."
AlbertEinstein
Exemplo
<blockquoteclass="w3containerw3leftbarw3lightgrey">
<p><i>"Makeitassimpleaspossible,butnotsimpler."</i></p>
<p>AlbertEinstein</p>
</blockquote>
Tentevocmesmo"
Cabealhos e rodaps
Aoestilodeumcabealho,utilizeow3containerdeclasse:
Ttulo 1
5/11
29/02/2016 W3.CSSContainers
Exemplo
<headerclass="w3containerw3teal">
<h1>Heading1</h1>
</header>
Tentevocmesmo"
Aoestilodeumrodap,utilizeow3containerdeclasse:
Rodap
informaesderodapvaiaqui
Exemplo
<footerclass="w3containerw3teal">
<h5>Footer</h5>
<p>Footerinformationgoeshere</p>
</footer>
Tentevocmesmo"
Artigos e Seces
Aoestilodeumartigo,useow3containerdeclasse:
Exemplo
<articleclass="w3container">
<p>Acarisawheeled,selfpoweredmotorvehicleusedfor
transportation.</p>
</article>
6/11
29/02/2016 W3.CSSContainers
Tentevocmesmo"
Aoestilodeumaseo,utilizeow3containerdeclasse:
Exemplo
<sectionclass="w3container">
<p>Acarisawheeled,selfpoweredmotorvehicleusedfor
transportation.</p>
</section>
Tentevocmesmo"
Preenchimento
Aclassew3containertemestofode1px(superioreinferior),e16px(esquerdae
direita).
Sevocquiseralteraropreenchimentodeumrecipiente,vocpodeusarumaclasse
w3padding:
Exemplo
<divclass="w3containerw3padding32w3red">
<h2>London</h2>
<p>LondonisthecapitalcityofEngland.
ItisthemostpopulouscityintheUnitedKingdom,
withametropolitanareaofover13millioninhabitants.</p>
</div>
Tentevocmesmo"
7/11
29/02/2016 W3.CSSContainers
cdigo Containers
Exemplo HTML
<divclass="w3codehtmlHigh">
..HTMLcodegoeshere
</div>
Tentevocmesmo"
Exemplo CSS
<divclass="w3codecssHigh">
..CSScodehere
</div>
Tentevocmesmo"
Exemplo JavaScript
<divclass="w3codejsHigh">
..JavaScriptcodehere
</div>
Tentevocmesmo"
8/11
29/02/2016 W3.CSSContainers
Exemplo
<divclass="w3containerw3red">
<spanclass="w3closebtn"
onclick="this.parentElement.style.display='none'">X</span>
<p>Toclosethiscontainer,clickontheXintheupperright
corner.</p>
</div>
Tentevocmesmo"
combinaes
Cabealho
9/11
29/02/2016 W3.CSSContainers
bomcarro
Umcarroumveculomotorizadorodado,autoalimentadoutilizadoparao
transporte.Amaioriadasdefiniesdotermoespecificaqueoscarrossoprojetados
parafuncionarprimeiramenteemestradas.(Wikipedia)
Rodap
<divclass="w3containerw3red">
<h1>Header</h1>
</div>
<divclass="w3image">
<imgsrc="img_car.png"alt="Car"style="width:100%">
<divclass="w3titlew3textblack">NiceCar</div>
</div>
<divclass="w3container">
<p>Acarisawheeled,selfpoweredmotorvehicleusedfor
10/11
29/02/2016 W3.CSSContainers
transportation.Mostdefinitionsofthetermspecifythatcarsare
designedtorunprimarilyonroads.(Wikipedia)</p>
</div>
<divclass="w3containerw3red">
<h5>Footer</h5>
</div>
Tentevocmesmo"
<headerclass="w3containerw3red">
<h1>Header</h1>
</header>
<divclass="w3image">
<imgsrc="img_car.png"alt="Car"style="width:100%">
<divclass="w3titlew3textblack">NiceCar</div>
</div>
<articleclass="w3container">
<p>Acarisawheeled,selfpoweredmotorvehicleusedfor
transportation.Mostdefinitionsofthetermspecifythatcarsare
designedtorunprimarilyonroads.(Wikipedia)</p>
</article>
<footerclass="w3containerw3red">
<h5>Footer</h5>
</footer>
Tentevocmesmo"
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
11/11
29/02/2016 W3.CSSBotes
W3.CSS Botes
Anterior Prximocaptulo"
botes
ComW3.CSS,todososelementosHTMLpodemserbotes.
Masoselementosmaiscomunsso<input>,<button>,e<a>:
Exemplo
<inputclass="w3btn"value="InputButton">
<buttonclass="w3btn">ButtonButton</button>
<aclass="w3btn"href="http://www.w3schools.com">LinkButton</a>
Tentevocmesmo"
Cores do boto
Botesvmemtodasascoresquevocprecisa:
Exemplo
1/8
29/02/2016 W3.CSSBotes
<buttonclass="w3btnw3khaki">Khaki</button>
<buttonclass="w3btnw3yellow">Yellow</button>
<buttonclass="w3btnw3orange">Orange</button>
<buttonclass="w3btnw3red">Red</button>
<buttonclass="w3btnw3purple">Purple</button>
Tentevocmesmo"
Cores Hover
Passeefeitosvmemtodasascoresquevocprecisa:
Exemplo
<buttonclass="w3btnw3hoverkhaki">Khaki</button>
<buttonclass="w3btnw3hoverwhite">White</button>
<buttonclass="w3btnw3hoverred">Red</button>
<buttonclass="w3btnw3hoverpurple">Purple</button>
Tentevocmesmo"
Formas de boto
Botesvmemtodasasformasquevocprecisa:
eRounder eRounder
2/8
29/02/2016 W3.CSSBotes
Exemplo
<buttonclass="w3btn">Normal</button>
<buttonclass="w3btnw3round">Round</button>
<buttonclass="w3btnw3roundlarge">Rounder</button>
<buttonclass="w3btnw3roundxlarge">andRounder</button>
<buttonclass="w3btnw3roundxxlarge">andRounder</button>
Tentevocmesmo"
tamanhos de boto
Botesvmemtodosostamanhosquevocprecisa:
Exemplo
<buttonclass="w3btnw3tiny">Tiny</button>
<buttonclass="w3btnw3small">Small</button>
<buttonclass="w3btnw3medium">Medium</button>
<buttonclass="w3btnw3large">Large</button>
<buttonclass="w3btnw3xlarge">xLarge</button>
Tentevocmesmo"
Fronteiras boto
Osbotespodemterfronteiras.
3/8
29/02/2016 W3.CSSBotes
Exemplo
<buttonclass="w3btnw3whitew3border">Button</button>
<buttonclass="w3btnw3khakiw3border">Button</button>
<buttonclass="w3btnw3yelloww3border">Button</button>
Tentevocmesmo"
Exemplo
<buttonclass="w3btn">Normal</button>
<buttonclass="w3btn"><i>Italic</i></button>
<buttonclass="w3btn"><b>Bold</b></button>
Tentevocmesmo"
Osbotespodemterefeitosdetextosombra.
Exemplo
<buttonclass="w3btnw3redw3textshadow">Shadow</button>
<buttonclass="w3btnw3redw3textshadow"><i>Shadow</i>
</button>
<buttonclass="w3btnw3redw3textshadow"><b>Shadow</b>
</button>
4/8
29/02/2016 W3.CSSBotes
Tentevocmesmo"
Osbotespodemterefeitosdetextofinoelargura.
Exemplo
<buttonclass="w3btn">Normal</button>
<buttonclass="w3btnw3slim">Slim</button>
<buttonclass="w3btnw3wide">Wide</button>
Tentevocmesmo"
Delarguratotalteclastemumalargurade100%,eseestendeportodaalargurado
elementopai:
Boto
Boto
Exemplo
<buttonclass="w3btnblock">Button</button>
<buttonclass="w3btnblockw3teal">Button</button>
Tentevocmesmo"
5/8
29/02/2016 W3.CSSBotes
botesnormaisexibirumponteirodedo.
botescomdeficinciasoopacaseexibiruma"nenhumsinaldoestacionamento".
Boto Boto
boto boto
boto boto
Exemplo
<buttonclass="w3btn">Button</button>
<buttonclass="w3btnw3disabled">Button</button>
<inputtype="button"class="w3btn"value="Button">
<inputtype="button"class="w3btn"value="Button"disabled>
Tentevocmesmo"
Exemplo
<buttonclass="w3btnw3ripple">Button</button>
<buttonclass="w3btnw3ripplew3red">Button</button>
<buttonclass="w3btnw3ripplew3yellow">Button</button>
6/8
29/02/2016 W3.CSSBotes
Tentevocmesmo"
boto Grupos
Osbotespodemseragrupadas(semespaoentreelas),utilizando"btnw3group":
Exemplo
<divclass="w3btngroup">
<buttonclass="w3btnw3ripple">Button</button>
<buttonclass="w3btnw3ripplew3red">Button</button>
<buttonclass="w3btnw3ripplew3yellow">Button</button>
</div>
Tentevocmesmo"
Elementos de boto
ComW3.CSS,todososelementospodeserumboto.
Umaimagempodeserumboto
Qualquerdiv,cabealho,rodapououtrosrecipientespodeserumboto.
7/8
29/02/2016 W3.CSSBotes
flutuante Botes
Obtnw3flutuanteclasse,criabotescircularesquesodestinadosparafunes
importantes:
+
+
Exemplo
<aclass="w3btnfloatingw3teal">+</a>
<aclass="w3btnfloatingw3disabled">+</a>
Tentevocmesmo"
Useagrandeflutuandobtnw3classparagrandesbotesflutuantes:
+ +
Exemplo
<aclass="w3btnfloatinglargew3teal">+</a>
<aclass="w3btnfloatinglargew3disabled">+</a>
Tentevocmesmo"
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
8/8
29/02/2016 W3.CSSCartes
W3.CSS Cartes
Anterior Prximocaptulo"
Cartes exibindo
Joo
Arquitetoeengenheiro
Classe define
W3card RecipienteparaqualquercontedoHTML(commargem)
w3card2 RecipienteparaqualquercontedoHTML(sombracom
borda2px)
w3card4 RecipienteparaqualquercontedoHTML(sombracom
borda4px)
w3card8 RecipienteparaqualquercontedoHTML(sombracom
borda8px)
w3card12 RecipienteparaqualquercontedoHTML(12pxfronteira
desombra)
1/7
29/02/2016 W3.CSSCartes
w3card16 RecipienteparaqualquercontedoHTML(16pxfronteira
desombra)
w3card24 RecipienteparaqualquercontedoHTML(24pxfronteira
desombra)
Colorido Cartes
Criarcartesdepapellikecomasw3decartodeaulas,eusarumw3color
classeparaadicionarumacor:
w3card2
w3card4
w3card8
Exemplo Amarelos
<divclass="w3cardw3yellow">
<p>w3card</p>
</div>
Tentevocmesmo"
<divclass="w3card">
2/7
29/02/2016 W3.CSSCartes
<p>w3card</p>
</div>
Tentevocmesmo"
carto da foto
AlnguadoTrollemHardanger,
Noruega
Exemplo
<divclass="w3card12">
<imgsrc="img_fjords.jpg"alt="Norway">
<divclass="w3containerw3center">
<p>TheTroll'stongueinHardanger,Norway</p>
</div>
</div>
Tentevocmesmo"
contedo do carto
3/7
29/02/2016 W3.CSSCartes
Cabealho
Algumtexto..Loremipsumdolorsit
amet,consecteturadipisicingelit,sed
noeiusmodtemporutincididunt
laboreetdoloremagnaaliqua.Ut
enimadminimveniam,Quisnostrud
exercitationullamcolaborisnisiut
aliquipexeacommodoconsequat.
Boto
Rodap
Exemplo
<divclass="w3card4">
<headerclass="w3containerw3blue">
<h1>Header</h1>
</header>
<divclass="w3container">
<p>Loremipsum...</p>
<buttonclass="w3btn">Button</button>
</div>
<footerclass="w3containerw3blue">
<h5>Footer</h5>
</footer>
</div>
Tentevocmesmo"
4/7
29/02/2016 W3.CSSCartes
mais Exemplos
Pedido de amizade
John Doe
Aceitar Declnio
Exemplo
<divclass="w3card8w3darkgrey">
<divclass="w3containerw3center">
<h3>Friendrequest</h3>
<imgsrc="img_avatar3.png"alt="Avatar"style="width:80%">
<h5>JohnDoe</h5>
<buttonclass="w3btnw3green">Accept</button>
<buttonclass="w3btnw3red">Decline</button>
</div>
</div>
Tentevocmesmo"
5/7
29/02/2016 W3.CSSCartes
Exemplo
<divclass="w3card4w3lightgrey">
<divclass="w3containerw3center">
<imgsrc="img_avatar4.png"alt="Avatar"class="w3circle">
<h5>example@email.com</h5>
<inputclass="w3inputw3border"type="text"
placeholder="Password">
<buttonclass="w3btnw3btnblockw3green">Login</button>
<ahref="#"class="w3leftw3textgreen">Forgotpassword?</a>
</div>
</div>
Tentevocmesmo"
John Doe
1novopedidodeamigo
CEOdaPoderosoEscolas.
Marketingepublicidade.
Procurandoumnovo
empregoenovasoportunidades.
+Ligue
Exemplo
<divclass="w3card4">
<headerclass="w3containerw3lightgrey">
<h3>JohnDoe</h3>
6/7
29/02/2016 W3.CSSCartes
</header>
<divclass="w3container">
<p>1newfriendrequest</p>
<hr>
<imgsrc="img_avatar3.png"alt="Avatar"class="w3leftw3
circle">
<p>President/CEOatMightySchools...</p>
</div>
<buttonclass="w3btnblockw3darkgrey">+Connect</button>
</div>
Tentevocmesmo"
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
7/7
29/02/2016 W3.CSSAlertas
W3.CSS Alertas
Anterior Prximocaptulo"
Exibindo Alertas
Perigo!
Overmelhoindicafrequentementeumaaoperigosaoupotencialmente
negativa.
Aviso!Amareloelaranja,muitasvezesindicaumavisodequepodeprecisar
deateno.
Sucesso!Verdeindicafrequentementeumaaobemsucedidaoupositivo.
Informaes!Azul,muitasvezesindicaumamudanainformativaneutraou
ao.
Umacaixadealertaapenasumw3containercomumacor:
Exemplo
<divclass="w3containerw3red">
<h3>Danger!</h3>
<p>Redoftenindicatesadangerousorpotentiallynegative
action.</p>
</div>
Tentevocmesmo"
1/4
29/02/2016 W3.CSSAlertas
W3.CSS Cores
Osalertassofrequentementeexibidoscomumacorforte,mastodaacorpodeser
usado:
Perigo!
Overmelhoindicafrequentementeumaaoperigosaoupotencialmente
negativa.
Aviso!
Amarelo,muitasvezesindicaumavisodequepodeprecisardeateno.
Sucesso!
Verde,muitasvezesindicaalgobemsucedidaoupositivo.
Perigo!
Aviso!
Sucesso!
Alertas de fechamento
Parafecharestescontentores,cliquenoXnocantosuperiordireito:
Perigo!
Overmelhoindicafrequentementeumaaoperigosaoupotencialmente
negativa.
Aviso!
2/4
29/02/2016 W3.CSSAlertas
Amarelo,muitasvezesindicaumavisodequepodeprecisardeateno.
Sucesso!
Overdeindicafrequentementeumaaobemsucedidaoupositivo.
Fechandoumalertapodeserfeitousandoumonclickeventoemumw3closebtn:
Exemplo
<spanonclick="this.parentElement.style.display='none'"class="w3
closebtn">x</span>
Tentevocmesmo"
Alertas arredondados
Useasw3redondasaulassevocquisercantosarredondados:
w3round
w3largeround
w3roundXXLarge
Exemplo
<divclass="w3containerw3greenw3round">
Tentevocmesmo"
3/4
29/02/2016 W3.CSSAlertas
Exemplo
<divclass="w3containerw3redw3card8">
Tentevocmesmo"
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
4/4
29/02/2016 TabelasW3.CSS
W3.CSS Tabelas
Anterior Prximocaptulo"
Jill ferreiro 50
vspera Jackson 94
Ado Johnson 67
Bo Nilsson 50
Mike Ross 35
Tabela bsica
Primeironome ltimonome Pontos
Jill ferreiro 50
vspera Jackson 94
Ado Johnson 67
Exemplo
<tableclass="w3table">
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Points</th>
</tr>
<tr>
1/11
29/02/2016 TabelasW3.CSS
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
Tentevocmesmo"
Tabela delimitada
Primeironome ltimonome Pontos
Jill ferreiro 50
vspera Jackson 94
Ado Johnson 67
Exemplo
<tableclass="w3tablew3border">
Tentevocmesmo"
Tabela listrado
Primeironome ltimonome Pontos
Jill ferreiro 50
vspera Jackson 94
Ado Johnson 67
Exemplo
2/11
29/02/2016 TabelasW3.CSS
<tableclass="w3tablew3striped">
Tentevocmesmo"
Jill ferreiro 50
vspera Jackson 94
Ado Johnson 67
Exemplo
<tableclass="w3tablew3borderedw3striped">
Tentevocmesmo"
Jill ferreiro 50
vspera Jackson 94
Ado Johnson 67
Exemplo
<tableclass="w3tablew3borderedw3stripedw3border">
3/11
29/02/2016 TabelasW3.CSS
Tentevocmesmo"
Lanando as listras
Primeironome ltimonome Pontos
Jill ferreiro 50
vspera Jackson 94
Ado Johnson 67
Parainverteraslistras,bastaadicionar<thead>emtornodocabealhodatabela:
Exemplo
<thead>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Points</th>
</tr>
</thead>
Tentevocmesmo"
Tabela Hoverable
Passeomousesobreaslinhasdatabela:
Jill ferreiro 50
vspera Jackson 94
Ado Johnson 67
4/11
29/02/2016 TabelasW3.CSS
Exemplo
<tableclass="w3tablew3borderedw3stripedw3borderw3
hoverable">
Tentevocmesmo"
Jill ferreiro 50
vspera Jackson 94
Ado Johnson 67
Exemplo
<thead>
<trclass="w3red">
<th>FirstName</th>
<th>LastName</th>
<th>Points</th>
</tr>
</thead>
Tentevocmesmo"
Cores de mesa
Primeironome ltimonome Pontos
Jill ferreiro 50
5/11
29/02/2016 TabelasW3.CSS
vspera Jackson 94
Ado Johnson 67
Exemplo
<tableclass="w3tablew3blue">
Tentevocmesmo"
Jill ferreiro 50
vspera Jackson 94
Ado Johnson 67
Exemplo
<tableclass="w3tablew3borderedw3stripedw3card4">
Tentevocmesmo"
Tabela Responsive
Umamesasensvelirexibirumabarraderolagemhorizontalseatelamuito
pequenaparaexibirocontedocompleto.
Tenteredimensionaroecrparaveroefeito.
Exemplo
<divclass="w3responsive">
<tableclass="w3tablew3borderedw3striped">
...tablecontent...
</table>
</div>
Tentevocmesmo"
Tabela pequena
Primeironome ltimonome Pontos
Jill ferreiro 50
vspera Jackson 94
Ado Johnson 67
Exemplo
<tableclass="w3tablew3borderedw3stripedw3tiny">
Tentevocmesmo"
Pequena mesa
7/11
29/02/2016 TabelasW3.CSS
Jill ferreiro 50
vspera Jackson 94
Ado Johnson 67
Exemplo
<tableclass="w3tablew3borderedw3stripedw3small">
Tentevocmesmo"
Grande Tabela
Primeironome ltimonome Pontos
Jill ferreiro 50
vspera Jackson 94
Ado Johnson 67
Exemplo
<tableclass="w3tablew3borderedw3stripedw3large">
Tentevocmesmo"
XLarge Tabela
Primeironome ltimonome Pontos
Jill ferreiro 50
8/11
29/02/2016 TabelasW3.CSS
vspera Jackson 94
Ado Johnson 67
Exemplo
<tableclass="w3tablew3borderedw3stripedw3xlarge">
Tentevocmesmo"
XXLarge Tabela
Nome Pontos
JillSmith 50
EveJackson 94
AdamJohnson 67
BoNilson 35
Exemplo
<tableclass="w3tablew3borderedw3stripedw3xxlarge">
Tentevocmesmo"
9/11
29/02/2016 TabelasW3.CSS
XXXLarge Tabela
Nome Pontos
ferreiro 50
Jackson 94
Johnson 67
Nilson 35
Exemplo
<tableclass="w3tablew3borderedw3stripedw3xxxlarge">
Tentevocmesmo"
Tabela jumbo
Nome Pontos
10/11
29/02/2016 TabelasW3.CSS
ferreiro 50
Jackson 94
Johnson 67
Nilson 35
Exemplo
<tableclass="w3tablew3borderedw3stripedw3jumbo">
Tentevocmesmo"
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
11/11
29/02/2016 ListasW3.CSS
W3.CSS Lists
Anterior Prximocaptulo"
vspera
Ado
Exemplo
<ulclass="w3ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Tentevocmesmo"
Lista delimitada
Jill
vspera
Ado
Exemplo
1/8
29/02/2016 ListasW3.CSS
<ulclass="w3ulw3border">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Tentevocmesmo"
vspera
Ado
Exemplo
<ulclass="w3ulw3card4">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Tentevocmesmo"
Lista Colorido
Jill
vspera
Ado
2/8
29/02/2016 ListasW3.CSS
Exemplo
<ulclass="w3ulw3red">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Tentevocmesmo"
vspera
Ado
Exemplo
<ulclass="w3ul">
<liclass="w3blue">Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Tentevocmesmo"
lista Hoverable
Passeomousesobreositensdalista:
Jill
vspera
3/8
29/02/2016 ListasW3.CSS
Ado
Exemplo
<ulclass="w3ulw3hoverable">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Tentevocmesmo"
Lista minsculo
Jill
vspera
Ado
Exemplo
<ulclass="w3ulw3tiny">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Tentevocmesmo"
Lista Pequena
Jill
vspera
4/8
29/02/2016 ListasW3.CSS
Ado
Exemplo
<ulclass="w3ulw3small">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Tentevocmesmo"
Lista Grande
Jill
vspera
Ado
Exemplo
<ulclass="w3ulw3large">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Tentevocmesmo"
Lista XLarge
5/8
29/02/2016 ListasW3.CSS
Jill
vspera
Ado
Exemplo
<ulclass="w3ulw3xlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Tentevocmesmo"
Lista XXLarge
Jill
vspera
Ado
Exemplo
<ulclass="w3ulw3xxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
6/8
29/02/2016 ListasW3.CSS
Tentevocmesmo"
Lista XXXLarge
Jill
vspera
Ado
Exemplo
<ulclass="w3ulw3xxxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Tentevocmesmo"
Lista jumbo
Jill
7/8
29/02/2016 ListasW3.CSS
vspera
Ado
Exemplo
<ulclass="w3ulw3jumbo">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Tentevocmesmo"
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
8/8
29/02/2016 ImagensW3.CSS
W3.CSS Imagens
Anterior Prximocaptulo"
Exibio de imagens
Cantosarredondados:
Crculo:
1/11
29/02/2016 ImagensW3.CSS
delimitada:
imagem arredondada
2/11
29/02/2016 ImagensW3.CSS
Ow3roundclasseadicionacantosarredondadosaumaimagem:
Exemplo
<imgsrc="img_fjords.jpg"class="w3round"alt="Norway">
Tentevocmesmo"
imagem circulou
Ow3crculoclassemoldaumaimagemparaumcrculo:
Exemplo
<imgsrc="fjords.jpg"class="w3circle"alt="Norway">
Tentevocmesmo"
imagem limitada
3/11
29/02/2016 ImagensW3.CSS
Ow3borderclasseadicionabordasaoredordaimagem:
Exemplo
<imgsrc="fjords.jpg"class="w3borderw3padding"alt="Norway">
Tentevocmesmo"
imagem Hoverable
Ow3pairaropacidadeclasseacrescentatransparnciaimagemaopassaro
mouse:
Exemplo
<imgsrc="fjords.jpg"class="w3hoveropacity"alt="Norway">
Tentevocmesmo"
4/11
29/02/2016 ImagensW3.CSS
Simon
Ochefedetodososchefes
5/11
29/02/2016 ImagensW3.CSS
Exemplo
<divclass="w3card4">
<imgsrc="img_avatar.png"alt="Person">
</div>
Tentevocmesmo"
example@email.com
Password
Entrar
Esqueceuasenha?
Exemplo
<divclass="w3card4w3lightgrey">
<divclass="w3containerw3center">
<imgsrc="img_avatar4.png"alt="Avatar"class="w3circle">
<h5>example@email.com</h5>
6/11
29/02/2016 ImagensW3.CSS
<inputclass="w3inputw3border"type="text"
placeholder="Password">
<buttonclass="w3btnw3btnblockw3green">Login</button>
<ahref="#"class="w3leftw3textgreen">Forgotpassword?</a>
</div>
</div>
Tentevocmesmo"
imagem do texto
Posicionarotextoemumaimagemcomosw3displayaulas:
TopLeft Cantosuperiordireito
Meio
Inferioresquerdo Cantoinferiordireito
Exemplo
<divclass="w3displaycontainer">
<imgsrc="img_lights.jpg"alt="Lights">
<divclass="w3displaytopleftw3container">TopLeft</div>
<divclass="w3displaytoprightw3container">TopRight</div>
<divclass="w3displaybottomleftw3container">Bottom
Left</div>
<divclass="w3displaybottomrightw3container">Bottom
Right</div>
7/11
29/02/2016 ImagensW3.CSS
<divclass="w3displaymiddlew3large">Middle</div>
</div>
Tentevocmesmo"
vero 2015
5 Terre
8/11
29/02/2016 ImagensW3.CSS
Monterosso
Vernazza
9/11
29/02/2016 ImagensW3.CSS
Manarola
Corniglia
10/11
29/02/2016 ImagensW3.CSS
Riomaggiore
Exemplo
<divclass="w3third">
<divclass="w3card2">
<imgsrc="img_monterosso.png"style="width:100%">
<divclass="w3container">
<h4>Monterosso</h4>
</div>
</div>
</div>
Tentevocmesmo"
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
11/11
29/02/2016 EntradaW3.CSS
W3.CSS Input
Anterior Prximocaptulo"
Formulrio de entrada
Nome
Oemail
Sujeito
Leite
Acar
Lemon(Disabled)
Masculino
Fmea
Nosei(Disabled)
Mandar
Melhores Marcadores
1/12
29/02/2016 EntradaW3.CSS
Formulrio de entrada
Primeironome
ltimonome
Exemplo
<formclass="w3container">
<label>FirstName</label>
<inputclass="w3input"type="text">
<label>LastNamel</label>
<inputclass="w3input"type="text">
</form>
Tentevocmesmo"
Etiquetas de fundo
Formulrio de entrada
Primeironome
ltimonome
2/12
29/02/2016 EntradaW3.CSS
Exemplo
<formclass="w3container">
<inputclass="w3input"type="text">
<label>FirstName</label>
<inputclass="w3input"type="text">
<label>LastName</label>
</form>
Tentevocmesmo"
Cartes de entrada
Cabealho
Primeironome
ltimonome
Exemplo
<divclass="w3card4">
<divclass="w3containerw3green">
<h2>Header</h2>
</div>
3/12
29/02/2016 EntradaW3.CSS
<formclass="w3container">
<labelclass="w3label">FirstName</label>
<inputclass="w3input"type="text">
<labelclass="w3label">LastName</label>
<inputclass="w3input"type="text">
</form>
</div>
Tentevocmesmo"
Etiquetas verdes
Etiquetascomclass="rtulow3"soverdesporpadro:
Primeironome
ltimonome
Exemplo
<formclass="w3container">
<labelclass="w3label">FirstName</label>
<inputclass="w3input"type="text">
<labelclass="w3label">LastName</label>
<inputclass="w3input"type="text">
</form>
4/12
29/02/2016 EntradaW3.CSS
Tentevocmesmo"
validando Labels
etiquetasdevalidaosoovermelho,eficaverdequandoaentradasetornavlido.
Paratornarosrtulosdevalidao,adicionarumaclassew3validarasuaclasse
labelw3.
Primeironome
ltimonome
Oemail
Exemplo
<formclass="w3container">
<inputclass="w3input"type="text"required>
<labelclass="w3labelw3validate">FirstName</label>
<inputclass="w3input"type="text"required>
<labelclass="w3labelw3validate">LastName</label>
<inputclass="w3input"type="email"required>
<labelclass="w3labelw3validate">Email</label>
</form>
5/12
29/02/2016 EntradaW3.CSS
Tentevocmesmo"
etiquetas coloridas
Usequalquerumdosw3textcoloraulasparacolorirassuasetiquetas:
Primeironome
ltimonome
Register
Exemplo
<formclass="w3container">
<labelclass="w3labelw3textblue"><b>FirstName</b></label>
<inputclass="w3inputw3border"type="text">
<labelclass="w3labelw3textblue"><b>LastName</b></label>
<inputclass="w3inputw3border"type="text">
<buttonclass="w3btnw3blue">Register</button>
</form>
Tentevocmesmo"
Entrada delimitada
Adicioneow3borderclasseparacriarentradascomlimites:
6/12
29/02/2016 EntradaW3.CSS
Primeironome
ltimonome
Exemplo
<inputclass="w3inputw3border"type="text">
<inputclass="w3inputw3border"type="text">
Tentevocmesmo"
arredondada Fronteiras
Usequalquerumdosw3redondasclassesparacriarbordasarredondadas:
Primeironome
ltimonome
Exemplo
<inputclass="w3inputw3borderw3round"type="text">
<inputclass="w3inputw3borderw3roundlarge"type="text">
7/12
29/02/2016 EntradaW3.CSS
Tentevocmesmo"
cores
Sintaselivreparausarseusestilosecoresfavoritos:
Formulrio de entrada
Primeironome
ltimonome
Register
Exemplo
<divclass="w3containerw3teal">
<h2>InputForm</h2>
</div>
<formclass="w3container">
<labelclass="w3labelw3textteal"><b>FirstName</b></label>
<inputclass="w3inputw3borderw3lightgrey"type="text">
<labelclass="w3labelw3textteal"><b>LastName</b></label>
<inputclass="w3inputw3borderw3lightgrey"type="text">
<buttonclass="w3btnw3bluegrey">Register</button>
</form>
Tentevocmesmo"
8/12
29/02/2016 EntradaW3.CSS
entradas Hoverable
Osw3hovercoraulasadicionaumacordefundodocampodeentradademouse:
Exemplo
<inputclass="w3inputw3hovergreen"type="text">
<inputclass="w3inputw3borderw3hoverred"type="text">
<inputclass="w3inputw3borderw3hoverblue"type="text">
Tentevocmesmo"
Entradas animados
Aanimadoinputw3classetransformaalarguradeumcampodeentradapara
100%quandoseobtmofoco:
Clickonme!
Clickonme!
Exemplo
<inputclass="w3inputw3animateinput"type="text"
style="width:30%">
9/12
29/02/2016 EntradaW3.CSS
Tentevocmesmo"
checkboxes
Leite
Acar
Lemon(Disabled)
Exemplo
<inputclass="w3check"type="checkbox"checked="checked">
<labelclass="w3validate">Milk</label>
<inputclass="w3check"type="checkbox">
<labelclass="w3validate">Sugar</label>
<inputclass="w3check"type="checkbox"disabled>
<labelclass="w3validate">Lemon(Disabled)</label>
Tentevocmesmo"
Botes do rdio
Masculino
Fmea
Nosei(Disabled)
10/12
29/02/2016 EntradaW3.CSS
Exemplo
<inputclass="w3radio"type="radio"name="gender"value="male"
checked>
<labelclass="w3validate">Male</label>
<inputclass="w3radio"type="radio"name="gender"value="female">
<labelclass="w3validate">Female</label>
<inputclass="w3radio"type="radio"name="gender"value=""
disabled>
<labelclass="w3validate">Don'tknow(Disabled)</label>
Tentevocmesmo"
Selecione as opes
Escolhasuaopo
Exemplo
<selectclass="w3select"name="option">
<optionvalue=""disabledselected>Chooseyouroption</option>
<optionvalue="1">Option1</option>
<optionvalue="2">Option2</option>
<optionvalue="3">Option3</option>
</select>
Tentevocmesmo"
11/12
29/02/2016 EntradaW3.CSS
Exemplo
<selectclass="w3selectw3border"name="option">
Tentevocmesmo"
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
12/12
29/02/2016 W3.CSSemblemaseTag
Exibindo Badges
Notcias 6
comentrios 8
atualizaes 9
Exemplo
<p>News<spanclass="w3badgew3green">6</span></p>
<p>Comments<spanclass="w3badgew3red">8</span></p>
<p>Updates<spanclass="w3badgew3darkgrey">9</span></p>
Tentevocmesmo"
Exibindo Tag
Exemplo Novo!
Comentrios maistarde!
Exemplo
<p>Example<spanclass="w3tagw3blue">New!</span></p>
<p>Comments<spanclass="w3tagw3teal">MoreLater!</span></p>
Tentevocmesmo"
1/7
29/02/2016 W3.CSSemblemaseTag
Eve 3
Adam 8
Exemplo
<ulclass="w3ulw3border">
<li>Jill<spanclass="w3badgew3greenw3right">5</span></li>
<li>Eve<spanclass="w3badgew3greenw3right">3</span></li>
<li>Adam<spanclass="w3badgew3greenw3right">8</span></li>
</ul>
Tentevocmesmo"
LondonZoo
Exemplo
<divclass="w3tagw3orange">LondonZoo</div>
Tentevocmesmo"
2/7
29/02/2016 W3.CSSemblemaseTag
S UMA eu E
Exemplo
<divclass="w3tagw3red">S</div>
<divclass="w3tagw3black">A</div>
<divclass="w3tagw3yellow">L</div>
<divclass="w3tagw3black">E</div>
Tentevocmesmo"
Exemplo
<divclass="w3tagw3roundw3green"style="padding:3px3px">
<divclass="w3tagw3roundw3green"style="border:1pxsolid
white">
FalconRidgeParkway
</div>
</div>
Tentevocmesmo"
3/7
29/02/2016 W3.CSSemblemaseTag
66
Exemplo
<spanclass="w3tagw3jumbow3paddinglargew3blue">66</span>
<divclass="w3tagw3red">
<spanclass="w3jumbo">49</span><spanclass="w3
xlarge">,99</span>
</div>
Tentevocmesmo"
66
Exemplo
<p><spanclass="w3badgew3jumbow3paddinglargew3
red">66</span></p>
Tentevocmesmo"
4/7
29/02/2016 W3.CSSemblemaseTag
EMCASODE
EMERGNCIA
corrercomooinferno!
Exemplo
<spanclass="w3tagw3xxlargew3paddingw3orangew3center">
INCASEOF<br>
EMERGENCY<br>
RUNLIKEHELL!
</span>
Tentevocmesmo"
49 ,99
Exemplo
<divclass="w3tagw3jumbow3green">
<spanclass="w3xxlarge">49</span>
<spanclass="w3large">,99</span>
</div>
Tentevocmesmo"
5/7
29/02/2016 W3.CSSemblemaseTag
NO
RESPIRAR
DEBAIXODEGUA
Exemplo
<spanclass="w3tagw3xxlargew3paddingw3roundlargew3red
w3center">
DONOT<br>
BREATHE<br>
UNDERWATER
</span>
Tentevocmesmo"
Exemplo
<spanclass="w3tagw3black">J</span>
<spanclass="w3tagw3black">A</span>
<spanclass="w3tagw3black">N</span>
<spanclass="w3tagw3black">U</span>
<spanclass="w3tagw3black">A</span>
<spanclass="w3tagw3black">R</span>
<spanclass="w3tagw3black">Y</span>
Tentevocmesmo"
6/7
29/02/2016 W3.CSSemblemaseTag
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
7/7
29/02/2016 W3.CSSResponsive
Classes Responsive
Estassoasclassesderesposta:
Classe Descrio
W3meia Ocupa1/2dajanela(emtelasmdiasougrandes)
W3tero Ocupa1/3dajanela(emtelasmdiasougrandes)
w3twothird Ocupa2/3dajanela(emtelasmdiasougrandes)
w3trimestre Ocupa1/4dajanela(emtelasmdiasougrandes)
w3rest Defineorestodeumalinha
w3col Defineumacoluna(maisemumcaptuloposterior)
linhas Responsive
aulasResponsivedeveresidirdentrodeumalinhaasertotalmentesensvel.
Classe Descrio
w3row Defineumrecipientepaddingmenosparaasclassesde
resposta.
O W3meia Classe
Alarguradaw3meioclasse1/2doelementopai(style="width:50%").
Emtelasmenoresque601pixelsqueredimensionaa100%.
W3meia
1/8
29/02/2016 W3.CSSResponsive
W3meia
Exemplo
<divclass="w3row">
<divclass="w3containerw3half">
<h2>w3half</h2>
<p>Thisisaparagraph</p>
</div>
<divclass="w3containerw3half">
<h2>w3half</h2>
<p>Thisisaparagraph</p>
</div>
</div>
Tentevocmesmo"
O w3 de terceira classe
Alarguradaw3teroclasse1/3doelementopai(style="width:33,33%").
Emtelasmenoresque601pixelsqueredimensionaa100%.
W3 tero
W3 tero
W3 tero
<divclass="w3row">
<divclass="w3containerw3third">
<h2>w3third</h2>
<p>Thisisaparagraph</p>
2/8
29/02/2016 W3.CSSResponsive
</div>
<divclass="w3containerw3third">
<h2>w3third</h2>
<p>Thisisaparagraph</p>
</div>
<divclass="w3containerw3third">
<h2>w3third</h2>
<p>Thisisaparagraph</p>
</div>
</div>
Tentevocmesmo"
A classe w3 trimestre
Alarguradaw3trimestreclasse1/4doelementopai(style="width:25%").
Emtelasmenoresque601pixelsqueredimensionaa100%.
w3 trimestre
<divclass="w3row">
<divclass="w3containerw3quarter">
<h2>w3quarter</h2>
<p>Thisisaparagraph</p>
</div>
<divclass="w3containerw3quarter">
<h2>ww3quarter</h2>
<p>Thisisaparagraph</p>
</div>
<divclass="w3containerw3quarter">
<h2>w3quarter</h2>
<p>Thisisaparagraph</p>
</div>
</div>
3/8
29/02/2016 W3.CSSResponsive
Tentevocmesmo"
combinaes
w3 trimestre
w3 trimestre
w3 trimestre
w3 trimestre
w3 trimestre
W3meia
w3 trimestre
w3 trimestre
w3 trimestre
W3meia
<divclass="w3row">
<divclass="w3halfw3container">
<h2>w3half</h2>
<divclass="w3row">
4/8
29/02/2016 W3.CSSResponsive
<divclass="w3halfw3containerw3red">
<h2>w3half</h2>
<p>Thisisaparagraph.</p>
</div>
<divclass="w3halfw3container">
<h2>w3half</h2>
<p>Thisisaparagraph.</p>
</div>
</div>
</div>
<divclass="w3halfw3container">
<h2>w3half</h2>
<divclass="w3row">
<divclass="w3halfw3containerw3red">
<h2>w3half</h2>
<p>Thisisaparagraph.</p>
</div>
<divclass="w3halfw3container">
<h2>w3half</h2>
<p>Thisisaparagraph.</p>
</div>
</div>
</div>
</div>
Tentevocmesmo"
<divclass="w3row">
<divclass="w3col"style="width:150px"><p>150px</p></div>
<divclass="w3rest"><p>rest</p></div>
</div>
5/8
29/02/2016 W3.CSSResponsive
Tentevocmesmo"
<divclass="w3row">
<divclass="w3col"style="width:20%"><p>20%</p></div>
<divclass="w3col"style="width:60%"><p>60%</p></div>
<divclass="w3col"style="width:20%"><p>20%</p></div>
</div>
Tentevocmesmo"
A classe w3content
Exemplo
<bodyclass="w3content"style="maxwidth:600px">
<divclass="w3containerw3card2w3indigo">
<h1>Movies2014</h1>
</div>
<ulclass="w3ul">
<li>
<h3>Frozen</h3>
<p>Thesocialmediaresponse
totheanimationswasridiculous.</p>
</li>
<li>
<h3>TheFaultinOurStars</h3>
<p>Touching,grippingandgenuinelywellmade.</p>
6/8
29/02/2016 W3.CSSResponsive
</li>
<li>
<h3>TheAvengers</h3>
<p>TheAvengersisahugelybankablefranchiseforMarveland
Disney.</p>
</li>
</ul>
<divclass="w3containerw3indigow3xlarge">
<h5>Movies2014</h5>
</div>
</body>
Tentevocmesmo"
Redimensionarapginaparaveroefeito!
1
2
3
4
5
6
7
8
9
10
11
12
Estapartevaiocupar12colunasemumatelapequena,4emumatelademdio
e3emumatelagrande.
7/8
29/02/2016 W3.CSSResponsive
Estapartevaiocupar12colunasemumatelapequena,8emumatelademdio
e9emumatelagrande.
1
2
3
4
5
6
7
8
9
10
11
12
Vocvaiaprendermaissobreagradedefluidoemumcaptuloposterior.
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
8/8
29/02/2016 W3.CSSAnimate
W3.CSS Animate
Anterior Prximocaptulo"
ComanimaesW3.CSSvocpodedeslizarefadeemelementosHTML.
Topo
Inferior
Esquerda
Animao divertimento!
Certo
FadeIn
zoom
Girar
Deslize no Elements
Deslizeemumelementodapartesuperior,inferior,esquerdaoudireitadatelacom
os*w3animateclasses:
Classe define
w3animadotop Animaumelemento300pixelsapartirdo Tente
topodoecrpara0px
w3animado Animaumelemento300pixelsapartirdo Tente
bottom fundodatelapara0px
W3animado Animaumelemento300px,pelolado Tente
1/3
29/02/2016 W3.CSSAnimate
esquerda esquerdodatelapara0px
Fade in Elements
Desvanecerseemumelementocomow3animadoopacidadeclasse:
Exemplo
<divclass="w3animateopacity">..</div>
Tentevocmesmo"
Zoom in Elements
Zoomumelementocomow3animadozoomdeclasse:
Exemplo
<divclass="w3animatezoom">..</div>
Tentevocmesmo"
Elementos de spin
Girarqualquerelemento360grauscomospinw3classe:
Exemplo
2/3
29/02/2016 W3.CSSAnimate
<divclass="w3spin">..</div>
Tentevocmesmo"
desaparecendo Infinito
Exemplo
<divclass="w3animatefading">..</div>
Tentevocmesmo"
desvaneceTodos
Exemplo
<imgclass="w3animatetop"src="img_01.jpg">
<imgclass="w3animatezoom"src="img_02.jpg">
<imgclass="w3animateleft"src="img_03.jpg">
<imgclass="w3animatebottom"src="img_04.jpg">
Tentevocmesmo"
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
3/3
29/02/2016 W3.CSSDropdowns
W3.CSS Dropdowns
Anterior Prximocaptulo"
suspensa Hover
Passeme!
Ow3pendentepairarclassedefineumelementosuspensohoverable.
Aw3suspensocontedoclassedefineumapartesuspensaaserexibido.
Exemplo
<divclass="w3dropdownhover">
<buttonclass="w3btnw3red">HoverMe!</button>
<divclass="w3dropdowncontentw3border">
<ahref="#">Link1</a>
<ahref="#">Link2</a>
<ahref="#">Link3</a>
</div>
</div>
Tentevocmesmo"
Tantooelementopartehoverableeoelementosuspensopodeserqualquerelemento
HTML.
Noexemploanterior,apartehoverableeraum<button>,eapartesuspensadeum
<div>.
Noprximoexemplo,apartehoverableum<p>,eapartesuspensaum<span>.
Exemplo
1/4
29/02/2016 W3.CSSDropdowns
<divclass="w3dropdownhover">
<p>HoverMe!
<spanclass="w3dropdowncontentw3border">
<ahref="#">Link1</a>
<ahref="#">Link2</a>
<ahref="#">Link3</a>
</div>
</div>
Tentevocmesmo"
A Dropdown menu
Aclassew3pendentefocoperfeitoparamenusdenavegaosuspensa.
Vocvaiaprendermaissobrebarrasdenavegaonoprximocaptulo.
Exemplo
<ulclass="w3navbarw3card2w3lightgrey">
<li><ahref="#">Home</a></li>
<li><ahref="#">Link1</a></li>
<liclass="w3dropdownhover">
<ahref="#">Dropdown<iclass="fafacaretdown"></i></a>
<divclass="w3dropdowncontentw3whitew3card4">
<ahref="#">Link1</a>
<ahref="#">Link2</a>
<ahref="#">Link3</a>
</div>
</li>
</ul>
Tentevocmesmo"
2/4
29/02/2016 W3.CSSDropdowns
Cliqueemmim
Exemplo
<divclass="w3dropdownclick">
<buttononclick="myFunction()"class="w3btn">ClickMe</button>
<divid="Demo"class="w3dropdowncontentw3card">
<ahref="#">Link1</a>
<ahref="#">Link2</a>
<ahref="#">Link3</a>
</div>
</div>
<script>
functionmyFunction(){
document.getElementById("Demo").classList.toggle("w3show");
}
</script>
Tentevocmesmo"
Dropdowns imagem
Passeomousesobre"Monterosso":
MonterossoVernazzaManarola
Exemplo
<divclass="w3dropdownhover">Monterosso
<divclass="w3dropdowncontent"style="width:250px">
<imgsrc="img_monterosso.png"alt="Monterosso"
style="width:100%">
3/4
29/02/2016 W3.CSSDropdowns
</div>
</div>
VernazzaManarola
Tentevocmesmo"
Dropdowns carto
Passeomousesobre"London":
LondresTokyoParis
Exemplo
<divclass="w3dropdownhover">London
<divclass="w3dropdowncontentw3card4"style="width:250px">
<imgsrc="img_london.png"alt="London"style="width:100%">
<divclass="w3container">
<p>LondonisthecapitalcityofEngland.</p>
<p>ItisthemostpopulouscityintheUK.</p>
</div>
</div>
</div>
TokyoParis
Tentevocmesmo"
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
4/4
29/02/2016 W3.CSSAcordees
W3.CSS Acordees
Anterior Prximocaptulo"
Acordeo
Umacordeousadoparamostrar(eesconder)contedoquedivididoemsees.
Cliquenosbotes"Abrir"abaixoparavercomoelefunciona:
AbrirSeo1
AbrirSeo2
Link1
Link2
Link3
AbrirSeo3
Ow3acordeoclassedefineumacordeo,eacordeocontedow3classe
defineaparteaserexibida:
Exemplo
<divclass="w3accordionw3lightgrey">
<buttononclick="myFunction('Demo1')"class="w3btnblockw3
leftalign">
OpenSection1
</button>
<divid="Demo1"class="w3accordioncontent">
<p>Sometext..</p>
1/2
29/02/2016 W3.CSSAcordees
</div>
<buttononclick="myFunction('Demo2')"class="w3btnblockw3
leftalign">
OpenSection2
</button>
<divid="Demo2"class="w3accordioncontent">
<p>Sometext..</p>
</div>
</div>
<script>
functionmyFunction(id){
document.getElementById(id).classList.toggle("w3show");
}
</script>
Tentevocmesmo"
Tantooelementoqueutilizadoparaabriraacordeoeocontedodoacordeo
podeserqualquerelementoHTML.
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
2/2
29/02/2016 W3.CSSNavigation
W3.CSS Navigation
Anterior Prximocaptulo"
W3.CSSfornecertodosostiposdebarrasdenavegao:
Vertical:
1/13
29/02/2016 W3.CSSNavigation
Incio
Link2
Ligao3
Ligao4
Ligao5
2/13
29/02/2016 W3.CSSNavigation
Horizontal(verticalemtelaspequenas):
Navegao bsica
Ow3navbarclassecriaumabarradenavegaohorizontal:
Exemplo
<ulclass="w3navbarw3black">
<li><ahref="#">Home</a></li>
<li><ahref="#">Link1</a></li>
<li><ahref="#">Link2</a></li>
<li><ahref="#">Link3</a></li>
</ul>
Tentevocmesmo"
3/13
29/02/2016 W3.CSSNavigation
Exemplo
<ulclass="w3navbarw3lightgrey">
<ulclass="w3navbarw3green">
<ulclass="w3navbarw3blue">
Tentevocmesmo"
Exemplo
<ulclass="w3navbarw3borderw3lightgrey">
<ulclass="w3navbarw3borderw3roundw3lightgrey">
<ulclass="w3navbarw3card8w3lightgrey">
Tentevocmesmo"
Exemplo
4/13
29/02/2016 W3.CSSNavigation
<ulclass="w3navbarw3borderw3lightgrey">
<li><aclass="w3green"href="#">Home</a></li>
<li><ahref="#">Link1</a></li>
<li><ahref="#">Link2</a></li>
<li><ahref="#">Link3</a></li>
</ul>
Tentevocmesmo"
Ligaes Hoverable
Aopassaromousesobreoslinksdentrodabarradenavegao,acordefundomuda
paracinza.
Sevocquerumacordefundodiferenteemfoco,usequalquerumdosw3hover
corclasses:
Exemplo
<ulclass="w3navbarw3borderw3lightgrey">
<li><aclass="w3hoverred"href="#">Home</a></li>
<li><aclass="w3hoverblue"href="#">Link1</a></li>
<li><aclass="w3hovergreen"href="#">Link2</a></li>
<li><aclass="w3hoverteal"href="#">Link3</a></li>
</ul>
Tentevocmesmo"
5/13
29/02/2016 W3.CSSNavigation
Exemplo
<ulclass="w3navbarw3lightgreyw3border">
<li><ahref="#">Home</a></li>
<li><ahref="#">Link1</a></li>
<li><ahref="#">Link2</a></li>
<ulclass="w3right">
<li><aclass="w3green"href="#">Link3</a></li>
<li><ahref="#">Link4</a></li>
</ul>
</ul>
Tentevocmesmo"
Exemplo
<ulclass="w3navbarw3greenw3large">
<ulclass="w3navbarw3greenw3xlarge">
<ulclass="w3navbarw3greenw3xxlarge">
Tentevocmesmo"
Exemplo
<ulclass="w3navbarw3lightgreyw3borderw3large">
<li><aclass="w3green"href="#"><iclass="fafahomew3large">
</i></a></li>
<li><ahref="#"><iclass="fafasearchw3large"></i></a></li>
<li><ahref="#"><iclass="fafaenvelopew3large"></i></a></li>
<li><ahref="#"><iclass="fafaglobew3large"></i></a></li>
<li><ahref="#"><iclass="fafasigninw3large"></i></a></li>
</ul>
Tentevocmesmo"
Exemplo
<ulclass="w3navbarw3card2w3lightgrey">
<li><ahref="#">Home</a></li>
<li><ahref="#">Link1</a></li>
<liclass="w3dropdownhover">
<ahref="#">Dropdown</a>
<divclass="w3dropdowncontentw3whitew3card4">
<ahref="#">Link1</a>
<ahref="#">Link2</a>
<ahref="#">Link3</a>
</div>
</li>
</ul>
7/13
29/02/2016 W3.CSSNavigation
Tentevocmesmo"
Nota:Quandoomenususpenso"aberto",olinksuspensarecebeumacordefundo
cinzaparaindicarqueeleestativo.Parasubstituirisso,adicioneumw3hovercor
classetantoparao"menususpenso"<li>e<a>:
Dica:Sevocquiserumsmbolosuspensaaoladodotextosuspenso,adicionarum
coneadequado(como ):
Exemplo
<liclass="w3dropdownhoverw3hovergreen">
<aclass="w3hovergreen"href="#">Dropdown<iclass="fafa
caretdown"></i></a>
<divclass="w3dropdowncontentw3whitew3card4">
<ahref="#">Link1</a>
<ahref="#">Link2</a>
<ahref="#">Link3</a>
</div>
</li>
Tentevocmesmo"
Usew3suspensocliquesevocpreferir,cliquenolinksuspensoemvezdepairar:
Exemplo
<liclass="w3dropdownclick">
<aonclick="myFunction()"href="#">Dropdown<iclass="fafa
caretdown"></i></a>
<divid="demo"class="w3dropdowncontentw3whitew3card4">
<ahref="#">Link1</a>
<ahref="#">Link2</a>
8/13
29/02/2016 W3.CSSNavigation
<ahref="#">Link3</a>
</div>
</li>
<script>
functionmyFunction(){
document.getElementById("demo").classList.toggle("w3show");
}
</script>
Tentevocmesmo"
Fixed Top
The w3top class forces the navigation bar to stay at
the top of the page, even when the user scrolls the
page.
Scroll this page to see the effect.
Top fixo
<divclass="w3top">
<ulclass="w3navbar">
...
</ul>
</div>
9/13
29/02/2016 W3.CSSNavigation
Tentevocmesmo"
Fixed Bottom
The w3bottom class forces the navigation bar to stay
at the bottom of the page, even when the user scrolls
the page.
Scroll this page to see the effect.
Home Link1 Link2
Sometexttoenablescrolling..
<divclass="w3bottom">
<ulclass="w3navbar">
...
</ul>
</div>
Tentevocmesmo"
Noexemploabaixo,abarradenavegaosubstitudoporumboto()nocanto
superiordireitoquandomostradoemtabletsedispositivosmveis.Quandooboto
clicado,abarradenavegaoserexibidoverticalmente:
Exemplo
10/13
29/02/2016 W3.CSSNavigation
Home
Resizethebrowserwindowtoseetheeffect.
Tentevocmesmo"
topnav
Outroexemplodeumabarradenavegao,aW3topnavclasse.semelhanteao
w3navbar,excetoqueelevaiadicionarumsublinhadoquandovocpassaomouse
sobreoslinks,emvezdeumacordefundo:
Exemplo
<navclass="w3topnavw3green">
<ahref="#">Home</a>
<ahref="#">Link1</a>
<ahref="#">Link2</a>
<ahref="#">Link3</a>
<ahref="#">Link4</a>
</nav>
11/13
29/02/2016 W3.CSSNavigation
Tentevocmesmo"
<navclass="w3topnavw3green">
<ahref="#"><iclass="fafahome"></i></a>
<ahref="#">Link1</a>
<ahref="#">Link2</a>
<ahref="#">Link3</a>
<ahref="#">Link4</a>
</nav>
Tentevocmesmo"
navegao lateral
Ow3sidenavclassecriaumabarradenavegaovertical:
Menu
Home Page content..
About
Contact
Dropdown
Support
Vparaoprximocaptuloparaaprendermaissobreanavegaolateral.
Anterior Prximocaptulo"
12/13
29/02/2016 W3.CSSNavigation
Copyright19992015byRefsnesData.AllRightsReserved.
13/13
29/02/2016 W3.CSSnavegaolateral
Contact
Dropdown
Support
Comnavegaolateral,voctemvriasopes:
Sempreexibiropaineldenavegaoesquerdadocontedodapgina.
Useumanavegaolateraldobrvel"totalmenteautomtica"responsivo.
Abraopaineldenavegao,escondendoaparteesquerdadocontedoda
pgina.
Abraopaineldenavegao,escondendotodoocontedodapgina.
Mudarocontedodapginaparaadireita,aoabriropaineldenavegao.
<navclass="w3sidenavw3white"style="width:25%">
<ahref="#">Link1</a>
<ahref="#">Link2</a>
<ahref="#">Link3</a>
1/26
29/02/2016 W3.CSSnavegaolateral
<ahref="#">Link4</a>
</nav>
<divstyle="marginleft:25%">
...pagecontent...
</div>
Tentevocmesmo"
<navclass="w3sidenavw3collapsew3white"style="width:200px">
<ahref="#"onclick="w3_close()"class="w3closenavw3hide
large">Closex</a>
<ahref="#">Link1</a>
<ahref="#">Link2</a>
<ahref="#">Link3</a>
</nav>
<divclass="w3main"style="marginleft:200px">
<spanclass="w3opennavw3hidelarge"
onclick="w3_open()">/span>
...pagecontent...
</div>
<script>
functionw3_open(){
document.getElementsByClassName("w3sidenav")[0].style.display=
"block";
}
functionw3_close(){
document.getElementsByClassName("w3sidenav")[0].style.display=
"none";
}
</script>
Tentevocmesmo"
contedo
functionw3_open(){
document.getElementsByClassName("w3sidenav")[0].style.display
="block";
}
functionw3_close(){
document.getElementsByClassName("w3sidenav")[0].style.display
="none";
}
Tentevocmesmo"
functionw3_open(){
document.getElementsByClassName("w3sidenav")[0].style.width=
"100%";
document.getElementsByClassName("w3sidenav")[0].style.display
="block";
}
functionw3_close(){
document.getElementsByClassName("w3sidenav")[0].style.display
="none";
}
Tentevocmesmo"
functionw3_open(){
document.getElementById("main").style.marginLeft="25%";
document.getElementsByClassName("w3sidenav")[0].style.width=
"25%";
document.getElementsByClassName("w3sidenav")[0].style.display=
"block";
3/26
29/02/2016 W3.CSSnavegaolateral
document.getElementsByClassName("w3opennav")[0].style.display=
'none';
}
functionw3_close(){
document.getElementById("main").style.marginLeft="0%";
document.getElementsByClassName("w3sidenav")[0].style.display=
"none";
document.getElementsByClassName("w3opennav")[0].style.display=
"inlineblock";
}
Tentevocmesmo"
4/26
29/02/2016 W3.CSSnavegaolateral
Link1
Link2
Link3
Link4
5/26
29/02/2016 W3.CSSnavegaolateral
Link1
Link2
Link3
Link4
6/26
29/02/2016 W3.CSSnavegaolateral
Link1
Link2
Link3
Link4
7/26
29/02/2016 W3.CSSnavegaolateral
Exemplo
<navclass="w3sidenavw3lightgrey">
<aclass="w3green"href="#">Link1</a>
<ahref="#">Link2</a>
<ahref="#">Link3</a>
</nav>
Tentevocmesmo"
8/26
29/02/2016 W3.CSSnavegaolateral
Link1
Link2
Link3
9/26
29/02/2016 W3.CSSnavegaolateral
Exemplo
<navclass="w3sidenavw3border">
<ahref="#">Link1</a>
<ahref="#">Link2</a>
<ahref="#">Link3</a>
</nav>
Tentevocmesmo"
Adicioneow3borderbottomclasseparaoslinksparacriardivisoresdelink:
10/26
29/02/2016 W3.CSSnavegaolateral
Link1
Link2
Link3
11/26
29/02/2016 W3.CSSnavegaolateral
Exemplo
<navclass="w3sidenavw3border">
<aclass="w3borderbottom"href="#">Link1</a>
<aclass="w3borderbottom"href="#">Link2</a>
<ahref="#">Link3</a>
</nav>
Tentevocmesmo"
Useow3cardclassparaexibirosidenavcomoumcarto:
12/26
29/02/2016 W3.CSSnavegaolateral
Link1
Link2
Link3
13/26
29/02/2016 W3.CSSnavegaolateral
Exemplo
<navclass="w3sidenavw3card8">
<ahref="#">Link1</a>
<ahref="#">Link2</a>
<ahref="#">Link3</a>
</nav>
Tentevocmesmo"
Ligaes Hoverable
Aopassaromousesobreoslinksdentrodosidenav,acordefundomudaparacinza.
Sevocquerumacordefundodiferenteemfoco,usequalquerumdosw3pairar
corclasses:
14/26
29/02/2016 W3.CSSnavegaolateral
Link1
Link2
Link3
Link4
15/26
29/02/2016 W3.CSSnavegaolateral
Exemplo
<navclass="w3sidenav">
<aclass="w3hoverblack"href="#">Link1</a>
<aclass="w3hovergreen"href="#">Link2</a>
<aclass="w3hoverblue"href="#">Link3</a>
<aclass="w3hoverred"href="#">Link4</a>
</nav>
Tentevocmesmo"
16/26
29/02/2016 W3.CSSnavegaolateral
Link1
Link2
Link3
17/26
29/02/2016 W3.CSSnavegaolateral
Oaumentodacobertura(w3estofamentoetc):
18/26
29/02/2016 W3.CSSnavegaolateral
Link1
Link2
Link3
19/26
29/02/2016 W3.CSSnavegaolateral
Exemplo
<navclass="w3sidenavw3large">
<ahref="#">Link1</a>
<ahref="#">Link2</a>
<ahref="#">Link3</a>
</nav>
Tentevocmesmo"
20/26
29/02/2016 W3.CSSnavegaolateral
21/26
29/02/2016 W3.CSSnavegaolateral
Exemplo
<navclass="w3sidenavw3black"style="width:70px">
<ahref="#"><iclass="fafahomew3xxlarge"></i></a>
<ahref="#"><iclass="fafasearchw3xxlarge"></i></a>
<ahref="#"><iclass="fafaenvelopew3xxlarge"></i></a>
<ahref="#"><iclass="fafaglobew3xxlarge"></i></a>
</nav>
Tentevocmesmo"
Link3
Exemplo
<navclass="w3sidenavw3lightgrey">
<ahref="#">Link1</a>
<ahref="#">Link2</a>
<divclass="w3dropdownhover">
<ahref="#">Dropdown<iclass="fafacaretdown"></i></a>
<divclass="w3dropdowncontentw3whitew3card4">
<ahref="#">Link1</a>
<ahref="#">Link2</a>
22/26
29/02/2016 W3.CSSnavegaolateral
<ahref="#">Link3</a>
</div>
</div>
<ahref="#">Link3</a>
</nav>
Tentevocmesmo"
Nota:Quandoomenususpenso"aberto",olinksuspensarecebeumacordefundo
cinzaparaindicarqueeleestativo.Parasubstituirisso,adicioneumw3pairarcor
classetantoparao"menususpenso"<li>e<a>:
Nota:Usew3suspensocliquesevocpreferir,cliquenolinksuspensoemvezde
pairar:
Link1
Page content..
Link2
ClickontheDropdownlink!
Dropdown
Link3
Exemplo
<navclass="w3sidenavw3lightgrey">
<ahref="#">Link1</a>
<ahref="#">Link2</a>
<divclass="w3dropdownclickw3hovergreen">
<aclass="w3hovergreen"href="#">Dropdown<iclass="fafa
caretdown"></i></a>
<divclass="w3dropdowncontentw3whitew3card4">
<ahref="#">Link1</a>
<ahref="#">Link2</a>
23/26
29/02/2016 W3.CSSnavegaolateral
<ahref="#">Link3</a>
</div>
</div>
<ahref="#">Link3</a>
</nav>
Tentevocmesmo"
animated Sidenav
Usequalquerumdosw3animateaulasadesvanecerse,zoomouslidena
navegaolateral:
Page content..
Clickonthemenuicon()toslideinthesidenavigation.
Exemplo
<navclass="w3sidenavw3animateleft">
Tentevocmesmo"
contedo Sidenav
Adicioneoquequiserdentrodanavegaolateral:
24/26
29/02/2016 W3.CSSnavegaolateral
Menu
Page Content...
Addwhateveryoulikeinsidetheside
navigation.
Home
Projects 8
About
Contact
Loremipsumbox...
Exemplo
<navclass="w3sidenavw3lightgrey"style="width:50%">
<divclass="w3containerw3darkgrey">
<h4>Menu</h4>
</div>
<imgsrc="img_fjords.jpg">
<aclass="w3red"href="#">Home</a>
<ahref="#">Projects
<spanclass="w3tagw3redw3roundw3right">8</span>
25/26
29/02/2016 W3.CSSnavegaolateral
</a>
<ahref="#">About</a>
<ahref="#">Contact</a>
<divclass="w3container">
<divclass="w3borderw3roundw3paddingw3bluegrey">
<spanclass="w3closebtn">x</span>
<p>Loremipsumbox...</p>
</div>
</div>
</nav>
Tentevocmesmo"
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
26/26
29/02/2016 W3.CSSTabs
W3.CSS Tabs
Anterior Prximocaptulo"
Londres
LondresacidadecapitaldaInglaterra.
acidademaispopulosadoReinoUnido,comumareametropolitanademais
de13milhesdehabitantes.
Tabs Tabulaes
Tabssoperfeitosparaaplicaesnicapginadaweb,ouparapginasWebcapaz
deexibirdiferentesassuntos.
Bastacriarmuitoselementoscomomesmonomedaclasse:
Exemplo
<divid="London"class="city">
<h2>London</h2>
<p>LondonisthecapitalcityofEngland.</p>
</div>
<divid="Paris"class="city">
<h2>Paris</h2>
<p>ParisisthecapitalofFrance.</p>
</div>
<divid="Tokyo"class="city">
<h2>Tokyo</h2>
<p>TokyoisthecapitalofJapan.</p>
1/5
29/02/2016 W3.CSSTabs
</div>
Emseguida,adicionealgunsbotesclicveis
paraabrirocontedo(botesnico,
barradenavegao,abarralateral):
Exemplo
<ulclass="w3navbar">
<li><ahref="#"onclick="openCity('London')">London</a></li>
<li><ahref="#"onclick="openCity('Paris')">Paris</a></li>
<li><ahref="#"onclick="openCity('Tokyo')">Tokyo</a></li>
</ul>
EadicionarumJavaScriptparaselecionaroselementos:
Exemplo
openCity("London");
functionopenCity(cityName){
vari;
varx=document.getElementsByClassName("city");
for(i=0;i<x.length;i++){
x[i].style.display="none";
}
document.getElementById(cityName).style.display="block";
}
Tentevocmesmo"
JavaScript Explicado
Emprimeirolugar,chamarOpenCity()paraabrir"London"(id="London).
Emseguida,chamarabertodacidade()comumnomedecidadediferente(id=
"Paris)quandoousurioclicaemumdosbotesdomenu.
AfunoOpenCity()ocultatodososelementos(display="none")comonome
2/5
29/02/2016 W3.CSSTabs
daclasse"dacidade",eexibeoelemento(display="block")comoIDdacidade.
London
LondonisthecapitalcityofEngland.
Sevocquiserdestacaroactualseparador/pginaqueousurioestligado,utilize
JavaScripteadicionarumaclassecorespecficaparaolinkguiaatual.Noexemplo
abaixo,nsadicionamosumaclasse"tablink"paracadalink.Dessaforma,fcilde
obtertodososlinksqueestassociadocomabas,edarolinkabaatualumaclasse
"w3vermelho",paradestaclo:
Exemplo
functionopenCity(evt,cityName){
vari,x,tablinks;
x=document.getElementsByClassName("city");
for(i=0;i<x.length;i++){
x[i].style.display="none";
}
tablinks=document.getElementsByClassName("tablink");
for(i=0;i<x.length;i++){
tablinks[i].classList.remove("w3red");
}
document.getElementById(cityName).style.display="block";
evt.currentTarget.classList.add("w3red");
}
Tentevocmesmo"
Tabs verticais
3/5
29/02/2016 W3.CSSTabs
Menu
London
London
LondonisthecapitalcityofEngland.
Paris
Tokyo ItisthemostpopulouscityintheUnitedKingdom,witha
metropolitanareaofover13millioninhabitants.
Exemplo
<navclass="w3sidenavw3lightgrey"style="width:130px">
<ahref="#"class="tablink"onclick="openCity(event,
'London')">London</a>
<ahref="#"class="tablink"onclick="openCity(event,
'Paris')">Paris</a>
<ahref="#"class="tablink"onclick="openCity(event,
'Tokyo')">Tokyo</a>
</nav>
Tentevocmesmo"
4/5
29/02/2016 W3.CSSTabs
Fade Fade in
Left
LondonisthecapitalcityofEngland.
Right
ItisthemostpopulouscityintheUnitedKingdom,witha
Top
metropolitanareaofover13millioninhabitants.
Bottom
Zoom
Exemplo
<divid="London"class="w3containercityw3animateleft">
<p>LondonisthecapitalcityofEngland.</p>
</div>
Tentevocmesmo"
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
5/5
29/02/2016 W3.CSSPaginao
W3.CSS Paginao
Anterior Prximocaptulo"
W3.CSS paginaes
Sevoctemumsitecommuitaspginas,vocpodequereradicionaralgumtipode
paginaoparacadapgina:
1 2 3 4 5 6 7 8
Paginao Bsico
1 2 3 4 5
Paracriarumapaginaobsica,adicioneow3paginationclasseaumelemento
<ul>:
Exemplo
<ulclass="w3pagination">
<li><ahref="#">1</a></li>
<li><ahref="#">2</a></li>
<li><ahref="#">3</a></li>
<li><ahref="#">4</a></li>
<li><ahref="#">5</a></li>
</ul>
Tentevocmesmo"
1/6
29/02/2016 W3.CSSPaginao
setas de paginao
UseentidadesHTMLouconesdeumabibliotecadeconeparaadicionarsetasde
paginao:
1 2 3 4 5
Exemplo
<ulclass="w3pagination">
<li><ahref="#">«</a></li>
<li><ahref="#">1</a></li>
<li><ahref="#">2</a></li>
<li><ahref="#">3</a></li>
<li><ahref="#">4</a></li>
<li><ahref="#">5</a></li>
<li><ahref="#">»</a></li>
</ul>
Tentevocmesmo"
Useumdosw3corclassesparaindicarqualapginaqueousurioestem:
Exemplo
<ulclass="w3pagination">
<li><ahref="#">«</a></li>
<li><aclass="w3green"href="#">1</a></li>
<li><ahref="#">2</a></li>
<li><ahref="#">3</a></li>
<li><ahref="#">4</a></li>
<li><ahref="#">5</a></li>
2/6
29/02/2016 W3.CSSPaginao
<li><ahref="#">»</a></li>
</ul>
Tentevocmesmo"
Hover Cor
1 2 3 4
Porpadro,quandovocmoveromousesobreoslinksdepaginao,querecebem
umacordefundocinza.Usequalquerumdosw3hovercoraulasparamudaracor
defoco:
Exemplo
<ulclass="w3pagination">
<li><ahref="#"class="w3hoverpurple">«</a></li>
<li><ahref="#"class="w3hovergreen">1</a></li>
<li><ahref="#"class="w3hoverred">2</a></li>
<li><ahref="#"class="w3hoverblue">3</a></li>
<li><ahref="#"class="w3hoverblack">4</a></li>
<li><ahref="#"class="w3hoverorange">»</a></li>
</ul>
Tentevocmesmo"
paginao Dimensionamento
1 2 3 4 5 1 2 3 4 5
Usew3tiny,w3pequena,w3large,w3xlarge,w3XXLargeouw3
XXXLargeaotamanhodapaginao:
3/6
29/02/2016 W3.CSSPaginao
Exemplo
<ulclass="w3paginationw3xlarge">
Tentevocmesmo"
Bordered Paginao
1 2 3 4 5
Adicioneow3borderclasseparacriarumapaginaocombordas:
Exemplo
<ulclass="w3paginationw3border">
Tentevocmesmo"
arredondada Fronteiras
1 2 3 4 5
Adicioneow3roundclasse,prximaw3fronteiraparaasfronteirasarredondados:
Exemplo
<ulclass="w3paginationw3borderw3round">
Tentevocmesmo"
4/6
29/02/2016 W3.CSSPaginao
Paginao centrado
1 2 3 4 5
Paracentralizarapaginao,enroleumelemento<div>comclass="w3center"
emtornode<ul>:
Exemplo
<divclass="w3center">
<ulclass="w3paginationw3xlarge">
...
</ul>
</div>
Tentevocmesmo"
Anterior Prximo
<ulclass="w3paginationw3borderw3round">
<li><ahref="#">❮Previous</a></li>
<li><ahref="#">Next❯</a></li>
</ul>
Tentevocmesmo"
5/6
29/02/2016 W3.CSSPaginao
Exemplo de menu
<ulclass="w3paginationw3border">
<li><ahref="#"class="w3lightgrey">Home</a></li>
<li><ahref="#">Link1</a></li>
<li><ahref="#">Link2</a></li>
<li><ahref="#">Link3</a></li>
</ul>
Tentevocmesmo"
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
6/6
29/02/2016 BaresW3.CSSProgresso
As barras de progresso
Umabarradeprogressopodeserusadaparamostrarquantotempoumusurioest
emumprocesso:
20%
Cliqueemmim
Ow3progresscontainerclassedefineumrecipienteparaabarradeprogresso,eo
w3progressbardefineabarradeprogressoreal(rea"cheio").Definiralargurada
barradeprogressocomapropriedadedelarguraCSS:
Exemplo
<divclass="w3progresscontainer">
<divclass="w3progressbar"style="width:10%"></div>
</div>
Tentevocmesmo"
1/5
29/02/2016 BaresW3.CSSProgresso
100%:
Exemplo
<divclass="w3progresscontainer">
<divclass="w3progressbar"style="width:50%"></div>
</div>
Tentevocmesmo"
MudarsuacorcomqualquerumadasclassesdecorW3.CSS:
Exemplo
<divclass="w3progresscontainerw3lightblue">
<divclass="w3progressbarw3blue"style="width:75%"></div>
</div>
Tentevocmesmo"
2/5
29/02/2016 BaresW3.CSSProgresso
Dica:Useaclassew3centerparamantersempreortulocentrado.Seforomitido,
eleseralinhadoesquerda.
25%
50%
75%
Exemplo
<divclass="w3progresscontainer">
<divid="myBar"class="w3progressbarw3green"
style="width:25%">
<divclass="w3centerw3textwhite">25%</div>
</div>
</div>
Tentevocmesmo"
Cliqueemmim
Exemplo
<divclass="w3progresscontainer">
<divid="myBar"class="w3progressbarw3green"
style="width:1%"></div>
3/5
29/02/2016 BaresW3.CSSProgresso
</div>
<buttonclass="w3btn"onclick="move()">ClickMe</button>
<script>
functionmove(){
varelem=document.getElementById("myBar");
varwidth=1;
varid=setInterval(frame,10);
functionframe(){
if(width>=100){
clearInterval(id);
}else{
width++;
elem.style.width=width+'%';
}
}
}
</script>
Tentevocmesmo"
Exemplo
20%
ClickMe
Tentevocmesmo"
Alinhadoesquerdanortulo:
4/5
29/02/2016 BaresW3.CSSProgresso
Exemplo
20%
ClickMe
Tentevocmesmo"
Rotularforadabarradeprogresso:
Exemplo
20%
ClickMe
Tentevocmesmo"
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
5/5
29/02/2016 W3.CSSTipografia
W3.CSS Tipografia
Anterior Prximocaptulo"
Fcil de ler
pginasW3.CSSsofceisdeler,mesmoparaaspessoascomligeirasdificuldades
deleitura.
Todasasfontesutilizadassofceisfonteslegveis15pxsansserif
Afontepadro(Verdana)temumespaamentomuitoboacarta
Olineespaamentopadro(1.5)tambmmuitobom
Exemplo
<h1>Heading 1 36px</h1>
<h2>Heading 2 30px</h2>
<h3>Heading 3 24px</h3>
<h4>Heading 4 20px</h4>
<h5>Heading 5 18px</h5>
<h6>Heading 6 16px</h6>
Tentevocmesmo"
1/3
29/02/2016 W3.CSSTipografia
Classes fontsize
Osttulosdevemserusados
paraoqueso:ttulos.
ComW3.CSS,tamanhosdefontepodeserdefinidoporclasses:
Exemplo
w3tiny
w3small
w3medium(Default)
w3large
w3xlarge
w3xxlarge
w3xxxlarge
w3jumbo
Tentevocmesmo"
Substituindo as Normas
SubstituindoospadresW3.CSSmuitofcil.
Voctempelomenostrsopessimples:
1.Substituiropadronaseo<head>desuapgina
2.AdicioneseuprprioarquivoCSSapsW3.CSS
3.FaaodownloadealterarocontedodoarquivoW3.CSS
Substituir no <head>
h1{fontsize:64px;}
2/3
29/02/2016 W3.CSSTipografia
h2{fontsize:48px;}
h3{fontsize:36px;}
h4{fontsize:24px;}
h5{fontsize:20px;}
h6{fontsize:18px;}
Tentevocmesmo"
<linkrel="stylesheet"href="http://www.w3schools.com/lib/w3.css">
<linkrel="stylesheet"href="myStyle.css">
mudana W3.CSS
h1{fontsize:36px}h2{fontsize:30px}h3{fontsize:24px}h4{font
size:20px}h5{fontsize:18px}h6{fontsize:16px}
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
3/3
29/02/2016 W3.CSSfontes
W3.CSS fontes
Anterior Prximocaptulo"
W3.CSS fontes
ComW3.CSSextremamentefcildeadicionarfontesaumapginadaweb.
Muitofcildeusar(apenasCSSeHTML)
usoilimitadodebibliotecasdefontesexternas(comooGoogleFonts)
Funcionaemtodososnavegadoresmodernos
Tornaraweblindo!
Exemplo
<html>
<linkrel="stylesheet"href="https://fonts.googleapis.com/css?
family=Tangerine">
<style>
.w3tangerine{
fontfamily:'Tangerine',serif;
}
</style>
<body>
<pclass="w3tangerine">MakingtheWebBeautiful!</p>
</body>
</html>
Tentevocmesmo"
1/2
29/02/2016 W3.CSSfontes
mais Exemplos
Tornar a web!
Exemplo
<linkrel="stylesheet"href="https://fonts.googleapis.com/css?
family=Lobster">
Tentevocmesmo"
Efeitos de fonte
Tornar a web!
Exemplo
<linkrel="stylesheet"href="https://fonts.googleapis.com/css?
family=Roboto&effect=bricksign">
Tentevocmesmo"
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
2/2
29/02/2016 conesW3.CSS
W3.CSS Icons
Anterior(w3css_fonts.asp) Prximocaptulo"(w3css_slideshow
Bibliotecas cone
ComW3.CSSvocpodeusarqualquerbibliotecadeconecomo:
conesimpressionantesFont
conesdoGoogleMateriais
conesBootstrap
usando cones
Parausarumcone,bastaadicionaronomedoconeparaaclassedeumHTML<i>
elemento.
Paracontrolarotamanhodocone,altereapropriedadefontsizedoconeouuseas
classes:
w3tiny
w3small
w3large
w3XXLarge
w3XXXLarge
fafahome
fafabares
1/6
29/02/2016 conesW3.CSS
fafasetaparaaesquerda
fafasetaparaadireita
fafasearch
fafaclose
fafarefresh
fafatrash
fafamacho
fafacar
fafacaminho
fafaplane
Exemplo
<!DOCTYPEhtml>
<html>
<title>W3.CSS</title>
<metaname="viewport"content="width=devicewidth,initial
scale=1">
<linkrel="stylesheet"href="http://www.w3schools.com/lib/w3.css">
<linkrel="stylesheet"
href="http://cdnjs.cloudflare.com/ajax/libs/font
awesome/4.4.0/css/fontawesome.min.css">
2/6
29/02/2016 conesW3.CSS
<body>
<iclass="fafacloud"></i>
<iclass="fafacloudw3large"></i>
<iclass="fafacloudw3xlarge"></i>
<iclass="fafacloudw3xxlarge"></i>
<iclass="fafacloudw3xxxlarge"></i>
<iclass="fafacloudw3textteal"style="fontsize:64px"></i>
</body>
</html>
Tentevocmesmo"(tryit.asp?filename=tryw3css_icons_awesome)
Paraumalistacompletadoscones:Visiteanossarefernciacone
(/icons/default.asp)
casa
casa
Menu
Menu
arrow_back
arrow_forward
Pesquisa
pesquisa
perto
perto
3/6
29/02/2016 conesW3.CSS
refresh
apagar
apagar
pessoa
pessoa
directions_car
local_shipping
local_airport
Exemplo
<!DOCTYPEhtml>
<html>
<title>W3.CSS</title>
<metaname="viewport"content="width=devicewidth,initial
scale=1">
<linkrel="stylesheet"href="http://www.w3schools.com/lib/w3.css">
<linkrel="stylesheet"href="https://fonts.googleapis.com/icon?
family=Material+Icons">
<body>
<iclass="materialicons">cloud</i>
<iclass="materialiconsw3large">cloud</i>
<iclass="materialiconsw3xlarge">cloud</i>
<iclass="materialiconsw3xxlarge">cloud</i>
<iclass="materialiconsw3xxxlarge">cloud</i>
<iclass="materialiconsw3textteal"style="font
size:64px">cloud</i>
</body>
</html>
4/6
29/02/2016 conesW3.CSS
Tentevocmesmo"(tryit.asp?filename=tryw3css_icons_google)
cones Bootstrap
casa
Menuhamburger
arrow_back
arrow_forward
pesquisa
remover
refrescar
lixo
doutilizador
Arquivo
5/6
29/02/2016 conesW3.CSS
impresso
avio
Exemplo
<!DOCTYPEhtml>
<html>
<title>W3.CSS</title>
<metaname="viewport"content="width=devicewidth,initial
scale=1">
<linkrel="stylesheet"href="http://www.w3schools.com/lib/w3.css">
<linkrel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap
.min.css">
<body>
<iclass="glyphiconglyphiconcloud"></i>
<iclass="glyphiconglyphiconcloudw3large"></i>
<iclass="glyphiconglyphiconcloudw3xlarge"></i>
<iclass="glyphiconglyphiconcloudw3xxlarge"></i>
<iclass="glyphiconglyphiconcloudw3xxxlarge"></i>
<iclass="glyphiconglyphiconcloudw3textteal"style="font
size:64px"></i>
</body>
</html>
Tentevocmesmo"(tryit.asp?filename=tryw3css_icons_bootstrap)
Anterior(w3css_fonts.asp) Prximocaptulo"(w3css_slideshow
Copyright19992015(/about/about_copyright.asp)byRefsnesData.AllRights
Reserved.
6/6
29/02/2016 EfeitosW3.CSS
texto da sombra
Aclassew3textshadowprojetadoparatrabalharcomtodasascores:
texto da sombra
texto da sombra
texto da sombra
texto da sombra
Exemplo
<divclass="w3containerw3deeppurple">
<h2class="w3textshadow">TextShadow</h2>
</div>
Tentevocmesmo"
Opacidade do texto
1/3
29/02/2016 EfeitosW3.CSS
Aclassew3opacidadeprojetadoparatrabalharcomtodasascores:
Opacidade do texto
Opacidade do texto
Opacidade do texto
Opacidade do texto
Opacidade do texto
Opacidade do texto
Exemplo
<divclass="w3containerw3deeppurple">
<h2class="w3opacity">TextOpacity</h2>
</div>
Tentevocmesmo"
Efeitos especiais
Combinandoopacidadeenegrito:
2/3
29/02/2016 EfeitosW3.CSS
Opacidade do texto
MisturandoColors:
Amarelo + sombra +
Negrito
Combinandosombra,negritoeopacidade:
Sombra + Opacidade +
Negrito
MisturandoColors:
Amarelo + sombra +
Negrito
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
3/3
29/02/2016 W3.CSSSlideshow
W3.CSS Slideshow
Anterior Prximocaptulo"
Slideshow manual
ExibindoumaapresentaodeslidesmanualcomW3.CSSmuitofcil.
Bastacriarmuitoselementoscomomesmonomedaclasse:
Exemplo
<imgclass="mySlides"src="img_fjords.jpg">
<imgclass="mySlides"src="img_lights.jpg">
<imgclass="mySlides"src="img_mountains.jpg">
<imgclass="mySlides"src="img_forest.jpg">
1/5
29/02/2016 W3.CSSSlideshow
Edoisbotespararolarasimagens:
Exemplo
<aclass="w3btnfloating"onclick="plusDivs(1)">❮</a>
<aclass="w3btnfloating"onclick="plusDivs(+1)">❯</a>
EadicionarumJavaScriptparaselecionarasimagens:
Exemplo
varslideIndex=1;
showDivs(slideIndex);
functionplusDivs(n){
showDivs(slideIndex+=n);
}
functionshowDivs(n){
vari;
varx=document.getElementsByClassName("mySlides");
if(n>x.length){slideIndex=1}
if(n<1){slideIndex=x.length};
for(i=0;i<x.length;i++){
x[i].style.display="none";
}
x[slideIndex1].style.display="block";
}
Tentevocmesmo"
JavaScript Explicado
Primeiro,definaoslideIndexa1.(primeiraimagem)
Emseguida,chamarShowDivs()paravisualizaraprimeiraimagem.
2/5
29/02/2016 W3.CSSSlideshow
QuandoousurioclicaemumdosboteschamarplusDivs().
AfunoplusDivs()subtraiumouadicionaumparaoslideIndex.
OsshowDiv()courosdefuno(display="none")todososelementoscomo
nomedaclasse"mySlides",eexibe(display="bloco"),oelementocomodado
slideIndex.
SeoslideIndexmaiordoqueonmerodeelementos(x.length),oslideIndex
definidocomozero.
SeoslideIndexinferiora1,definidocomoonmerodeelementos(x.length).
Slideshow automtico
Paraexibirumaapresentaodeslidesautomticaaindamaissimples.
VocsprecisadeumpoucodeJavaScriptdiferente:
Exemplo
varslideIndex=0;
carousel();
functioncarousel(){
vari;
varx=document.getElementsByClassName("mySlides");
for(i=0;i<x.length;i++){
x[i].style.display="none";
}
slideIndex++;
if(slideIndex>x.length){slideIndex=1}
x[slideIndex1].style.display="block";
setTimeout(carousel,2000);
}
Tentevocmesmo"
Slides HTML
3/5
29/02/2016 W3.CSSSlideshow
Osslidesnotemqueserimagens.
ElespodemserqualquercontedoHTML:
Exemplo
<divclass="mySlides">
<divclass="w3containerw3orange">
<h1><b>DidYouKnow?</b></h1>
<h1><i>Weplantoselltripstothemooninthe2020s</i></h1>
</div>
Tentevocmesmo"
slides animados
Exemplo
<imgclass="mySlidesw3animatetop"src="img_01.jpg">
<imgclass="mySlidesw3animatebottom"src="img_02.jpg">
<imgclass="mySlidesw3animatetop"src="img_03.jpg">
<imgclass="mySlidesw3animatebottom"src="img_04.jpg">
Tentevocmesmo"
Animao Faded
Exemplo
<imgclass="mySlidesw3animatefading"src="img_01.jpg">
<imgclass="mySlidesw3animatefading"src="img_02.jpg">
<imgclass="mySlidesw3animatefading"src="img_03.jpg">
<imgclass="mySlidesw3animatefading"src="img_04.jpg">
4/5
29/02/2016 W3.CSSSlideshow
Tentevocmesmo"
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
5/5
29/02/2016 EfeitosW3.CSS
texto da sombra
Aclassew3textshadowprojetadoparatrabalharcomtodasascores:
texto da sombra
texto da sombra
texto da sombra
texto da sombra
Exemplo
<divclass="w3containerw3deeppurple">
<h2class="w3textshadow">TextShadow</h2>
</div>
Tentevocmesmo"
Opacidade do texto
1/3
29/02/2016 EfeitosW3.CSS
Aclassew3opacidadeprojetadoparatrabalharcomtodasascores:
Opacidade do texto
Opacidade do texto
Opacidade do texto
Opacidade do texto
Opacidade do texto
Opacidade do texto
Exemplo
<divclass="w3containerw3deeppurple">
<h2class="w3opacity">TextOpacity</h2>
</div>
Tentevocmesmo"
Efeitos especiais
Combinandoopacidadeenegrito:
2/3
29/02/2016 EfeitosW3.CSS
Opacidade do texto
MisturandoColors:
Amarelo + sombra +
Negrito
Combinandosombra,negritoeopacidade:
Sombra + Opacidade +
Negrito
MisturandoColors:
Amarelo + sombra +
Negrito
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
3/3
29/02/2016 W3.CSSModal
W3.CSS Modal
Anterior Prximocaptulo"
W3.CSS Modal
Amodalumajaneladecaixadedilogo/popupqueexibidanotopodapgina
atual:
AbrirModal
Exemplo
<!Trigger/OpentheModal>
<button
onclick="document.getElementById('id01').style.display='block'"
class="w3btn">OpenModal</button>
<!TheModal>
<divid="id01"class="w3modal">
<divclass="w3modalcontent">
<divclass="w3container">
<span
onclick="document.getElementById('id01').style.display='none'"
class="w3closebtn">×</span>
<p>SometextintheModal..</p>
<p>SometextintheModal..</p>
</div>
</div>
</div>
1/7
29/02/2016 W3.CSSModal
Tentevocmesmo"
contedoModalpodeserqualquerelementoHTML(cabealhos,pargrafos,imagens,
etc.)
Abra um Modal
UsequalquerelementoHTMLparaabriromodal.Issomuitasvezesumbotoou
link.
Adicioneoonclickatributoeaponteparaoiddomodal(ID01nonossoexemplo),
usandoomtododocument.getElementById()eespecificarumaidentificaonica
quecorrespondeaobotode"gatilho"(ID01).
Fechando um Modal
Parafecharummodal,adicioneow3closebtnclasseaumelementojuntamente
comumatributoonclickqueapontaparaoiddomodal(ID01).
&vezes(X)umaentidadeHTMLqueoconedeprefernciapara
botesdefecho,emvezdealetra"X".
2/7
29/02/2016 W3.CSSModal
AbrirModalcomContainers
Exemplo
<divid="id01"class="w3modal">
<divclass="w3modalcontent">
<headerclass="w3containerw3teal">
<span
onclick="document.getElementById('id01').style.display='none'"
class="w3closebtn">×</span>
<h2>ModalHeader</h2>
</header>
<divclass="w3container">
<p>Sometext..</p>
<p>Sometext..</p>
</div>
<footerclass="w3containerw3teal">
<p>ModalFooter</p>
</footer>
</div>
</div>
Tentevocmesmo"
AbrirModalcomoumcarto
Exemplo
<divclass="w3modalcontentw3card8">
Tentevocmesmo"
3/7
29/02/2016 W3.CSSModal
Modais animados
Usequalquerumdosw3animadozoom|top|bottom|direito|leftclasses
paradeslizarnamodalapartirdeumadireoespecfica:
Exemplo
<divclass="w3modalcontentw3animatezoom">
<divclass="w3modalcontentw3animatetop">
<divclass="w3modalcontentw3animatebottom">
<divclass="w3modalcontentw3animateleft">
<divclass="w3modalcontentw3animateright">
Tentevocmesmo"
modal imagem
Cliquenaimagemparaexibilaemtamanhoreal:
Exemplo
<imgsrc="img_car.png"
onclick="document.getElementById('modal01').style.display='block'"
>
<divid="modal01"class="w3modal"
onclick="this.style.display='none'">
4/7
29/02/2016 W3.CSSModal
<imgclass="w3modalcontent"src="img_car.png">
</div>
Tentevocmesmo"
5/7
29/02/2016 W3.CSSModal
Exemplo
6/7
29/02/2016 W3.CSSModal
<divclass="w3rowpadding">
<divclass="w3containerw3third">
<imgsrc="img_manarola.png"style="width:100%"
onclick="onClick(this)">
</div>
<divclass="w3containerw3third">
<imgsrc="img_monterosso.png"style="width:100%"
onclick="onClick(this)">
</div>
<divclass="w3containerw3third">
<imgsrc="img_vernazza.png"style="width:100%"
onclick="onClick(this);">
</div>
</div>
<divid="m01"class="w3modal"
onclick="this.style.display='none'">
<imgclass="w3modalcontent"id="img01"style="width:100%">
</div>
<script>
functiononClick(element){
document.getElementById("img01").src=element.src;
document.getElementById("m01").style.display="block";
}
</script>
Tentevocmesmo"
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
7/7
29/02/2016 W3.CSSTooltips
W3.CSS Tooltips
Anterior Prximocaptulo"
Asdicasdeferramentasexibirotexto(ououtrocontedo)quandovocpassao
mousesobreumelementoHTML.
LondresacidadecapitaldaInglaterra.
Ow3dicaclassedefineoelementoHTMLapairarsobre(containersugesto).
Ow3textclassedefineotextodica:
Exemplo
<pclass="w3tooltip">London
<spanclass="w3text">9million</span>
isthecapitalcityofEngland</p>
Tentevocmesmo"
LondresacidadecapitaldaInglaterra.
Ow3dicaclassedefineoelementoHTMLapairarsobre(containersugesto).
Ow3textclassedefineotextodica:
1/5
29/02/2016 W3.CSSTooltips
Exemplo
<pclass="w3tooltip">London
<spanclass="w3textw3tag">9million</span>
isthecapitalcityofEngland</p>
Tentevocmesmo"
Grande Tooltip
Passeomousesobreestaimagemparaveroefeito:
Ow3dicaclassedefineoelementoHTMLapairarsobre(containersugesto).
Ow3textclassedefineotextodica:
<divclass="w3tooltip">
<pclass="w3text">Acarisawheeled,selfpoweredmotorvehicle
usedfortransportation.Mostdefinitionsofthetermspecifythat
carstypicallyhavefourwheels.(Wikipedia)</p>
<imgsrc="img_car.png"alt="Car"style="width:100%">
</div>
2/5
29/02/2016 W3.CSSTooltips
Tentevocmesmo"
<divclass="w3tooltip">
<imgsrc="img_car.png"alt="Car"style="width:100%">
<pclass="w3text">Acarisawheeled,selfpoweredmotorvehicle
usedfortransportation.Mostdefinitionsofthetermspecifythat
carstypicallyhavefourwheels.(Wikipedia)</p>
</div>
Tentevocmesmo"
Dica absoluta
Sevocquiseradicadeferramentaparaapareceremumaposioabsoluta,
posicionarotextodicadeferramenta(w3texto):
Exemplo
<pclass="w3tooltip">LondonisthecapitalcityofEngland.
<spanstyle="position:absolute;left:0;bottom:18px"
class="w3textw3tag">9million</span></p>
Tentevocmesmo"
Colorido Tooltip
Sevocquerumadicadeferramentadecor,useasclassesw3color:
3/5
29/02/2016 W3.CSSTooltips
Exemplo
<spanclass="w3textw3tagw3red">9million</span>
Tentevocmesmo"
Dica arredondada
Sevocquerumadicadeferramentaarredondada,useasclassesw3redondas:
Exemplo
<spanclass="w3textw3tagw3round">9million</span>
Tentevocmesmo"
Dica pequena
Sevocquiserumapequenadicadeferramenta,useaclassew3pequenas:
Exemplo
<spanclass="w3textw3tagw3small">9million</span>
Tentevocmesmo"
Dica minsculo
Sevocquiserumapequenadicadeferramenta,useaclassew3tiny:
4/5
29/02/2016 W3.CSSTooltips
Exemplo
<spanclass="w3textw3tagw3tiny">9million</span>
Tentevocmesmo"
Grande Tooltip
Sevocquiserumagrandedicadeferramenta,useasclassesw3grande:
Exemplo
<spanclass="w3textw3tagw3xlarge">9million</span>
Tentevocmesmo"
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
5/5
29/02/2016 W3.CSSGradeFluid
Grade Responsive
W3.CSSsuportaumagrelhadefluido12responsivocoluna.
Redimensionarapginaparaveroefeito!
1
2
3
4
5
6
7
8
9
10
11
12
Estapartevaiocupar12colunasemumatelapequena,4emumatelademdio
e3emumatelagrande.
Estapartevaiocupar12colunasemumatelapequena,8emumatelademdio
e9emumatelagrande.
1/5
29/02/2016 W3.CSSGradeFluid
1
2
3
4
5
6
7
8
9
10
11
12
Exemplo
<divclass="w3row">
<divclass="w3colm4l3">
<p>
Iwilloccupy12columnsonasmallscreen,4onamedium
screen,and3onalargescreen.
</p>
</div>
<divclass="w3colm8l9">
<p>
Iwilloccupy12columnsonasmallscreen,8onamedium
screen,and9onalargescreen.
</p>
</div>
</div>
Tentevocmesmo"
linhas Responsive
Colunasdevemresidirdentrodeumalinhaasertotalmentesensvel.
2/5
29/02/2016 W3.CSSGradeFluid
Classe Descrio
w3row Defineumrecipientepaddingmenosparacolunas
responsivos.
w3col Defineumacolunacomsubclasses
w3coltemasseguintesclassessub:
m1 Define1de12colunas(largura:08,33%)paratelasmdias
m2 Define2de12colunas(largura:16,66%)paratelasmdias
m3 Define3de12colunas(largura:25,00%)paratelasmdias
m4 Define4de12colunas(largura:33,33%)paratelasmdias
m5m11
m12 Define12de12colunas(largura:100%).Padroparatelas
mdias
3/5
29/02/2016 W3.CSSGradeFluid
l2 Define2de12colunas(largura:16,66%)paraasgrandes
telas
l3 Define3de12colunas(largura:25,00%)paraasgrandes
telas
l4 Define4de12colunas(largura:33,33%)paraasgrandes
telas
l5l11
l12 Define12de12colunas(largura:100%).Padroparatelas
grandes)
Exemplo
<divclass="w3row">
<divclass="w3colm4"><p>m4</p></div>
<divclass="w3colm4"><p>m4</p></div>
<divclass="w3colm4"><p>m4</p></div>
</div>
<divclass="w3row">
<divclass="w3colm3"><p>m3</p></div>
<divclass="w3colm3"><p>m3</p></div>
<divclass="w3colm3"><p>m3</p></div>
<divclass="w3colm3"><p>m3</p></div>
</div>
Tentevocmesmo"
<divclass="w3container">
<divclass="w3row">
<divclass="w3colw3containerm4"><p>m4</p></div>
<divclass="w3colw3containerm4"><p>m4</p></div>
<divclass="w3colw3containerm4"><p>m4</p></div>
</div>
<divclass="w3row">
4/5
29/02/2016 W3.CSSGradeFluid
<divclass="w3colw3containerm3"><p>m3</p></div>
<divclass="w3colw3containerm3"><p>m3</p></div>
<divclass="w3colw3containerm3"><p>m3</p></div>
<divclass="w3colw3containerm3"><p>m3</p></div>
</div>
</div>
Tentevocmesmo"
<divclass="w3row">
<divclass="w3col"style="width:20%"><p>20%</p></div>
<divclass="w3col"style="width:60%"><p>60%</p></div>
<divclass="w3col"style="width:20%"><p>20%</p></div>
</div>
Tentevocmesmo"
<divclass="w3row">
<divclass="w3col"style="width:75px"><p>75px</p></div>
<divclass="w3rest"><p>rest</p></div>
</div>
Tentevocmesmo"
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
5/5
29/02/2016 TemasW3.CSSCor
Temas de cor
ComW3.CSS,fcildepersonalizarsuasaplicaescomtemasdecores.
Exemplo
<!DOCTYPEhtml>
<html>
<metaname="viewport"content="width=devicewidth,initial
scale=1">
<linkrel="stylesheet"href="w3.css">
<linkrel="stylesheet"href="w3themeindigo.css">
Tentevocmesmo"
temas predefinidos
EmaplicaesHTML,vocpodelimitarousodecores,escolhendodiferentesmatizes
decoresprdefinidas:
W3vermelho Tente
w3rosa Tente
w3roxo Tente
w3deeppurple Tente
w3indigo Tente
1/6
29/02/2016 TemasW3.CSSCor
w3blue Tente
w3azulclaro Tente
w3ciano Tente
w3teal Tente
w3verde Tente
w3luzverde Tente
w3lime Tente
w3khaki Tente
w3amarelo Tente
w3mbar Tente
W3laranja Tente
w3deeplaranja Tente
w3azulcinzento Tente
w3brown Tente
w3cinza Tente
w3cinzaescuro Tente
w3preta Tente
w3w3schools Tente
W3Schools
Filmes 2014
Congeladas
Arespostaparaasanimaeseraridculo
2/6
29/02/2016 TemasW3.CSSCor
Os Vingadores
UmenormesucessoparaaMarveleDisney
Tentevocmesmo"
W3Schools
Filmes 2014
Congeladas
Arespostaparaasanimaeseraridculo
Os Vingadores
UmenormesucessoparaaMarveleDisney
Tentevocmesmo"
Temas particulares
3/6
29/02/2016 TemasW3.CSSCor
ComW3.CSS,fcildepersonalizarumaplicativoscomumtemadecoresprivado.
Vocpodeconectarseaumtemaparticularemumatag<link>,ouvocpode
colocarotemaprivadaemumatag<style>:
Exemplo
<style>
.w3theme{
color:#fff!important;backgroundcolor:#3f51b5!important}
.w3themelight{
color:#000!important;backgroundcolor:#e8eaf6!important}
.w3themedark{
color:#fff!important;backgroundcolor:#1a237e!important}
.w3themel5{
color:#000!important;backgroundcolor:#e8eaf6!important}
.w3themel4{
color:#000!important;backgroundcolor:#c5cae9!important}
.w3themel3{
color:#000!important;backgroundcolor:#9fa8da!important}
.w3themel2{
color:#fff!important;backgroundcolor:#7986cb!important}
.w3themel1{
color:#fff!important;backgroundcolor:#5c6bc0!important}
.w3themed1{
color:#fff!important;backgroundcolor:#3949ab!important}
.w3themed2{
color:#fff!important;backgroundcolor:#303f9f!important}
.w3themed3{
color:#fff!important;backgroundcolor:#283593!important}
.w3themed4{
color:#fff!important;backgroundcolor:#1a237e!important}
.w3themeaction{
color:#fff!important;backgroundcolor:#311b92!important}
.w3texttheme{
color:#1a237e!important}
</style>
Tentevocmesmo"
4/6
29/02/2016 TemasW3.CSSCor
adicionando gradientes
Umleitorenviounosestasugesto:Vocpodequererconsideraraadiodeum
gradienteparacadatema.
EuuseiascoresL2eL1dotemaazulparacriarestagradiente:
Exemplo
.w3themegradient{
color:#000!important;
background:webkitlineargradient(top,#64B5F625%,#42A5F575%)}
.w3themegradient{
color:#000!important;
background:mozlineargradient(top,#64B5F625%,#42A5F575%)}
.w3themegradient{
color:#000!important;
background:olineargradient(top,#64B5F625%,#42A5F575%)}
.w3themegradient{
color:#000!important;
background:mslineargradient(top,#64B5F625%,#42A5F575%)}
.w3themegradient{
color:#000!important;
background:lineargradient(top,#64B5F625%,#42A5F575%)}
Tentevocmesmo"
Temas de cor
Aquiestoalgunstemasdecoresparadownloadinspiradopelodesigndemateriais
doGoogle:
Folhadeestilos Descrio
w3theme Temadecoresmbar
amber.css
w3themeblack.css Temadecorespreto
w3themeblue.css Temadecoresazul
5/6
29/02/2016 TemasW3.CSSCor
w3themeblue Temadecorescinzaazul
grey.css
w3theme CorTemaBrown
brown.css
w3themecyan.css CorTemaCyan
w3themedark TemadecoresCinzaescuro
grey.css
w3themedeep Temadecoreslaranjaprofunda
orange.css
w3themedeep CordotemaDeepPurple
purple.css
w3themegreen.css Temadecoresverde
w3themegrey.css TemadecoresCinza
w3theme CordotemaIndigo
indigo.css
w3themekhaki.css Temadecorescqui
w3themelight Temadecoresazulclaro
blue.css
w3themelight Cordotemadaluzverde
green.css
w3themelime.css CorLimeTema
w3theme Temadecoreslaranja
orange.css
w3themepink.css PinkThemecor
w3theme Temadecoresroxo
purple.css
w3themered.css Temadacorvermelha
w3themeteal.css CorTealTema
w3theme Temadecoresamarela
yellow.css
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
6/6
29/02/2016 W3.CSSPaletas
#2196f3 CriarTema
sugestes
Criado Tema
#f6fbffw3themel5
#d2eafdw3themel4
#a6d4faw3themel3
#79bff8w3themel2
#4daaf6w3themel1
#2196f3w3theme
#0c87ebw3themed1
#0b78d1w3themed2
1/9
29/02/2016 W3.CSSPaletas
#0a69b7w3themed3
#085a9dw3themed4
#074b83w3themed5
Tema In Use:
Filmes de 2014
Congeladas
Arespostaparaasanimaeseraridculo.
Star Wars: The Force desperta
AspessoasestosaiuparaonovofilmedeStarWars.
Os Vingadores
UmenormesucessoparaaMarveleDisney.
+
W3Schools2016
CSS gerado:
2/9
29/02/2016 W3.CSSPaletas
.w3texttheme{color:#2196f3!important}
.w3theme{color:#fff!important;backgroundcolor:#2196f3
!important}
.w3themel5{color:#000!important;backgroundcolor:#f6fbff
!important}
.w3themel4{color:#000!important;backgroundcolor:#d2eafd
!important}
.w3themel3{color:#000!important;backgroundcolor:#a6d4fa
!important}
.w3themel2{color:#000!important;backgroundcolor:#79bff8
!important}
.w3themel1{color:#000!important;backgroundcolor:#4daaf6
!important}
.w3themed1{color:#fff!important;backgroundcolor:#0c87eb
!important}
.w3themed2{color:#fff!important;backgroundcolor:#0b78d1
!important}
.w3themed3{color:#fff!important;backgroundcolor:#0a69b7
!important}
.w3themed4{color:#fff!important;backgroundcolor:#085a9d
!important}
.w3themed5{color:#fff!important;backgroundcolor:#074b83
!important}
.w3themelight{color:#000!important;backgroundcolor:#4daaf6
!important}
.w3themedark{color:#fff!important;backgroundcolor:#085a9d
!important}
.w3themeaction{color:#fff!important;backgroundcolor:#074b83
!important}
My Web
Cardpio
Link1
Link2
Link3
3/9
29/02/2016 W3.CSSPaletas
Simplifique
Vazio
Loremipsumdolorsitamet,consecteturadipiscingelit,sednoeiusmodtempor
utincididuntlaboreetdoloremagnaaliqua.Utenimadminimveniam,Quis
nostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.
Reservar
Loremipsumdolorsitamet,consecteturadipiscingelit,sednoeiusmodtempor
utincididuntlaboreetdoloremagnaaliqua.Utenimadminimveniam,Quis
nostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.
encontrado
Loremipsumdolorsitamet,consecteturadipiscingelit,sednoeiusmodtempor
utincididuntlaboreetdoloremagnaaliqua.Utenimadminimveniam,Quis
nostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.
My Web
Cardpio
Link1
Link2
Link3
Simplifique
4/9
29/02/2016 W3.CSSPaletas
Vazio
Loremipsumdolorsitamet,consecteturadipiscingelit,sednoeiusmodtempor
utincididuntlaboreetdoloremagnaaliqua.Utenimadminimveniam,Quis
nostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.
Reservar
Loremipsumdolorsitamet,consecteturadipiscingelit,sednoeiusmodtempor
utincididuntlaboreetdoloremagnaaliqua.Utenimadminimveniam,Quis
nostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.
encontrado
Loremipsumdolorsitamet,consecteturadipiscingelit,sednoeiusmodtempor
utincididuntlaboreetdoloremagnaaliqua.Utenimadminimveniam,Quis
nostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.
My Web
Cardpio
Link1
Link2
Link3
Simplifique
5/9
29/02/2016 W3.CSSPaletas
Vazio
Loremipsumdolorsitamet,consecteturadipiscingelit,sednoeiusmodtempor
utincididuntlaboreetdoloremagnaaliqua.Utenimadminimveniam,Quis
nostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.
Reservar
Loremipsumdolorsitamet,consecteturadipiscingelit,sednoeiusmodtempor
utincididuntlaboreetdoloremagnaaliqua.Utenimadminimveniam,Quis
nostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.
encontrado
Loremipsumdolorsitamet,consecteturadipiscingelit,sednoeiusmodtempor
utincididuntlaboreetdoloremagnaaliqua.Utenimadminimveniam,Quis
nostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.
My Web
Cardpio
Link1
Link2
Link3
Simplifique
Vazio
Loremipsumdolorsitamet,consecteturadipiscingelit,sednoeiusmodtempor
6/9
29/02/2016 W3.CSSPaletas
utincididuntlaboreetdoloremagnaaliqua.Utenimadminimveniam,Quis
nostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.
Reservar
Loremipsumdolorsitamet,consecteturadipiscingelit,sednoeiusmodtempor
utincididuntlaboreetdoloremagnaaliqua.Utenimadminimveniam,Quis
nostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.
encontrado
Loremipsumdolorsitamet,consecteturadipiscingelit,sednoeiusmodtempor
utincididuntlaboreetdoloremagnaaliqua.Utenimadminimveniam,Quis
nostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.
My Web
Cardpio
Link1
Link2
Link3
Simplifique
Vazio
Loremipsumdolorsitamet,consecteturadipiscingelit,sednoeiusmodtempor
utincididuntlaboreetdoloremagnaaliqua.Utenimadminimveniam,Quis
nostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.
7/9
29/02/2016 W3.CSSPaletas
Reservar
Loremipsumdolorsitamet,consecteturadipiscingelit,sednoeiusmodtempor
utincididuntlaboreetdoloremagnaaliqua.Utenimadminimveniam,Quis
nostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.
encontrado
Loremipsumdolorsitamet,consecteturadipiscingelit,sednoeiusmodtempor
utincididuntlaboreetdoloremagnaaliqua.Utenimadminimveniam,Quis
nostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.
Os valores originais
HEX RGB HSL Nome
0% #8a8a8a #000000
5% #848a90 #010e18
10% #7e8b95 #031c30
15% #788b9b #042a49
20% #728ca1 #053861
25% #6c8da7 #064579
30% #678dad #085391
35% #618eb3 #0961aa
40% #5b8eb9 #0a6fc2
45% #558fbe #0b7dda
50% #4f90c4 #0d8bf2
55% #4990ca #2597f4
60% #4391d0 #3da2f5
8/9
29/02/2016 W3.CSSPaletas
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
9/9
29/02/2016 W3.CSSBibliotecasdeCores
Cores de rodovias
NomeCor
(10055)w3estradamarrom
(11086)w3estradavermelho
(12243)w3estradalaranja
(13415)w3estradaschoolbus
(13507)w3estradaamarelo
(14066)w3estradaverde
(15065)w3estradablue
OsnmerosentreparntesessorefernciasaNormaFederal595.
Osvaloreshexadecimaissovaloresaproximadosnooficiaisdestinadosasimularcoresestradaem
HTML.
Exemplo
<divclass="w3tagw3highwaygreen">FalconRidgeParkway</div>
<divclass="w3tagw3highwayschoolbus">SchoolbusStop</div>
Tentevocmesmo BaixeoCSS
Cores de segurana
NomeCor
(11120)w3seguranavermelho
(12300)w3seguranalaranja
(13591)w3amarelosegurana
(14120)w3verdesegurana
1/7
29/02/2016 W3.CSSBibliotecasdeCores
(15092)w3azulsegurana
(17155)w3roxosegurana
OsnmerosentreparntesessorefernciasaNormaFederal595.
Osvaloreshexadecimaissovaloresaproximadosnooficiaisdestinadosparasimularcoresde
seguranaemHTML.
Exemplo
<divclass="w3tagw3safetyred">DANGER</div>
Tentevocmesmo BaixeoCSS
ColorName
(ANA501)w3anablue
(ANA502)w3anainsigniablue
(ANA503)w3anawillowgreen
2/7
29/02/2016 W3.CSSBibliotecasdeCores
(ANA503)w3anaoxygentankgreen
(ANA504)w3anaolivedrab
(ANA505)w3analemonyellow
(ANA506)w3anaorangeyellow
(ANA507)w3anaaircraftcream
(ANA508)w3anainternationalorange
(ANA508)w3anaaircraftorange
(ANA509)w3anainsigniared
(ANA510)w3anamaroon
(ANA511)w3anainsigniawhite
(ANA512)w3anaaircraftgrey
(ANA513)w3anaenginegray
(ANA514)w3anainstrumentblack
(ANA515)w3anablack
(ANA516)w3anastratablue
(ANA516)w3anaaircraftblue
(ANA601)w3anainternationalwhite
(ANA601)w3anaaircraftwhite
(ANA602)w3analightgray
(ANA603)w3anaseagray
(ANA603)w3anagunshipgray
(ANA604)w3anainternationalblack
(ANA604)w3ananavyblack
(ANA605)w3anaaircraftinsigniablue
(ANA606)w3anaaircraftseablue
(ANA607)w3anaseablue
(ANA608)w3ananavyblue
(ANA609)w3anaazureblue
(ANA610)w3ana610
(ANA611)w3anainteriorgreen
(ANA612)w3anagunshipgreen
(ANA614)w3anainternationyellow
(ANA615)w3anatan
3/7
29/02/2016 W3.CSSBibliotecasdeCores
(ANA616)w3anadesertsand
(ANA617)w3anafielddrab
(ANA618)w3anadullred
(ANA619)w3anainternationalred
(ANA619)w3anaaircraftred
(ANA621)w3anainternationalgray
(ANA622)w3anaaircraftblack
(ANA623)w3anatealblue
(ANA625)w3anaseaplanegray
(ANA626)w3ana626
(ANA627)w3anafieldgreen
(ANA628)w3anasierratan
OsnmerosentreparntesessorefernciasaNormaFederal595.
OsvaloreshexadecimaissovaloresaproximadosnooficiaisdestinadosasimularcoresANAemHTML.
Exemplo
<divclass="w3tagw3olivedrab">
<p>LondonisthecapitalcityofEngland.
ItisthemostpopulouscityintheUnitedKingdom,
withametropolitanareaofover13millioninhabitants.</p>
</div>
Tentevocmesmo BaixeoCSS
cores de camuflagem
NomeCor
(30051)w3camomarrom
(30090)w3camovermelho
(33070)w3camooliva
(33105)w3camocampo
(33245)camoterraw3
(33303)w3camoareia
4/7
29/02/2016 W3.CSSBibliotecasdeCores
(33446)w3camotan
(33510)w3camoarenito
(34082)w3camoverdeescuro
(34086)w3camofloresta
(34089)w3camoluzverde
(34094)w3camoverde
(36170)w3camocinzaescuro
(36300)w3camocinzento
(37030)w3camopreto
OsnmerosentreparntesessorefernciasaNormaFederal595.
Osvaloreshexadecimaissovaloresaproximadosnooficiaisdestinadosparasimularcoresde
camuflagememHTML.
Exemplo
<divclass="w3camoearth">CamouflagedTruck</div>
<divclass="w3camogrey">CamouflagedShip</div>
Tentevocmesmo BaixeoCSS
Cores vivas
NomeCor
w3vivasderosa
w3vivasvermelho
w3vivaslaranja
w3vivasamarelo
w3vivasverde
w3vivasblue
w3vivasvioleta
w3vivasroxo
w3vivaspreta
w3vivasbranco
w3vivasamarelorosa
5/7
29/02/2016 W3.CSSBibliotecasdeCores
w3vivaslaranjaavermelhado
w3vivasamareloalaranjado
w3vivasamareloesverdeado
w3vivasamareloverde
w3vivasverdeamarelado
w3vivasverdeazulado
w3vivasazulesverdeado
w3vivasprpuraazul
w3vivasprpuraavermelhada
w3vivasvermelhoarroxeado
Osw3nomessorefernciasaISCCNBS.
Osvaloreshexadecimaissovaloresaproximadosnooficiaisdestinadosparasimularcoresvivasdo
HTML.
Exemplo
<divclass="w3vividred">
<p>LondonisthecapitalcityofEngland.
ItisthemostpopulouscityintheUnitedKingdom,
withametropolitanareaofover13millioninhabitants.</p>
</div>
Tentevocmesmo BaixeoCSS
cores de sinalizao
NomeCor
(1003)w3sinalamarelo
(2010)w3sinallaranja
(3001)w3sinalvermelho
(4008)w3signalvioleta
(5005)w3sinalblue
(6032)w3sinalverde
(7004)w3sinalacinzentado
6/7
29/02/2016 W3.CSSBibliotecasdeCores
(8002)w3sinalbrown
(9003)w3sinalbranco
(9004)w3sinalpreta
OsnmerosentreparntesessorefernciasparaoRALCorpadro.
Osvaloreshexadecimaissovaloresaproximadosnooficiaisdestinadosparasimularcoresde
sinalizaoemHTML.
Exemplo
<divclass="w3tagw3signalred">Stopp</div>
<divclass="w3tagw3signalyellow">Wait</div>
<divclass="w3tagw3signalgreen">Go</div>
Tentevocmesmo BaixeoCSS
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
7/7
29/02/2016 ExemplosW3.CSS
W3.CSS Exemplos
Anterior Prximocaptulo"
Demonstrao VerFonte
W3.CSS jornal
Demonstrao VerFonte
1/4
29/02/2016 ExemplosW3.CSS
W3.CSS Blog
Demonstrao VerFonte
Anncios W3.CSS
Demonstrao VerFonte
Demonstrao VerFonte
mais Exemplos
PhotoAlbumcomtexto programademonstrativo VerFonte
FoneTemaAzul
3/4
29/02/2016 ExemplosW3.CSS
programademonstrativo VerFonte
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
4/4
29/02/2016 ModelosW3.CSS
demo_template_portfolio.htm
<!DOCTYPEhtml>
<Html>
<Title>W3.CSS</title>
<Metaname="viewport"content="width=devicewidth,initialscale=1">
<Linkrel="stylesheet"href="http://www.w3schools.com/lib/w3.css">
<Body>
<Divclass="w3topnavw3largew3verdew3center">
<ahref="#">Portfolio</a>
<ahref="#">Incio</a>
<ahref="#">Sobre</a>
<ahref="#">Galeria</a>
<ahref="#">Contact</a>
</Div>
<Divclass="w3cinzaclarow3containerw3padding64w3marginbottomw3
<H1class="w3jumbo">MinhaPasta</
h1>
<P>Algumtextoquerepresenta"Me"...</p>
</Div>
<Divclass="w3containerw3centerw3marginbottom">
<H3>algunsdosmeustrabalhos</h3><br>
<Divclass="w3rowpreenchimento">
<Divclass="w3trimestre">
<P>Algumtexto..</p>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
</Div>
<Divclass="w3trimestre">
<P>Algumtexto..</p>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
</Div>
<Divclass="w3trimestre">
<P>Algumtexto..</p>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
</Div>
<Divclass="w3trimestre">
<P>Algumtexto..</p>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
</Div>
</Div>
http://www.w3schools.com/w3css/w3css_templates.asp 1/2
29/02/2016 ModelosW3.CSS
<Divclass="w3rowpreenchimento">
<Divclass="w3trimestre">
<P>Algumtexto..</p>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
</Div>
<Divclass="w3trimestre">
<P>Algumtexto..</p>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
</Div>
<Divclass="w3trimestre">
<P>Algumtexto..</p>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
</Div>
<Divclass="w3trimestre">
<P>Algumtexto..</p>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
</Div>
</Div><br>
</Div>
<Classrodap="w3containerw3centerw3green">
<H5>rodap</H5>
<P>informaesrodapvaiaqui</p>
</Footer>
</Body>
</Html>
http://www.w3schools.com/w3css/w3css_templates.asp 2/2
29/02/2016 ModelosW3.CSS
demo_teal.htm
<!DOCTYPEhtml>
<Html>
<Title>DemonstraoW3.CSS</title>
<Metaname="viewport"content="width=devicewidth,initialscale=1">
<Linkrel="stylesheet"href="http://www.w3schools.com/lib/w3.css">
<Linkrel="stylesheet"href="http://www.w3schools.com/lib/w3themeteal.
<Linkrel="stylesheet"href="http://cdnjs.cloudflare.com/ajax/libs/font
<Body>
<!NavigationSide>
<Navclass="w3sidenavw3whitew3card2w3animadoesquerda"style="di
<ahref="javascript:void(0)"onclick="w3_close()"class="w3closenavw3xx
<ahref="javascript:void(0)">Link1</a>
<ahref="javascript:void(0)">Link2</a>
<ahref="javascript:void(0)">ligao3</a>
<ahref="javascript:void(0)">Fazeraligao4</a>
<ahref="javascript:void(0)">Fazeraligao5</a>
</Nav>
<!Cabealho>
<Classheader="w3containerw3themew3preenchimento"id="myHeader">
<Ionclick="w3_open()"class="fafabaresw3xlargew3opennav"></i
<Divclass="w3center">
<H5>BONITASSITESresponsivo</H5>
<H1class="w3animadobottom">CONSTRUDOCOMW3.CSS</h1>
<Divclass="w3padding32">
<ahref="#id01"class="w3btnw3xxlargew3themedark"style="fontwe
</Div>
</Div>
</Header>
<!Modal>
<Divid="ID01"class="w3modal">
<Divclass="modalcontentw3w3card8w3animadotop">
<Classheader="w3containerw3tema">
<ahref=""class="w3closebtn"></a>
<H4>Ohpresso!Nsapenasmostroulheummodal..</h4>
<H5>Porquenspodemos<iclass="fafasorrisoo"></i></H5>
</Header>
<Divclass="w3preenchimento">
<P>Coolhuh?Ok,provocaosuficienteemtorno..</p>
http://www.w3schools.com/w3css/w3css_templates.asp 1/10
29/02/2016 ModelosW3.CSS
<P>Vaonosso<aclass="w3btn"href="/w3css/default.asp">W3.CSS
</Div>
<Classrodap="w3containerw3tema">
<P>Modalrodap</p>
</Footer>
</Div>
</Div>
<Divclass="w3rowpreenchimentow3centerw3margintop">
<Divclass="w3tero">
<Divclass="2cardw3w3paddingtop"style="minheight:460px">
<H4>Responsive</h4><br>
<Iclass="fafadesktopw3margeminferiorw3texttema"style="fonts
<P>Builtincapacidadederesposta</
p>
<P>gradeprimeirofluidomvel</p>
<P>Serveparaqualquertamanhosdetela</p>
<P>TabletPCemobile</p>
</Div>
</Div>
<Divclass="w3tero">
<Divclass="2cardw3w3paddingtop"style="minheight:460px">
<H4>CSSPadro</h4><br>
<Iclass="fafacss3w3margeminferiorw3texttema"style="fontsize
<P>PadroCSSnica</p>
<P>Fcildeaprender</p>
<P>NohnecessidadedejQuery</p>
<P>bibliotecaSemJavaScript</p>
</Div>
</Div>
<Divclass="w3tero">
<Divclass="2cardw3w3paddingtop"style="minheight:460px">
<H4>Design</h4><br>
<Iclass="fafadiamantew3margeminferiorw3texttema"style="font
<P>Papercomooprojeto</p>
<P>Coresfortesesombras</p>
<P>Aigualdadeentreplataformas</p>
<P>Aigualdadeatravsdedispositivos</p>
</Div>
</Div>
</Div>
<Divclass="w3container">
http://www.w3schools.com/w3css/w3css_templates.asp 2/10
29/02/2016 ModelosW3.CSS
<Hr>
<Divclass="w3center">
<H2>Classesdecores</h2>
</Div>
<Divclass="w3fila">
<Divclass="w3colw3containerm2w3red"><p>Red</p></div>
<Divclass="w3colw3containerm2w3blue"><p>Blue</p></div>
<Divclass="w3colw3containerm2w3azulcinzento"><p>BlueCinza</
<Divclass="w3colw3containerm2w3teal"><p>Teal</p></div>
<Divclass="w3colw3containerm2w3amarelo"><p>Yellow</p></div>
<Divclass="w3colw3containerm2w3laranja"><p>Orange</p></div>
</Div>
<Hr>
<Divclass="w3center">
<H2>Builtincapacidadederesposta</
h2>
<Pclass="w3large">redimensionarapginaparaveroefeito!</P>
</Div>
<br>
<Divclass="w3roww3border">
<Divclass="w3meiow3containerw3bluew3border">
<H5>w3metade</H5>
<P>Aclassew3metadeusaametade(50%)dajaneladoecr.</P>
<P>Emtelaspequenas(mximode600pixels)queredimensionaautomatica
</Div>
<Divclass="w3meiow3container">
<H5>w3metade</H5>
</Div>
</Div>
<br>
<Divclass="w3roww3border">
<Divclass="w3terow3containerw3green">
<H5>w3tero</H5>
<P>Ow3deterceiraclasseusaumtero(33,33%)davivatela.</P>
<P>Emtelaspequenas(mximode600pixels)queredimensionaautomatica
</Div>
<Divclass="w3terow3container">
<H5>w3tero</H5>
</Div>
<Divclass="w3terow3container">
<H5>w3tero</H5>
http://www.w3schools.com/w3css/w3css_templates.asp 3/10
29/02/2016 ModelosW3.CSS
</Div>
</Div>
<br>
<Divclass="w3roww3border">
<Divclass="w3trimestrew3containerw3red">
<H5>w3trimestre</H5>
<P>Aclassew3trimestreusaumquarto(25%)dajaneladoecr.</P>
<P>Emtelaspequenas(mximode600pixels)queredimensionaautomatica
</Div>
<Divclass="w3trimestrew3container">
<H5>w3trimestre</H5>
</Div>
<Divclass="w3trimestrew3container">
<H5>w3trimestre</H5>
</Div>
<Divclass="w3trimestrew3container">
<H5>w3trimestre</H5>
</Div>
</Div>
<Divclass="w3center">
<H2>Containers</h2>
<P>Userecipientesparacriarcabealhos,seeserodaps.</P>
</Div>
<Headerclass="w3containerw3azulcinzento">
<H2>Header</h2>
</Header>
<Divclass="w3preenchimentow3branco">
<Spanonclick="this.parentElement.style.display='none'"class="w3te
<H2>Londres</h2>
<P>LondresacidadecapitaldaInglaterra.acidademaispopulosado
comumareametropolitanademaisde13milhesdehabitantes.</p>
<P>DepsobreorioTamisa,Londrestemsidoumgrandepovoadopordois
asuahistriaqueremontasuafundaopelosromanos,quelhechamaram
<P>Apropsito,vocpodeadicionarumconedepertodetodososrecipie
</Div>
<Rodapclass="w3containerw3azulcinzento">
<H5>rodap</H5>
<Pclass="w3opacidade">informaesrodapvaiaqui</p>
</Footer>
http://www.w3schools.com/w3css/w3css_templates.asp 4/10
29/02/2016 ModelosW3.CSS
<Hr>
<Divclass="w3center">
<H2>Temasdecor</h2>
<P>Ostemasdecoresforamprojetadosparatrabalharemharmoniaunscom
</Div>
</Div>
<Divclass="w3rowpreenchimento">
<Divclass="w3metade">
<Divclass="w3cartobranco">
<Divclass="w3containerw3ndigo">
<H3>TemaIndigo</h3>
</Div>
<Divclass="w3container">
<h3class="textow3ndigo">Filmes2014</h3>
</Div>
<Ulclass="w3ulw3bordertop">
<Li>
<H3>Frozen</h3>
<P>Arespostaparaasanimaeseraridculo</p>
</Li>
<Li>
<H3>Afalhaemnossasestrelas</h3>
<P>Tocar,emocionanteerealmentebemfeito</p>
</Li>
<Li>
<H3>OsVingadores</h3>
<P>UmenormesucessoparaaMarveleDisney</p>
</Li>
</Ul>
<Divclass="w3containerw3indigow3xlarge">
<Spanclass="w3right"></span>
</Div>
</Div>
</Div>
<Divclass="w3metade">
<Divclass="w3cartobranco">
<Divclass="w3containerw3tema">
<H3>tema</h3>
</Div>
<Divclass="w3container">
http://www.w3schools.com/w3css/w3css_templates.asp 5/10
29/02/2016 ModelosW3.CSS
<h3class="textow3tema">Filmes2014</h3>
</Div>
<Ulclass="w3ulw3bordertop">
<Li>
<H3>Frozen</h3>
<P>Arespostaparaasanimaeseraridculo</p>
</Li>
<Li>
<H3>Afalhaemnossasestrelas</h3>
<P>Tocar,emocionanteerealmentebemfeito</p>
</Li>
<Li>
<H3>OsVingadores</h3>
<P>UmenormesucessoparaaMarveleDisney</p>
</Li>
</Ul>
<Divclass="w3containerw3themew3xlarge">
<Spanclass="w3right"></span>
</Div>
</Div>
</Div>
</Div>
<Divclass="w3containerw3center">
<Hr>
<H3>PapellikeCartescomsombras</h3>
</Div>
<Divclass="w3rowpreenchimento">
<Divclass="w3tero">
<Divclass="w3card2">
<Imgsrc="img_car.png"alt="Car"style="width:100%">
<Divclass="w3container">
<P>w3card2</p>
</Div>
</Div>
</Div>
<Divclass="w3tero">
<Divclass="w3card4">
<Imgsrc="img_car.png"alt="Car"style="width:100%">
<Divclass="w3container">
<P>w3card4</p>
http://www.w3schools.com/w3css/w3css_templates.asp 6/10
29/02/2016 ModelosW3.CSS
</Div>
</Div>
</Div>
<Divclass="w3tero">
<Divclass="w3card8">
<Imgsrc="img_car.png"alt="Car"style="width:100%">
<Divclass="w3container">
<P>w3card8</p>
</Div>
</Div>
</Div>
</Div>
<Divclass="w3container">
<Hr>
<Divclass="w3center">
<H2>Tabelas</h2>
<Pw3class="w3large">Nosepreocupe.W3.CSScuidadesuastabelas.
</Div>
<Divclass="w3responsivew3card4">
<Class=mesa"mesaw3w3listradow3limitado">
<Thead>
<Trclass="w3tema">
<Th>Nome</th>
<Th>Apelido</th>
<th>Pontos</th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>Jill</td>
<Td>Smith</td>
<Td>50</td>
</Tr>
<Trclass="w3branco">
<Td>Eve</td>
<Td>Jackson</td>
<Td>94</td>
</Tr>
<Tr>
<Td>Adam</td>
<Td>Johnson</td>
<Td>67</td>
http://www.w3schools.com/w3css/w3css_templates.asp 7/10
29/02/2016 ModelosW3.CSS
</Tr>
</Tbody>
</Table>
</Div>
<Hr>
<H2class="w3center">Formulrioselistas</h2>
</Div>
<Divclass="w3rowpreenchimento">
<Divclass="w3metade">
<Classedeformulrio="w3containerw3card4">
<Divclass="w3grupo">
<Inputclass=Tipo"deentradaw3"="text"necessria>
<Classlabel="rtulow3w3validate">Nome</label>
</Div>
<Divclass="w3grupo">
<Inputclass=Tipo"deentradaw3"="text"necessria>
<Classlabel="rtulow3w3validate">Email</label>
</Div>
<Divclass="w3grupo">
<Classtextarea="w3input"></textarea>
<Labelclass="w3label">Assunto</label>
</Div>
<Divclass="w3fila">
<Divclass="w3metade">
<Inputid="leite"class="w3check"type="checkbox"checked="chec
<Classlabel="w3validate">Leite</label>
<br>
<Inputid=class"acar"="w3check"type="checkbox">
<Labelclass="w3validate">Sugar</label>
<br>
<Inputid=classe"limo"="w3check"type="checkbox"desativado>
<Labelclass="w3validate">Lemon(Disabled)</label>
<br>
</Div>
<Divclass="w3metade">
<Inputid=classe"macho"=tipo"w3rdio"="radio"name=value"gn
<Labelclass="w3validate">Masculino</label>
<br>
http://www.w3schools.com/w3css/w3css_templates.asp 8/10
29/02/2016 ModelosW3.CSS
<Inputid="feminino"class=tipo"w3rdio"="radio"name=value"g
<Labelclass="w3validate">Fmea</label>
<br>
<Inputid="desconhecido"class="w3radio"type="radio"name=valu
<Labelclass="w3validate">Nosei(Disabled)</label>
</Div>
</Div>
</Form>
</Div>
<Divclass="w3metade">
<Divclass="w3card4w3container">
<H2>listas</h2>
<Ulclass="w3ul">
<Li>Jill</li>
<Li>Eve</li>
<Li>Adam</li>
</Ul>
<br>
</Div>
</Div>
</Div>
<Divclass="w3container">
<Hr>
<Class="w3center"h2>Navegao</h2>
<Divclass="w3topnavw3largew3tema">
<ahref="javascript:void(0)"><iclass="fafahomew3xlarge"></i></a
<ahref="javascript:void(0)">Link1</a>
<ahref="javascript:void(0)">Link2</a>
<ahref="javascript:void(0)">ligao3</a>
<ahref="javascript:void(0)">Fazeraligao4</a>
</Div>
<Hr>
<H2class="w3center">Botes</h2>
<Divclass="w3center">
<br>
<aclass="w3btn">Boto</a>
<aclass="w3btnw3theme">Boto</a>
<aclass="w3btnw3disabled">Boto</a>
<br>
<aclass="w3btnfloatingw3teal"><iclass="fafaplus"></i></a>
http://www.w3schools.com/w3css/w3css_templates.asp 9/10
29/02/2016 ModelosW3.CSS
<aclass="w3btnfloatingw3disabled"><iclass="fafaplus"></i></a
<aclass="w3btnfloatingw3disabled"><iclass="fafaplus"></i></a
<br>
<aclass="w3btnfloatinglargew3teal"><iclass="fafaplus"></i><
<aclass="w3btnfloatinglargew3disabled"><iclass="fafaplus"></
<aclass="w3btnfloatinglargew3disabled"><iclass="fafaplus"></
</Div>
</Div>
<br>
<!Rodap>
<Rodapclass="w3containerw3themeescuro">
<H3>rodap</h3>
<P>Lembresedeverificaranossa<ahref="w3css_references.asp"class="w
<Divstyle="position:relativebottom:55px"class="w3dicaw3right
<Spanclass="w3textw3temaescuro">GoToTop</span>
<aclass="w3textwhite"href="#myHeader"><spanclass="w3xlarge">
<Iclass="fafachevroncircleup"></i></span></a>
</Div>
</P>
</Footer>
<!Scriptparanavegaolateral>
<Script>
w3_openfunction(){
document.getElementsByClassName("w3sidenav")[0].style.width="100%
document.getElementsByClassName("w3sidenav")[0].style.textAlign="
document.getElementsByClassName("w3sidenav")[0].style.fontSize="5
document.getElementsByClassName("W3sidenav")[0].style.paddingTop=
document.getElementsByClassName("w3sidenav")[0].style.display="bl
}
w3_closefunction(){
document.getElementsByClassName("w3sidenav")[0].style.display="no
}
</Script>
<Scriptsrc="http://www.w3schools.com/lib/w3codecolors.js"></script>
</Body>
</Html>
http://www.w3schools.com/w3css/w3css_templates.asp 10/10
29/02/2016 ModelosW3.CSS
demo_template_portfolio.htm
<!DOCTYPEhtml>
<Html>
<Title>W3.CSS</title>
<Metaname="viewport"content="width=devicewidth,initialscale=1">
<Linkrel="stylesheet"href="http://www.w3schools.com/lib/w3.css">
<Body>
<Divclass="w3topnavw3largew3verdew3center">
<ahref="#">Portfolio</a>
<ahref="#">Incio</a>
<ahref="#">Sobre</a>
<ahref="#">Galeria</a>
<ahref="#">Contact</a>
</Div>
<Divclass="w3cinzaclarow3containerw3padding64w3marginbottomw3
<H1class="w3jumbo">MinhaPasta</
h1>
<P>Algumtextoquerepresenta"Me"...</p>
</Div>
<Divclass="w3containerw3centerw3marginbottom">
<H3>algunsdosmeustrabalhos</h3><br>
<Divclass="w3rowpreenchimento">
<Divclass="w3trimestre">
<P>Algumtexto..</p>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
</Div>
<Divclass="w3trimestre">
<P>Algumtexto..</p>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
</Div>
<Divclass="w3trimestre">
<P>Algumtexto..</p>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
</Div>
<Divclass="w3trimestre">
<P>Algumtexto..</p>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
</Div>
</Div>
http://www.w3schools.com/w3css/w3css_templates.asp 1/2
29/02/2016 ModelosW3.CSS
<Divclass="w3rowpreenchimento">
<Divclass="w3trimestre">
<P>Algumtexto..</p>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
</Div>
<Divclass="w3trimestre">
<P>Algumtexto..</p>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
</Div>
<Divclass="w3trimestre">
<P>Algumtexto..</p>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
</Div>
<Divclass="w3trimestre">
<P>Algumtexto..</p>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
</Div>
</Div><br>
</Div>
<Classrodap="w3containerw3centerw3green">
<H5>rodap</H5>
<P>informaesrodapvaiaqui</p>
</Footer>
</Body>
</Html>
http://www.w3schools.com/w3css/w3css_templates.asp 2/2
29/02/2016 ModelosW3.CSS
demo_template_blog.htm
<!DOCTYPEhtml>
<Html>
<Title>W3.CSS</title>
<Metaname="viewport"content="width=devicewidth,initialscale=1">
<Linkrel="stylesheet"href="http://www.w3schools.com/lib/w3.css">
<Linkrel="stylesheet"href="http://cdnjs.cloudflare.com/ajax/libs/font
<Body>
<Navclass="w3sidenavw3cinzaclaro"style="width:25%">
<Ahref="javascript:void(0)"
onclick="w3_close()"
"W3largew3closenav"class=>Fechar</a>
<ahref="#">class="w3textbluegrey"Incio</a>
<ahref="#">Amigos</a>
<ahref="#"></a>Famlia
<ahref="#">Fotos</a>
</Nav>
<Divid=estilo"main"="marginleft:25%"><!Comeceprincipal>
<Headerclass="w3containerw3azulcinzento">
<Spanclass="w3opennavw3xlarge"onclick="w3_open()"style="displ
<H1>MeuBlog</h1>
</Header>
<Divclass="w3container">
<H6class="w3opacidade">POSTSRECENTES</h6>
<Hr>
<H2>ILoveAlimentar</h2>
<H5><iclass="fafarelgioo"></i>MensagemporJaneDane,27deset
<Pclass="w3pequenas">Tags:<spanclass="w3tagw3pequenaw3red">
<P>Foodaminhapaixo.Loremipsumdolorsitamet,consecteturadipisc
<br>
<H6class="w3opacidade">POSTSRECENTES</h6>
<Hr>
<H2>OfficiallyBlogging</h2>
<H5><iclass="fafarelgioo"></i>MensagemporJohnDoe,24desete
<Pclass="w3pequenas">Tags:<spanclass="w3tagw3pequenaw3green"
<P>Loremipsumdolorsitamet,consecteturadipiscingelit,sedfazereiu
<Hr>
http://www.w3schools.com/w3css/w3css_templates.asp 1/3
29/02/2016 ModelosW3.CSS
<Divclass="w3card2w3container">
<H4>Deixeumcomentrio:</h4>
<Form>
<Class=textareaespaoreservado"w3input"="Digaalgobom.."nec
<br>
<Buttontype="submit"class="seow3w3btnw3green">Enviar</
<br>
</Form>
</Div>
<br>
<P><spanclass="w3emblemaw3black">1</span>Comentrio:</p><br>
<Divclass="w3fila">
<Divclass="w3cols2textcenter">
<Class="imagemw3w3circle"imgsrc="img_avatar.jpg"width="96"
</Div>
<Divclass="w3cols10w3container">
<H4>John<spanclass="w3opacidadew3mdio">29desetembrode201
<P>Mantenhaoexcelentetrabalho!Estoutorcendoporvoc!!Loremip
</Div>
</Div>
</Div>
<Rodapclass="w3containerw3azulcinzento">
<H5>rodap</H5>
<P>informaesrodapvaiaqui</p>
</Footer>
</Div><!Endprincipal>
<Script>
w3_openfunction(){
document.getElementById("main").style.marginLeft="25%"
document.getElementsByClassName("w3sidenav")[0].style.width="25%"
document.getElementsByClassName("w3sidenav")[0].style.display="bloc
document.getElementsByClassName("w3opennav")[0].style.display='none
}
w3_closefunction(){
.Document.getElementById("main")style.marginLeft="0%"
document.getElementsByClassName("w3sidenav")[0].style.display="none
document.getElementsByClassName("w3opennav")[0].style.display="inli
}
http://www.w3schools.com/w3css/w3css_templates.asp 2/3
29/02/2016 ModelosW3.CSS
</Script>
</Body>
http://www.w3schools.com/w3css/w3css_templates.asp 3/3
29/02/2016 ModelosW3.CSS
demo_template_webpage.htm
<!DOCTYPEhtml>
<Html>
<Title>W3.CSS</title>
<Metaname="viewport"content="width=devicewidth,initialscale=1">
<Linkrel="stylesheet"href="http://www.w3schools.com/lib/w3.css">
<Style>
/*Definiraalturadagradedemodoquecolesquerdaedireitapodeser10
.w3row{height:500px}
/*Definaumaalturade100%paraaesquerdaeparaadireitacol*/
.w3col.m2,w3col.m2{height:100%}
/*Emtelaspequenas,ajustedegradedealturapara'auto'*/
tela@mediae(maxwidth:601px){
.w3row{height:auto}
}
</Style>
<Body>
<Divclass="w3topnavw3largew3green">
<ahref="#">Portfolio</a>
<ahref="#">Incio</a>
<ahref="#">Sobre</a>
<ahref="#">Galeria</a>
<ahref="#">Contact</a>
</Div>
<Divclass="w3center">
<Divclass="w3fila">
<Divclass="w3colm2w3cinzaclaro">
<P><ahref="#">Fazeraligao</a></p>
<P><ahref="#">Fazeraligao</a></p>
<P><ahref="#">Fazeraligao</a></p>
</Div>
<Divclass="w3colm8w3container">
<H1>Welcome</h1>
<Pclass="w3justify">Loremipsumdolorsitamet,consecteturadipi
<Hr>
<H3>Test</h3>
<P>Loremipsum...</p>
</Div>
http://www.w3schools.com/w3css/w3css_templates.asp 1/2
29/02/2016 ModelosW3.CSS
<Divclass="w3colm2w3cinzaclarow3preenchimento">
<Divclass="w3card2w3preenchimento">
<P>ADS</p>
</Div><br>
<Divclass="w3card2w3preenchimento">
<P>ADS</p>
</Div>
</Div>
</Div>
</Div>
<Classrodap="w3containerw3green">
<H5>rodap</H5>
<P>informaesrodapvaiaqui</p>
</Footer>
</Body>
</Html>
http://www.w3schools.com/w3css/w3css_templates.asp 2/2
29/02/2016 ModelosW3.CSS
<!DOCTYPEhtml>
<Html>
<Title>W3.CSS</title>
<Metaname="viewport"content="width=devicewidth,initialscale=1">
<Linkrel="stylesheet"href="http://www.w3schools.com/lib/w3.css">
<Classbody="w3cinzaclaro">
<Divclass="w3topnavw3largew3teal">
<ahref="#">Incio</a>
<ahref="#">Mensagens</a>
<ahref="#">MinhaConta</a>
</Div>
<br>
<Divclass="w3containerw3center">
<Divclass="w3fila">
<Divclass="m3w3col">
<Divclass="w3card2w3roundw3branco">
<Divclass="w3container">
<P><ahref="#">Meuperfil</a></p>
<P><imgsrc="img_avatar.jpg"class="w3circle"height="75"width="75"alt="Avatar"></p>
</Div>
</Div>
<br>
<Divclass="w3card2w3roundw3branco">
<Divclass="w3container">
<P><ahref="#">Interesses</a></p>
<P>
<Spanclass="tagw3w3pequenaw3red">Notcias</span>
<Spanclass="w3tagw3pequenaw3blue">W3Schools</span>
<Spanclass="w3tagw3pequenaw3purple">Etiquetas</span>
<Spanclass="w3tagw3pequenaw3green">Jogos</span>
<Spanclass="w3tagw3pequenaw3brown">Friends</span>
<Spanclass="tagw3w3pequenaw3amarelo">famlia</span>
</P>
</Div>
</Div>
<br>
<Divclass="w3containerw3roundw3tealw3marginbottom">
<Spanonclick="this.parentElement.style.display='none'"class="w3closebtn"></span>
<P><strong>Ey!</Strong></p>
<P>Aspessoasestoolhandoparaoseuperfil.Descubraquem.</P>
</Div>
</Div>
<Divclass="m7w3col">
<Divclass="w3rowpreenchimento">
<Divclass="m12w3col">
<Divclass="w3card2w3roundw3branco">
<Divclass="w3containerw3preenchimentow3esquerdaalign">
<Pcontenteditable="true">Status:Sentimentoazul</p>
<Tipoboto="button"class="w3btnw3teal">Como</button>
</Div>
</Div>
</Div>
</Div>
<Divclass="w3rowpreenchimentow3margintop">
<Divclass="m3w3col">
<Divclass="w3card2w3whitew3roundlarge">
<Divclass="w3container">
<P>John</p>
<P><imgsrc="img_avatar.jpg"class="w3imagew3circle"alt="Avatar"width="96"height="96"></p>
</Div>
</Div>
</Div>
<Divclass="M9w3col">
<Divclass="w3card2w3whitew3roundlarge">
http://www.w3schools.com/w3css/w3css_templates.asp 1/3
29/02/2016 ModelosW3.CSS
<Divclass="w3container">
<P>ApenasEsqueceuqueeutinhaquefalaralgumacoisasobrealgumcomalgumsobrecomoeuesquecialgumaco
</Div>
</Div>
</Div>
</Div>
<Divclass="w3rowpreenchimentow3margintop">
<Divclass="m3w3col">
<Divclass="w3card2w3whitew3roundlarge">
<Divclass="w3container">
<P>John</p>
<P><imgsrc="img_avatar.jpg"class="w3imagew3circle"alt="Avatar"width="96"height="96"></p>
</Div>
</Div>
</Div>
<Divclass="M9w3col">
<Divclass="w3card2w3whitew3roundlarge">
<Divclass="w3container">
<P>ApenasEsqueceuqueeutinhaquefalaralgumacoisasobrealgumcomalgumsobrecomoeuesquecialgumaco
</Div>
</Div>
</Div>
</Div>
<Divclass="w3rowpreenchimentow3margintop">
<Divclass="m3w3col">
<Divclass="w3card2w3whitew3roundlarge">
<Divclass="w3container">
<P>John</p>
<P><imgsrc="img_avatar.jpg"class="w3imagew3circle"alt="Avatar"width="96"height="96"></p>
</Div>
</Div>
</Div>
<Divclass="M9w3col">
<Divclass="w3card2w3whitew3roundlarge">
<Divclass="w3container">
<P>ApenasEsqueceuqueeutinhaquefalaralgumacoisasobrealgumcomalgumsobrecomoeuesquecialgumaco
</Div>
</Div>
</Div>
</Div>
<Divclass="w3rowpreenchimentow3margintopw3marginbottom">
<Divclass="m3w3col">
<Divclass="w3card2w3whitew3roundlarge">
<Divclass="w3container">
<P>John</p>
<P><imgsrc="img_avatar.jpg"class="w3imagew3circle"alt="Avatar"width="96"height="96"></p>
</Div>
</Div>
</Div>
<Divclass="M9w3col">
<Divclass="w3card2w3whitew3roundlarge">
<Divclass="w3container">
<P>ApenasEsqueceuqueeutinhaquefalaralgumacoisasobrealgumcomalgumsobrecomoeuesquecialgumaco
</Div>
</Div>
</Div>
</Div>
</Div>
<Divclass="w3colm2">
<Divclass="w3card2w3roundw3branco">
<Divclass="w3container">
<P>PrximosEventos:</p>
<Imgsrc="img_5terre.png"alt="CinqueTerre"style="width:100%">
<P><strong>Itlia</strong></p>
<P>Sextafeira15:00</p>
<P><class=boto"w3btn">Info</button></p>
</Div>
</Div>
<br>
<Divclass="w3card2w3roundw3whitew3padding16">
<P>ADS</p>
http://www.w3schools.com/w3css/w3css_templates.asp 2/3
29/02/2016 ModelosW3.CSS
</Div>
<Divclass="w3card2w3roundw3branco">
<P>ADS</p>
</Div>
</Div>
</Div>
</Div>
<br>
<Classrodap="w3containerw3teal">
<H5>rodap</H5>
<P>informaesrodapvaiaqui</p>
</Footer>
</Body>
</Html>
http://www.w3schools.com/w3css/w3css_templates.asp 3/3
29/02/2016 ModelosW3.CSS
demo_template_marketing.htm
<!DOCTYPEhtml>
<Html>
<Title>W3.CSS</title>
<Metaname="viewport"content="width=devicewidth,initialscale=1">
<Linkrel="stylesheet"href="http://www.w3schools.com/lib/w3.css">
<Body>
<Divclass="w3topnavw3largew3green">
<ahref="#">Logo</a>
<ahref="#">Sobre</a>
<ahref="#">Projetos</a>
<ahref="#">Contact</a>
</Div>
<Divclass="w3cinzaclarow3containerw3padding64w3marginbottomw3
<H1class="w3jumbo">IMAGEM</h1>
<P>Algumtexto..</p>
</Div>
<Divclass="w3containerw3centerw3marginbottom">
<H3>Oquefazemos</h3><br>
<Divclass="w3rowpreenchimento">
<Divclass="w3tero">
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
<P>ProjetoAtual</p>
</Div>
<Divclass="w3tero">
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
<P>Projeto2</p>
</Div>
<Divclass="w3tero">
<Divclass="w3card2w3preenchimento">
<P>Algumtexto..</p>
</Div><br>
<Divclass="w3card2w3preenchimento">
<P>Algumtexto..</p>
</Div>
</Div>
</Div>
<br>
</Div>
http://www.w3schools.com/w3css/w3css_templates.asp 1/2
29/02/2016 ModelosW3.CSS
<Classrodap="w3containerw3centerw3green">
<H5>rodap</H5>
<P>informaesrodapvaiaqui</p>
</Footer>
</Body>
</Html>
http://www.w3schools.com/w3css/w3css_templates.asp 2/2
29/02/2016 ModelosW3.CSS
demo_template_marketing2.htm
<!DOCTYPEhtml>
<Html>
<Title>W3.CSS</title>
<Metaname="viewport"content="width=devicewidth,initialscale=1">
<Linkrel="stylesheet"href="http://www.w3schools.com/lib/w3.css">
<Body>
<Divclass="w3topnavw3largew3cinzaescuro">
<ahref="#">Logo</a>
<ahref="#">Sobre</a>
<ahref="#">Projetos</a>
<ahref="#">Contact</a>
</Div>
<Divclass="w3roww3marginbottom">
<Divclass="m8w3col">
<Divclass="w3cinzaclarow3containerw3padding64w3center">
<H1class="w3jumbo">IMAGEM</h1>
<P>Algumtexto..</p>
</Div>
</Div>
<Divclass="m4w3col">
<Divclass="w3containerw3padding64w3centerw3green">
<H1class="w3jumbo">IM</h1>
<P>Algumtexto..</p>
</Div>
</Div>
</Div>
<Divclass="w3containerw3centerw3marginbottom">
<H3>Oquefazemos</h3><br>
<Divclass="w3rowpreenchimento">
<Divclass="w3trimestre">
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
<P>ProjetoAtual</p>
</Div>
<Divclass="w3trimestre">
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imagemw3"
<P>Projeto2</p>
</Div>
<Divclass="w3trimestre">
http://www.w3schools.com/w3css/w3css_templates.asp 1/3
29/02/2016 ModelosW3.CSS
<Divclass="w3card2w3preenchimento">
<P>Algumtexto..</p>
</Div><br>
<Divclass="w3card2w3preenchimento">
<P>Algumtexto..</p>
</Div>
</Div>
<Divclass="w3trimestre">
<Divclass="w3card2w3preenchimento">
<P>Algumtexto..</p>
</Div><br>
<Divclass="w3card2w3preenchimento">
<P>Algumtexto..</p>
</Div>
</Div>
</Div>
<Hr>
<H3>Parceiros</h3>
<br>
<Divclass="w3rowpreenchimento">
<Divclass="w3colm2">
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imgrespon
<P>Parceiro1</p>
</Div>
<Divclass="w3colm2">
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imgrespon
<P>Parceiro2</p>
</Div>
<Divclass="w3colm2">
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imgrespon
<P>Parceiro3</p>
</Div>
<Divclass="w3colm2">
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imgrespon
<P>Parceiro4</p>
</Div>
<Divclass="w3colm2">
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imgrespon
<P>Parceiro5</p>
</Div>
<Divclass="w3colm2">
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imgrespon
<P>Parceiro6</p>
http://www.w3schools.com/w3css/w3css_templates.asp 2/3
29/02/2016 ModelosW3.CSS
</Div>
</Div>
</Div>
<Classrodap="w3containerw3centerw3green">
<H5>rodap</H5>
<P>informaesrodapvaiaqui</p>
</Footer>
</Body>
</Html>
http://www.w3schools.com/w3css/w3css_templates.asp 3/3
29/02/2016 ModelosW3.CSS
<!DOCTYPEhtml>
<Html>
<Title>W3.CSS</title>
<Metaname="viewport"content="width=devicewidth,initialscale=1">
<Linkrel="stylesheet"href="http://www.w3schools.com/lib/w3.css">
<Style>
/*Definaosidenavalarguratotalquandoatelamenordoque600pixelsdelargura*/
@media(maxwidth:500px){
.w3sidenav{
width:100%importante!
}
}
</Style>
<Body>
<Navclass="w3sidenavw3cinzaclaro"style="width:25%">
<Ahref="javascript:void(0)"
onclick="w3_close()"
"W3paddingrightw3closenavw3largew3direito"class=></a>
<Divclass="w3container">
<H3>Logo</h3>
</Div>
<aclass="w3red"href="#">Painel</a>
<ahref="#">Idade</a>
<ahref="#">Sexo</a>
<ahref="#">Geo</a>
</Nav>
<Divid=estilo"main"="marginleft:25%"><!Comeceprincipal>
<br>
<Divclass="w3rowpreenchimento">
<Divclass="m12w3col">
<Div"w3card4w3containerw3cinzaclaro"class=>
<Spanclass="w3opennavw3xlarge"onclick="w3_open()"style="display:none"></span>
<H3>Painel</h3>
<P>Algumtexto...</p>
</Div>
</Div>
</Div>
<br>
<Divclass="w3rowpreenchimento">
<Divclass="w3trimestre">
<Divclass="w3card2w3cinzaclarow3preenchimento">
<H4>Usurios</h4>
<P>1milho</p>
</Div>
</Div>
<Divclass="w3trimestre">
<Divclass="w3card2w3cinzaclarow3preenchimento">
<H4>Pginas</h4>
<P>100Million</p>
</Div>
</Div>
<Divclass="w3trimestre">
<Divclass="w3card2w3cinzaclarow3preenchimento">
http://www.w3schools.com/w3css/w3css_templates.asp 1/2
29/02/2016 ModelosW3.CSS
<H4>Sesses</h4>
<P>10milhes</p>
</Div>
</Div>
<Divclass="w3trimestre">
<Divclass="w3card2w3cinzaclarow3preenchimento">
<H4>Taxaderejeio</h4>
<P>30%</p>
</Div>
</Div>
</Div>
<br>
<Divclass="w3rowpreenchimento">
<Divclass="w3tero">
<Divclass="w3card2w3cinzaclarow3preenchimento">
<H3>Texto..</h3>
</Div>
</Div>
<Divclass="w3tero">
<Divclass="w3card2w3cinzaclarow3preenchimento">
<H3>Texto..</h3>
</Div>
</Div>
<Divclass="w3tero">
<Divclass="w3card2w3cinzaclarow3preenchimento">
<H3>Texto..</h3>
</Div>
</Div>
</Div>
<br>
<Rodapclass="w3containerw3azulcinzento">
<H5>rodap</H5>
<P>informaesrodapvaiaqui</p>
</Footer>
</Div><!Endprincipal>
<Script>
w3_openfunction(){
document.getElementById("main").style.marginLeft="25%"
document.getElementsByClassName("w3sidenav")[0].style.width="25%"
document.getElementsByClassName("w3sidenav")[0].style.display="bloco"
document.getElementsByClassName("w3opennav")[0].style.display='none'
}
w3_closefunction(){
.Document.getElementById("main")style.marginLeft="0%"
document.getElementsByClassName("w3sidenav")[0].style.display="none"
document.getElementsByClassName("w3opennav")[0].style.display="inlineblock"
}
</Script>
</Body>
</Html>
http://www.w3schools.com/w3css/w3css_templates.asp 2/2
29/02/2016 ModelosW3.CSS
demo_template_store.htm
<!DOCTYPEhtml>
<Html>
<Title>W3.CSS</title>
<Metaname="viewport"content="width=devicewidth,initialscale=1">
<Linkrel="stylesheet"href="http://www.w3schools.com/lib/w3.css">
<Body>
<Divclass="w3cinzaclarow3containerw3padding64w3center">
<H1class="w3jumbo">OnlineStore</h1>
<P>Misso,VissioneValores</p>
</Div>
<Divclass="w3topnavw3largew3centerw3green">
<ahref="#">Incio</a>
Produtos<ahref="#"></a>
Ofertas<ahref="#"></a>
Stores<ahref="#"></a>
<ahref="#">Contact</a>
<aContahref="#"></a>
</Div>
<Divclass="w3containerw3margemw3centerw3marginbottom">
<Divclass="w3rowpreenchimento">
<Divclass="w3tero">
<Divclass="w3card2w3cinzaclarow3preenchimento">
<H3>SEXTAFEIRAPRETADEAL</h3>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imgresp
<P>Comprar50celulareseobterumcartodepresente</p>
</Div>
</Div>
<Divclass="w3tero">
<Divclass="w3card2w3cinzaclarow3preenchimento">
<H3>SEXTAFEIRAPRETADEAL</h3>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imgresp
<P>Comprar50celulareseobterumcartodepresente</p>
</Div>
</Div>
<Divclass="w3tero">
<Divclass="w3card2w3cinzaclarow3preenchimento">
http://www.w3schools.com/w3css/w3css_templates.asp 1/2
29/02/2016 ModelosW3.CSS
<H3>SEXTAFEIRAPRETADEAL</h3>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imgresp
<P>Comprar50celulareseobterumcartodepresente</p>
</Div>
</Div>
</Div>
<br>
<Divclass="w3rowpreenchimento">
<Divclass="w3tero">
<Divclass="w3card2w3cinzaclarow3preenchimento">
<H3>SEXTAFEIRAPRETADEAL</h3>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imgresp
<P>Comprar50celulareseobterumcartodepresente</p>
</Div>
</Div>
<Divclass="w3tero">
<Divclass="w3card2w3cinzaclarow3preenchimento">
<H3>SEXTAFEIRAPRETADEAL</h3>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imgresp
<P>Comprar50celulareseobterumcartodepresente</p>
</Div>
</Div>
<Divclass="w3tero">
<Divclass="w3card2w3cinzaclarow3preenchimento">
<H3>SEXTAFEIRAPRETADEAL</h3>
<Imgsrc="http://placehold.it/150x80?text=IMAGE"class="imgresp
<P>Comprar50celulareseobterumcartodepresente</p>
</Div>
</Div>
</Div>
</Div>
<Classrodap="w3containerw3centerw3green">
<H5>rodap</H5>
<P>informaesrodapvaiaqui</p>
</Footer>
</Body>
</Html>
http://www.w3schools.com/w3css/w3css_templates.asp 2/2
29/02/2016 ModelosW3.CSS
W3.CSS Templates
Anterior Prximocaptulo"
Verafonte.Copiloeuslo.
Black Theme
Demonstrao VerFonte
mais modelos
SiteusandoRedTheme programademonstrativo VerFonte
1/2
29/02/2016 ModelosW3.CSS
Anterior Prximocaptulo"
Copyright19992015byRefsnesData.AllRightsReserved.
2/2