Contenu connexe Similaire à EDTED SP - HTML 5 e CSS 3 - Junho de 2011 (20) Plus de Leonardo Balter (14) EDTED SP - HTML 5 e CSS 3 - Junho de 201111. O HTML 5 é agora e não depois, não perca tempo!
@leobalter
20. <!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
.box { float: left; margin-left: 20px; }
.ie6 .box { margin-left: 10px; }
@leobalter
21. #elemento {
padding-right: 0;
_padding-right: 10px;
}
O melhor hack é não precisar de hacks
<!--[if lt IE 7 ]>
<link href=”ie6.css” />
<![endif]-->
@leobalter
28. Propriedades CSS3
sua página não precisa ser tão quadrada
Leia também: http://goo.gl/9Ijci
http://www.css3.info/preview/
@leobalter
31. Media Queries
Com o media queries seu site vai impressionar
diversas mídias como um camaleão
@leobalter
33. /* Portrait */
@media screen and (orientation:portrait) {
" body { opacity: 1; }
}
/* Landscape */
@media screen and (orientation:landscape) {
" body { opacity: 0; }
}
@leobalter
34. @media screen and (max-device-width: 480px) {
" html, body {
" " -moz-background-size: 80% auto;
" " -webkit-background-size: 80% auto;
" " background-size: 80% auto;
" }
}
@leobalter
38. @font-face {
font-family: 'ActionManRegular';
src: url('Action_Man-webfont.eot');
src: url('Action_Man-webfont.eot?#iefix') format('embedded-opentype'),
url('Action_Man-webfont.woff ') format('woff '),
url('Action_Man-webfont.ttf ') format('truetype'),
url('Action_Man-webfont.svg#ActionManRegular') format('svg');
font-weight: normal;
font-style: normal;
}
http://h5c3.heroku.com/fontface
@leobalter
39. é muito fácil utilizar @font-face mas
temos ferramentas que tornam isso
ainda mais simples
@leobalter
43. Podemos carregar várias fontes juntas pelo Google Web Fonts:
http://fonts.googleapis.com/css?family=Zeyada|Droid+Sans
44. Também podemos carregar só o texto a ser utilizado para
otimizar a nossa performance!
http://fonts.googleapis.com/css?family=Droid+Sans&text=Olá
51. <video preload controls autoplay>
<source src="video.m4v" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
<p>cade seu browser novo?</p>
</video>
@leobalter
64. Já é muito fácil criar animações em HTML 5, por exemplo:
Hype
Hype
65. Já passamos há muito tempo da web 2.0,
estamos na web 8 com HTML 5 e CSS 3