html5 css3 davi ferreira 

html5 / css3 projeto base / links git clone git://github.com/daviferreira/html5 https://gist.github.com/1818034 http://speakerdeck.com/u/daviferreira/ 

html5 / css3 html5? ‣ html5 continua sendo html ‣ simplifica o desenvolvimento ‣ reduz o número de elementos no dom ‣ é semanticamente correto 

html5 / css3 compatibilidade http://code.google.com/p/html5shiv/ document.createElement("section"); somente as versões 8 e 7 do IE não oferecem suporte a HTML5 e CSS3 

html5 / css3 novas tags ‣ ‣ ‣ ‣ ‣ ‣ ‣ ‣ <figure> ‣ <figcaption> ‣ 

html5 / css3 

html5 / css3 

html5 / css3 charset 

html5 / css3 & 

html5 / css3 “

Caldeirão do Huck

apresenta uma introdução ou um grupo de elementos de navegação para um documento 

html5 / css3 “ Home Sobre Contato

• Home
• Sobre
• Contato

define os links de navegação de uma seção 

html5 / css3 “

Caldeirão do Huck

[...] define seções em um documento, tais como capítulos, cabeçalhos e rodapés 

html5 / css3 “

© Copyright 2012 | Contato

html5 / css3 “

Luciano Huck em Salvador!

[...]

um artigo deve fazer sentido quando isolado - deve ser possível distribuí-lo independente do restante do site 

html5 / css3 “ [...]

Links relacionados

[...] representa um conteúdo a parte do conteúdo no qual está inserido - deve estar relacionado aos elementos ao seu redor 

html5 / css3 converter o doctype, html e os elementos do no projeto base Blog | ACME Group exercício 1 

html5 / css3 converter o doctype, html e os elementos do no projeto base Blog | ACME Group exercício 1 solução 

html5 / css3 converter o header para html5 exercício 2 

html5 / css3 converter o header para html5

ACME inc.

Blog oficial

exercício 2 solução 

html5 / css3 converter o menu para html5 exercício 3 

html5 / css3 converter o menu para html5 Home Sobre Arquivo Twitter exercício 3 solução 

html5 / css3 converter o footer para html5 exercício 4 

html5 / css3 converter o footer para html5

ACME inc.

Home Sobre Contato Twitter

© Copyright 2012 ACME inc.

exercício 4 solução 

html5 / css3 converter o div#content para html5 exercício 5 

html5 / css3 converter o div#content para html5

Hello, world!

ACME é uma palavra usada como um substantivo genérico, assim como XPTO. propaganda de bigorna ACME

[...] [...] exercício 5 solução 

html5 / css3 css3 ‣ acaba com hacks ‣ reduz o número de requests (imagens & javascripts) ‣ responsive design 

html5 / css3 -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; border-radius -webkit-border-top-left-radius: 6px; -moz-border-radius-topleft: 6px; border-top-left-radius: 6px; -webkit-border-radius: 6px 0 0 6px; -moz-border-radius: 6px 0 0 6px; border-radius: 6px 0 0 6px; 

html5 / css3 text-shadow: 0px -1px 2px #000; text-shadow offset horizontal offset vertical blur text-shadow: #000 0px -1px 2px; text-shadow: #000 0px -1px 2px, #ccc 2px 1px 3px; 

html5 / css3 box-shadow: inset 3px 3px 4px #ccc; box-shadow offset horizontal offset vertical blur -webkit-box-shadow: 2px 1px 2px #fff, inset 3px 3px 4px #ccc; -moz-box-shadow: 2px 1px 2px #fff, inset 3px 3px 4px #ccc; box-shadow: 2px 1px 2px #fff, inset 0px 3px 3px 4px #ccc; opcional 

html5 / css3 color: #4ca5fe; color: rgba(76, 165, 254, 1); cores & opacidade color: rgba(122, 134, 98, 0.5); color: rgba(122, 134, 98, .3); color: hsla(220, 98.8%, 64.7%, 1); http://mattpatenaude.com opacity: 0.5; opacity: .3; 

html5 / css3 @font-face { font-family: "Aller"; src: url("../fonts/aller.ttf") format("truetype"); } fontes http://webfonts.info/wiki/index.php?title=@font-face_browser_support http://www.fontsquirrel.com/fontface/generator 

html5 / css3 .img:hover { -webkit-transform: scale(1.5) rotate(-10deg); -moz-transform: scale(1.5) rotate(-10deg); -o-transform: scale(1.5) rotate(-10deg); transform: scale(1.5) rotate(-10deg); } transform scale(1.5) rotate(-10deg) skew(-10deg, 20deg) translate(20px, 40px) 

html5 / css3 nav a { -webkit-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -o-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; } nav a:hover { opacity: .6; } transition http://css3.bradshawenterprises.com/transitions/ 

html5 / css3 body { background-color: #4ca5fe; background-image: url(images/fallback-gradient.png); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from (#2F2727), to(#4ca5fe)); background-image: -webkit-linear-gradient(top, #2F2727, #4ca5fe); background-image: -moz-linear-gradient(top, #2F2727, #4ca5fe); background-image: -ms-linear-gradient(top, #2F2727, #4ca5fe); background-image: -o-linear-gradient(top, #2F2727, #4ca5fe); background-image: linear-gradient(top, #2F2727, #4ca5fe); } degradês http://gradients.glrzad.com/ 

html5 / css3 background-color:#d7d4c3; background:url(../image/bg.jpg) no-repeat center top; backgrounds background:url(../image/bg.jpg) no-repeat center top, url (../images/bg2.jpg) repeat center top; 

html5 / css3 @media screen { * { font-family: sans-serif } } @media all and (min-width:500px) { … } @media (min-width:500px) { … } @media screen and (color), projection and (color) { … } media queries 

html5 / css3 adicionar borda arredondada de 4px ao botão de busca e borda arredondada superior direita de 6 px no campo de busca #btn-search{ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } exercício 1 #fld-search{ -webkit-border-radius: 0 6px 0 0; -moz-border-radius: 0 6px 0 0; border-radius: 0 6px 0 0; } 

html5 / css3 adicionar uma sombra aos elementos h1 e h2 com 2px de offset X, 3px de offset Y, 4px de blur e cor #999 h1, h2{ -webkit-text-shadow: 2px 3px 4px #999; -moz-text-shadow: 2px 3px 4px #999; text-shadow: 2px 3px 4px #999; } exercício 2 

html5 / css3 o :hover dos links passam a ter a cor de fundo #000 animar esta propriedade utilizando a transition ease-in-out, com 3 segundos a { -webkit-transition: background-color .3s ease-in-out; -moz-transition: background-color .3s ease-in-out; -o-transition: background-color .3s ease-in-out; transition: background-color .3s ease-in-out; } a:hover { background-color: #000; } exercício 3 -webkit-transition-property:color, background; -webkit-transition-duration: 1s, 1s; -webkit-transition-timing-function: linear, ease-in; 

html5 / css3 no hover da imagem dos posts, utilize a propriedade transform para aumentar a foto em uma escala de 1.3 e girar a foto em 30 graus p.photo img:hover{ -webkit-transform: scale(1.3) rotate(30deg); -moz-transform: scale(1.3) rotate(30deg); transform: scale(1.3) rotate(30deg); } exercício 4 

html5 / css3 utilizando uma media query defina que, para todos os dispositivos com largura máxima de 640px, a fonte dos parágrafos dos elementos deve possuir o tamanho de 18px e as imagens dos elementos deve ser alterada via transform para uma escala de 0.8 @media (max-width:640px) { article p { font-size: 18px; } article img { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); } } exercício 5 

html5 / css3 retrospectiva ‣ html5 é só html ‣ quando e como utilizar as novas tags ‣ simplificação ‣ fim dos hacks ‣ responsive design 

html5 / css3 fim