Html 5 e Css3

2,669 views

Published on

Palestras: HTML5 – A moderna linguagem de marcação / CSS3 – Estilizando a Web do futuro
Palestrante: Leonardo Balter (iLearn/RJ)
Local: Auditório da Faculdade São Lucas

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,669
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
127
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Html 5 e Css3

  1. 1. HTML 5 II Jornada de Sistemas para Internet - FATESM 1sexta-feira, 22 de outubro de 2010
  2. 2. O que é o HTML 5? 2sexta-feira, 22 de outubro de 2010
  3. 3. XML APIs HTML 5 CSS 3 JavaScript 3sexta-feira, 22 de outubro de 2010
  4. 4. Histórico HTML HTML 4 XHTML HTML 5 1990 1997 2000 2010+ 4sexta-feira, 22 de outubro de 2010
  5. 5. w3c e o xhtml 2 <img /> 5sexta-feira, 22 de outubro de 2010
  6. 6. XHTML 2 não é web! 6sexta-feira, 22 de outubro de 2010
  7. 7. XHTML 2 não é web! 7sexta-feira, 22 de outubro de 2010
  8. 8. XHTML 2 não é web! 8sexta-feira, 22 de outubro de 2010
  9. 9. XHTML 2 não é web! 9sexta-feira, 22 de outubro de 2010
  10. 10. XHTML 2 não é web! 10sexta-feira, 22 de outubro de 2010
  11. 11. Grupos de Trabalho HTML WGWHAT WG 11sexta-feira, 22 de outubro de 2010
  12. 12. Princípios básicos Simplicidade Adaptação 12sexta-feira, 22 de outubro de 2010
  13. 13. Enxergar o futuro Compreender o passado Tradição 13sexta-feira, 22 de outubro de 2010
  14. 14. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1- transitional.dtd"> 14sexta-feira, 22 de outubro de 2010
  15. 15. <!DOCTYPE html> 15sexta-feira, 22 de outubro de 2010
  16. 16. <html xmlns="http://www.w3.org/1999/xhtml" lang=”pt-BR”> <html lang=”pt-BR”> 16sexta-feira, 22 de outubro de 2010
  17. 17. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset=utf-8 > 17sexta-feira, 22 de outubro de 2010
  18. 18. - XML + HTML 18sexta-feira, 22 de outubro de 2010
  19. 19. WEB 3.0 19sexta-feira, 22 de outubro de 2010
  20. 20. 20sexta-feira, 22 de outubro de 2010
  21. 21. 21sexta-feira, 22 de outubro de 2010
  22. 22. Quando vai estar pronto? 22sexta-feira, 22 de outubro de 2010
  23. 23. W3C: não utilize HTML 5! Mito ou verdade? 23sexta-feira, 22 de outubro de 2010
  24. 24. Chrome Opera Internet Explorer SafariFirefox 24sexta-feira, 22 de outubro de 2010
  25. 25. CNN Flickr The NewYork Times Time Vimeo Apple Google Youtube Nike Globo.com Facebook Adobe National Geographic Videolog 25sexta-feira, 22 de outubro de 2010
  26. 26. 26sexta-feira, 22 de outubro de 2010
  27. 27. Progressive Enhancement ■ conteúdo e funcionalidades básicas disponível para qualquer browser ■ marcação semântica ■ CSS e JavaScript em arquivos externos e modularizados ■ manter os padrões do browser do usuário 27sexta-feira, 22 de outubro de 2010
  28. 28. Shims, Fallbacks e Polyfills @rem // Remy Sharp http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills http://goo.gl/KQDB 28sexta-feira, 22 de outubro de 2010
  29. 29. Estamos coletando todos os shims, fallbacks e polyfills a fim de implementar a funcionalidade do HTML 5 em browsers que não oferecem suporte ao mesmo. A ideia geral é: nós, desenvolvedores, devemos ser capazes de desenvolver com as APIs do HTML 5 e scripts podem criar os métodos e objetos que precisam existir. Desenvolver nesse modo “a prova de futuro” significa que enquanto os usuários se atualizam, seu código não precisa mudar e assim eles já migram para uma experiência melhor e nativa, através de uma forma limpa. 29sexta-feira, 22 de outubro de 2010
  30. 30. Novos elementos 30sexta-feira, 22 de outubro de 2010
  31. 31. header hgroup section article aside nav footer audiovideo figure ruby progress Elementos estruturais 31sexta-feira, 22 de outubro de 2010
  32. 32. section uma seção genérica do documento div passa a ser somente um bloco qualquer 32sexta-feira, 22 de outubro de 2010
  33. 33. header cabeçalho do documento ou seção footer rodapé do documento ou seção 33sexta-feira, 22 de outubro de 2010
  34. 34. aside conteúdo que não representa o assunto principal do documento ou seção nav seção de navegação 34sexta-feira, 22 de outubro de 2010
  35. 35. article uma seção independente do documento hgroup conjunto de títulos e subtítulos em um cabeçalho 35sexta-feira, 22 de outubro de 2010
  36. 36. video coisa mais linda do mundo audio coisa mais linda do mundo, só que você não vê 36sexta-feira, 22 de outubro de 2010
  37. 37. video elemento contento vídeo nativo, sem utilização de plugin externo audio o mesmo que acima, mas obviamente indica um áudio 37sexta-feira, 22 de outubro de 2010
  38. 38. Mas como funciona essa estrutura? 38sexta-feira, 22 de outubro de 2010
  39. 39. header footer section 39sexta-feira, 22 de outubro de 2010
  40. 40. header footer section#container asidesection#artigos 40sexta-feira, 22 de outubro de 2010
  41. 41. header footer section#container hgroup h1 com título da página h2 com um subtítulo bem legal nav home contato faq docs ul li: section / div pesquisar... 41sexta-feira, 22 de outubro de 2010
  42. 42. header footer section#container asidesection#artigos article article article 42sexta-feira, 22 de outubro de 2010
  43. 43. article h1 com título do artigo header algumas informações nesse rodapé do artigo, sobre o artigo footer algum texto aqui, o próprio conteúdo do artigo 43sexta-feira, 22 de outubro de 2010
  44. 44. H1 no artigo?? E a hierarquia???!?! 44sexta-feira, 22 de outubro de 2010
  45. 45. Nova ordenação hierárquica dos títulos 45sexta-feira, 22 de outubro de 2010
  46. 46. Como fica a marcação? 46sexta-feira, 22 de outubro de 2010
  47. 47. Temos mais elementos? 47sexta-feira, 22 de outubro de 2010
  48. 48. E o que não temos mais? acronym font big frame applet frameset marquee!!! 48sexta-feira, 22 de outubro de 2010
  49. 49. A marcação HTML não define estilização visual 49sexta-feira, 22 de outubro de 2010
  50. 50. O HTML 5 não tem <marquee>! 50sexta-feira, 22 de outubro de 2010
  51. 51. Mais simplicidade 51sexta-feira, 22 de outubro de 2010
  52. 52. <head> e <body> podem ser omitidos... 52sexta-feira, 22 de outubro de 2010
  53. 53. <head> e <body> podem ser omitidos... Mas não faça isso! 52sexta-feira, 22 de outubro de 2010
  54. 54. tags únicas não precisam de / <br /> <br> 53sexta-feira, 22 de outubro de 2010
  55. 55. <script> não precisa mais de declaração de tipo <script type=”text/javascript” src=”script.js”></script> <script src=”script.js”></script> 54sexta-feira, 22 de outubro de 2010
  56. 56. Esqueça os blocos 55sexta-feira, 22 de outubro de 2010
  57. 57. Problema Estrutural 56sexta-feira, 22 de outubro de 2010
  58. 58. É muito simples resolver... 57sexta-feira, 22 de outubro de 2010
  59. 59. Podemos criar elementos “novos” document.createElement(‘article’); article { display: block } 58sexta-feira, 22 de outubro de 2010
  60. 60. <!--[if IE]>   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> <style>   article, aside, figure, footer, header, hgroup,   menu, nav, section { display: block; } </style> 59sexta-feira, 22 de outubro de 2010
  61. 61. As APIs do HTML 5 60sexta-feira, 22 de outubro de 2010
  62. 62. - WebForms 2.0 - Web Storage - Web Sockets - Web Workers - Geolocation -Video & Audio - Canvas & SVG - Aplicações Offline 61sexta-feira, 22 de outubro de 2010
  63. 63. SVG <svg>   <circle id="sol" cx="50%" cy="50%" r="100"     fill="yellow"   /> </svg> 62sexta-feira, 22 de outubro de 2010
  64. 64. SVG <svg>   <circle id="sol" cx="50%" cy="50%" r="100"     fill="yellow"   /> </svg> 62sexta-feira, 22 de outubro de 2010
  65. 65. WebForms 2.0 63sexta-feira, 22 de outubro de 2010
  66. 66. Novos tipos de input email datetime etc range searchnumber 64sexta-feira, 22 de outubro de 2010
  67. 67. Se o browser não reconhece? 65sexta-feira, 22 de outubro de 2010
  68. 68. Novos atributos dos inputs required min / max pattern autofocusautocomplete placeholder 66sexta-feira, 22 de outubro de 2010
  69. 69. <form> <input type=”search” id="q" autofocus required placeholder=”Pesquisar...”> <script> if (!("autofocus" in document.createElement("input"))) { document.getElementById("q").focus(); } </script> <input type="submit" value="Ir"> </form> 67sexta-feira, 22 de outubro de 2010
  70. 70. Validando um form <script> form = document.getElementById(‘f’); if ( form.checkValidity() ) console.log(‘form válido’); </script> 68sexta-feira, 22 de outubro de 2010
  71. 71. Aplicações Off-line <html manifest=”cache.manifest”> 69sexta-feira, 22 de outubro de 2010
  72. 72. CACHE MANIFEST #comentarios e versões CACHE: index.html stylesheet.css imagens/logo.png js/script.js NETWORK: login.php /myapi http://api.twitter.com FALLBACK: /main.php /static.html Arquivos cacheados Arquivos que necessitam de status online Fallback para recurso não disponível 70sexta-feira, 22 de outubro de 2010
  73. 73. var cacheStatus = window.applicationCache.status; window.applicationCache.update(); window.applicationCache.swapCache(); 71sexta-feira, 22 de outubro de 2010
  74. 74. Web Storage Cookies Máximo de 20 Limitados a 4KB Reduzem velocidade da página pois são transferidos via headers do HTTP 72sexta-feira, 22 de outubro de 2010
  75. 75. localStorage sessionStorage domínio de acesso aba/janela aberta 73sexta-feira, 22 de outubro de 2010
  76. 76. localStorage.chave = “valor”; localStorage[‘chave’] = “valor”; sessionStorage.chave = “valor”; sessionStorage[‘chave’] = “valor”; 74sexta-feira, 22 de outubro de 2010
  77. 77. 75sexta-feira, 22 de outubro de 2010
  78. 78. SQL Database 76sexta-feira, 22 de outubro de 2010
  79. 79. var db = openDatabase(“nome”, “versão”); db.transaction(function(tx) { tx.executeSql(“SELECT * FROM tabela”, callbackSucesso, callbackErro); }); 77sexta-feira, 22 de outubro de 2010
  80. 80. 78sexta-feira, 22 de outubro de 2010
  81. 81. Geolocation 79sexta-feira, 22 de outubro de 2010
  82. 82. if (navigator.geolocation) { var geo = navigator.geolocation; geo.getCurrentPosition( function (posicao) { lat = posicao.coords.latitude; lng = posicao.coords.longitude; }); } 80sexta-feira, 22 de outubro de 2010
  83. 83. Web Workers 81sexta-feira, 22 de outubro de 2010
  84. 84. Script principal Worker A Worker B Worker C Worker D 82sexta-feira, 22 de outubro de 2010
  85. 85. Script principal Worker A Worker B Worker C Worker D 82sexta-feira, 22 de outubro de 2010
  86. 86. Script principal Worker A Worker B Worker C Worker D 82sexta-feira, 22 de outubro de 2010
  87. 87. main.js: var worker = new Worker('paralelo.js'); worker.onmessage = function(event) { alert(event.data); }; paralelo.js: self.onmessage = function(event) { // trabalho a ser exeucado em paralelo. self.postMessage(dados); } http://leobalter.net/html5/webworkers.html 83sexta-feira, 22 de outubro de 2010
  88. 88. WebSockets 84sexta-feira, 22 de outubro de 2010
  89. 89. Ajax Uma requisição ao servidor vale para um pedido e uma resposta 85sexta-feira, 22 de outubro de 2010
  90. 90. WebSockets Uma única requisição da pra ficar mandando e recebendo mensagens do servidor o dia todo! 86sexta-feira, 22 de outubro de 2010
  91. 91. var socket = new WebSocket(location); socket.onopen = function(event) { socket.postMessage(“Olá, servidor”); } socket.onmessage = function(event) { alert(event.data); } socket.onclose = function(event) { alert(“Socket fechado”); } 87sexta-feira, 22 de outubro de 2010
  92. 92. http://www.rumpetroll.com/ 88sexta-feira, 22 de outubro de 2010
  93. 93. Canvas 89sexta-feira, 22 de outubro de 2010
  94. 94. <canvas id="myCanvas" width="300" height="300"></canvas> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext('2d'); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect( 10, 10, 55, 50 ); ctx.fillStyle = "rgba(0,0,200, 0.5)"; ctx.fillRect( 30, 30, 55, 50 ); 90sexta-feira, 22 de outubro de 2010
  95. 95. 91sexta-feira, 22 de outubro de 2010
  96. 96. Audio <audio src="sound.mp3" controls></audio> 92sexta-feira, 22 de outubro de 2010
  97. 97. Video 93sexta-feira, 22 de outubro de 2010
  98. 98. <video width="480" height="267" poster="imagemPoster.jpg" controls> <source type="video/mp4" src="video.mp4" /> <source type="video/webm" src="video.webm" /> <source type="video/ogg" src="video.ogv" /> </video> 94sexta-feira, 22 de outubro de 2010
  99. 99. Tipos deVídeo WEBM MP4/h.264 OGV Safari Chrome 5 Firefox 3.5 Opera 10.5 Safari Chrome 5 IE 9 iPhone Android Safari Chrome 6 IE 9 com v8 Firefox 4 Opera 10.6 95sexta-feira, 22 de outubro de 2010
  100. 100. Atributos HTML e JS para <video> loop autoplay controls preload 96sexta-feira, 22 de outubro de 2010
  101. 101. <video src=”exp.mov” controls preload=”false” loop autoplay></video> var vid = document.getElementById('idVideo'); console.log(vid.controls); console.log(vid.preload); console.log(vid.loop); console.log(vid.autoplay); HTML: JS: 97sexta-feira, 22 de outubro de 2010
  102. 102. Controles JS play() / play pause() / pause volume muted currentTime loadeddata ended 98sexta-feira, 22 de outubro de 2010
  103. 103. 99sexta-feira, 22 de outubro de 2010
  104. 104. Como colocar vídeo para funcionar em qualquer browser? 100sexta-feira, 22 de outubro de 2010
  105. 105. <video controls> <source type="video/mp4" src="video.mp4" /> <img src="placeholder.jpg" /> </video> <video controls> <source type="video/mp4" src="video.mp4" /> Esse browser não toca esse vídeo super legal </video> <video controls> <source type="video/mp4" src="video.mp4" /> <object><embed> // Muito flash no meio disso </embed></object> </video> 101sexta-feira, 22 de outubro de 2010
  106. 106. http://www.thewildernessdowntown.com/ 102sexta-feira, 22 de outubro de 2010
  107. 107. CSS 3 103sexta-feira, 22 de outubro de 2010
  108. 108. HTML CSSJavaScript 104sexta-feira, 22 de outubro de 2010
  109. 109. Cascading Style Sheet 105sexta-feira, 22 de outubro de 2010
  110. 110. 1996 106sexta-feira, 22 de outubro de 2010
  111. 111. Usamos o CSS 2.1 107sexta-feira, 22 de outubro de 2010
  112. 112. E um pouco de CSS 3 108sexta-feira, 22 de outubro de 2010
  113. 113. Podemos implementar 100%? 109sexta-feira, 22 de outubro de 2010
  114. 114. 110sexta-feira, 22 de outubro de 2010
  115. 115. 111sexta-feira, 22 de outubro de 2010
  116. 116. html5readiness.com 112sexta-feira, 22 de outubro de 2010
  117. 117. IE 6 IE 7 IE 8 IE 9 Firefox 3.6 Firefox 4 Opera Safari Chrome 0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100% caniuse.com (html5 + css3) 113sexta-feira, 22 de outubro de 2010
  118. 118. IE 6 IE 7 IE 8 IE 9 Firefox 3.6 Firefox 4 Opera Safari Chrome 0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100% caniuse.com (css3) 114sexta-feira, 22 de outubro de 2010
  119. 119. O que temos de novo? 115sexta-feira, 22 de outubro de 2010
  120. 120. Novos seletores 116sexta-feira, 22 de outubro de 2010
  121. 121. tag #id .class 117sexta-feira, 22 de outubro de 2010
  122. 122. tag[atributo=valor] ex.: input[type=text] 118sexta-feira, 22 de outubro de 2010
  123. 123. a[hrefˆ=http] Toda tag “a” com atributo href em que o valor começa com a palavra “http”: 119sexta-feira, 22 de outubro de 2010
  124. 124. a[rel*=nofollow] Toda tag “a” com atributo rel em que nele esteja contido - em qualquer parte - o valor “nofollow”: 120sexta-feira, 22 de outubro de 2010
  125. 125. input[type!=text] inputs que não sejam do tipo texto: 121sexta-feira, 22 de outubro de 2010
  126. 126. .linha:nth-child(even) { background: #dde; } .linha:nth-child(odd) { background: white; } 122sexta-feira, 22 de outubro de 2010
  127. 127. :not(.box) selecionar elementos que não tenham a classe “box” 123sexta-feira, 22 de outubro de 2010
  128. 128. li:first-child li:last-child 124sexta-feira, 22 de outubro de 2010
  129. 129. @font-face 125sexta-feira, 22 de outubro de 2010
  130. 130. Times new Roman é legal mas... 126sexta-feira, 22 de outubro de 2010
  131. 131. Quero um texto assim no meu site... 127sexta-feira, 22 de outubro de 2010
  132. 132. @font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('☺'), url('GraublauWeb.woff') format('woff'), url ('GraublauWeb.ttf') format('truetype'); } @font-face à prova de balas! 128sexta-feira, 22 de outubro de 2010
  133. 133. @font-face Kit Generator http://www.fontsquirrel.com/fontface/generator 129sexta-feira, 22 de outubro de 2010
  134. 134. Google Web Fonts http://code.google.com/webfonts 130sexta-feira, 22 de outubro de 2010
  135. 135. text wrapping 131sexta-feira, 22 de outubro de 2010
  136. 136. p.test {   text-overflow: ellipsis; }    p {  width: 300px;  overflow: hidden;  height: 50px;  white-space: nowrap;  border: 1px solid #000; } 132sexta-feira, 22 de outubro de 2010
  137. 137. Border Radius 133sexta-feira, 22 de outubro de 2010
  138. 138. #elemento { border-radius: 10px; } 134sexta-feira, 22 de outubro de 2010
  139. 139. CSS 3 Mozilla Webkit border-top-right-radius -moz-border-radius-topright -webkit-border-top-right-radius border-bottom-right-radius -moz-border-radius- bottomright -webkit-border-bottom-right- radius border-bottom-left-radius -moz-border-radius-bottomleft -webkit-border-bottom-left- radius border-top-left-radius -moz-border-radius-topleft -webkit-border-top-left-radius border-radius -moz-border-radius -webkit-border-radius 135sexta-feira, 22 de outubro de 2010
  140. 140. border-radius: 10px 10px 10px 10px; A B C D A B C D top-left top-right bottom-right bottom-left A B CD 136sexta-feira, 22 de outubro de 2010
  141. 141. border-radius: 10px 10px; A B A B AB 137sexta-feira, 22 de outubro de 2010
  142. 142. Border Image 138sexta-feira, 22 de outubro de 2010
  143. 143. border-image: url(border.png) 27 27 27 27 round round; border-image: url(border.png) 27 27 27 27 stretch stretch; http://ejohn.org/blog/border-image-in-firefox/ http://www.lrbabe.com/sdoms/borderImage/ 139sexta-feira, 22 de outubro de 2010
  144. 144. Cores 140sexta-feira, 22 de outubro de 2010
  145. 145. RGB HSL color: rgba(100,100,100, 0.5); background-color: rgb(230,230,230); color: hsl(0,100%,50%); background-color: hsla(120, 100%, 50%, 0.6); 141sexta-feira, 22 de outubro de 2010
  146. 146. Box-Shadow 142sexta-feira, 22 de outubro de 2010
  147. 147. #boxshadow {   -webkit-box-shadow: 10px 10px 10px rgba( 0, 0, 0, 0.6 );   -moz-box-shadow: 10px 10px 10px rgba( 0, 0, 0, 0.6 );   box-shadow: 10px 10px 10px rgba( 0, 0, 0, 0.6 ); } 143sexta-feira, 22 de outubro de 2010
  148. 148. box-shadow: 10px 10px 10px rgba( 0, 0, 0, 0.6 ); Distância horizontal Distância vertical “Nitidez” Cores RGB Opacidade 144sexta-feira, 22 de outubro de 2010
  149. 149. Text Shadow text-shadow: 4px 4px 4px rgba( 0, 0, 0, 0.6 ); 145sexta-feira, 22 de outubro de 2010
  150. 150. Reflexos 146sexta-feira, 22 de outubro de 2010
  151. 151. -webkit-box-reflect: pos dist máscara 147sexta-feira, 22 de outubro de 2010
  152. 152. -webkit-box-reflect: below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white)); <img src="http://www.saomateus.edu.br/Images/logo.jpg" /> http://jsbin.com/ufusa4/edit 148sexta-feira, 22 de outubro de 2010
  153. 153. Transforms 149sexta-feira, 22 de outubro de 2010
  154. 154. -webkit-transform: rotateZ(5deg); 150sexta-feira, 22 de outubro de 2010
  155. 155. Gradient 151sexta-feira, 22 de outubro de 2010
  156. 156. -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(white), color-stop(0.5, white), color-stop(0.5, #66cc00)) 152sexta-feira, 22 de outubro de 2010
  157. 157. -webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), to(#000)) 153sexta-feira, 22 de outubro de 2010
  158. 158. background-size 154sexta-feira, 22 de outubro de 2010
  159. 159. background-size:100% auto contain cover 155sexta-feira, 22 de outubro de 2010
  160. 160. Múltiplos Backgrounds 156sexta-feira, 22 de outubro de 2010
  161. 161. background-image:  url(image1.jpg),  url(image2.jpg); background-position:  top left,         bottom right; background-repeat:    no-repeat,       repeat-y; 157sexta-feira, 22 de outubro de 2010
  162. 162. Colunas 158sexta-feira, 22 de outubro de 2010
  163. 163. -webkit-column-count: 2; -webkit-column-rule: 1px solid #bbb; -webkit-column-gap: 2em; -moz-column-count: 2; -moz-column-rule: 1px solid #bbb; -moz-column-gap: 2em; column-count: 2; column-rule: 1px solid #bbb; column-gap: 2em; 159sexta-feira, 22 de outubro de 2010
  164. 164. -webkit-column-count: 2; -webkit-column-rule: 1px solid #bbb; -webkit-column-gap: 2em; -moz-column-count: 2; -moz-column-rule: 1px solid #bbb; -moz-column-gap: 2em; column-count: 2; column-rule: 1px solid #bbb; column-gap: 2em; 159sexta-feira, 22 de outubro de 2010
  165. 165. Transitions 160sexta-feira, 22 de outubro de 2010
  166. 166. 161sexta-feira, 22 de outubro de 2010
  167. 167. 161sexta-feira, 22 de outubro de 2010
  168. 168. 161sexta-feira, 22 de outubro de 2010
  169. 169. 161sexta-feira, 22 de outubro de 2010
  170. 170. #bola {    -webkit-transition: margin-left 1s ease-in-out;    -moz-transition: margin-left 1s ease-in-out;    -o-transition: margin-left 1s ease-in-out;  }  #bola.left {    margin-left: 0;  }  #bola.right {    margin-left: 780px;  } 162sexta-feira, 22 de outubro de 2010
  171. 171. #bola {    -webkit-transition: margin-left 1s ease-in-out;    -moz-transition: margin-left 1s ease-in-out;    -o-transition: margin-left 1s ease-in-out;  }  #bola.left {    margin-left: 0;  }  #bola.right {    margin-left: 780px;  } 162sexta-feira, 22 de outubro de 2010
  172. 172. #bola {    -webkit-transition: margin-left 1s ease-in-out;    -moz-transition: margin-left 1s ease-in-out;    -o-transition: margin-left 1s ease-in-out;  }  #bola.left {    margin-left: 0;  }  #bola.right {    margin-left: 780px;  } 162sexta-feira, 22 de outubro de 2010
  173. 173. Animations 163sexta-feira, 22 de outubro de 2010
  174. 174. @-webkit-keyframes pulse {   from {     font-size: 100%;   }   to {     font-size: 200%;   } } div {   -webkit-animation-name: pulse;   -webkit-animation-duration: 2s;   -webkit-animation-iteration-count: infinite;   -webkit-animation-timing-function: ease-in-out;   -webkit-animation-direction: alternate; } 164sexta-feira, 22 de outubro de 2010
  175. 175. @-webkit-keyframes pulse {   from {     font-size: 100%;   }   to {     font-size: 200%;   } } div {   -webkit-animation-name: pulse;   -webkit-animation-duration: 2s;   -webkit-animation-iteration-count: infinite;   -webkit-animation-timing-function: ease-in-out;   -webkit-animation-direction: alternate; } Pulso 164sexta-feira, 22 de outubro de 2010
  176. 176. http://goo.gl/mc76 165sexta-feira, 22 de outubro de 2010
  177. 177. 166sexta-feira, 22 de outubro de 2010
  178. 178. http://goo.gl/Vnqe 167sexta-feira, 22 de outubro de 2010
  179. 179. Leo Balter @leobalter leo@balter.com.br yayquery.com.br 168sexta-feira, 22 de outubro de 2010

×