Mais conteúdo relacionado Semelhante a Realize mais com HTML 5 e CSS 3 - EDTED / RS (20) Mais de Leonardo Balter (13) 1. HTML 5 & CSS 3
16 EDTED - POA
Leo Balter
2. QUEM É @LEOBALTER?
• Pós Graduação de Engenharia de Software
• Frontend na Intervir
• Desconferência
8. •A internet deve interagir com a gente
12. Uma web para todos, onde a comunidade
pode participar abertamente e todos
podem empreender em igualdade. Sem
limitações de sistemas proprietários...
13. O HTML 5 é agora e não depois, não perca tempo!
28. <!--[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
29. <!--[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
30. <!--[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
31. <!--[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
32. <!--[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
33. <!--[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
35. #elemento {
padding-right: 0;
_padding-right: 10px;
}
O melhor hack é não precisar de hacks
@leobalter
36. #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
44. Media Queries
Com o media queries seu site vai
impressionar diversas mídias como
um camaleão
46. /* Portrait */
@media screen and (orientation:portrait) {
" body { opacity: 1; }
}
/* Landscape */
@media screen and (orientation:landscape) {
" body { opacity: 0; }
}
@leobalter
47. /* Portrait */
@media screen and (orientation:portrait) {
" body { opacity: 1; }
}
/* Landscape */
@media screen and (orientation:landscape) {
" body { opacity: 0; }
}
@leobalter
48. /* Portrait */
@media screen and (orientation:portrait) {
" body { opacity: 1; }
}
/* Landscape */
@media screen and (orientation:landscape) {
" body { opacity: 0; }
}
@leobalter
49. /* Portrait */
@media screen and (orientation:portrait) {
" body { opacity: 1; }
}
/* Landscape */
@media screen and (orientation:landscape) {
" body { opacity: 0; }
}
@leobalter
50. @media screen and (max-device-width: 480px) {
" html, body {
" " -moz-background-size: 80% auto;
" " -webkit-background-size: 80% auto;
" " background-size: 80% auto;
" }
}
@leobalter
51. @media screen and (max-device-width: 480px) {
" html, body {
" " -moz-background-size: 80% auto;
" " -webkit-background-size: 80% auto;
" " background-size: 80% auto;
" }
}
@leobalter
52. @media screen and (max-device-width: 480px) {
" html, body {
" " -moz-background-size: 80% auto;
" " -webkit-background-size: 80% auto;
" " background-size: 80% auto;
" }
}
@leobalter
53. @media screen and (max-device-width: 480px) {
" html, body {
" " -moz-background-size: 80% auto;
" " -webkit-background-size: 80% auto;
" " background-size: 80% auto;
" }
}
@leobalter
54. @media screen and (max-device-width: 480px) {
" html, body {
" " -moz-background-size: 80% auto;
" " -webkit-background-size: 80% auto;
" " background-size: 80% auto;
" }
}
@leobalter
57. @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;
}
@leobalter
58. é muito fácil utilizar @font-face mas
temos ferramentas que tornam isso
ainda mais simples
@leobalter
62. Podemos carregar várias fontes juntas pelo Google Web Fonts:
http://fonts.googleapis.com/css?family=Zeyada|Droid+Sans
63. 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á
71. <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
72. <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
73. <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
74. <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
75. <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
76. <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
77. <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
88. Já passamos há muito tempo
da web 2.0, estamos na web 8
com HTML 5 e CSS 3
89. Obrigado!
http://goo.gl/QJpOf
leo@balter.com.br @leobalter
