• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Html 5 e Css3

on

  • 2,454 views

Palestras: HTML5 – A moderna linguagem de marcação / CSS3 – Estilizando a Web do futuro

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

Statistics

Views

Total Views
2,454
Views on SlideShare
2,452
Embed Views
2

Actions

Likes
4
Downloads
89
Comments
0

1 Embed 2

http://paper.li 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Html 5 e Css3 Html 5 e Css3 Presentation Transcript

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