FL
Carregado porFaculdade São Lucas
1,397 visualizações

Html 5 e Css3

O documento discute o HTML5, sua evolução e novas funcionalidades, como elementos semânticos, API de armazenamento e suporte a áudio e vídeo nativos. Além disso, aborda a importância da compatibilidade com diferentes navegadores e práticas de desenvolvimento como 'progressive enhancement'. Reforça a ideia de que os desenvolvedores devem criar códigos 'a prova de futuro' e apresenta novos elementos e atributos disponíveis no HTML5.

Baixado 191 vezes
1 / 179
2 / 179
3 / 179
4 / 179
5 / 179
6 / 179
7 / 179
8 / 179
9 / 179
10 / 179
11 / 179
12 / 179
13 / 179
14 / 179
15 / 179
16 / 179
17 / 179
18 / 179
19 / 179
20 / 179
21 / 179
22 / 179
23 / 179
24 / 179
25 / 179
26 / 179
27 / 179
28 / 179
29 / 179
30 / 179
31 / 179
32 / 179
33 / 179
34 / 179
35 / 179
36 / 179
37 / 179
38 / 179
39 / 179
40 / 179
41 / 179
42 / 179
43 / 179
44 / 179
45 / 179
46 / 179
47 / 179
48 / 179
49 / 179
50 / 179
51 / 179
52 / 179
53 / 179
54 / 179
55 / 179
56 / 179
57 / 179
58 / 179
59 / 179
60 / 179
61 / 179
62 / 179
63 / 179
64 / 179
65 / 179
66 / 179
67 / 179
68 / 179
69 / 179
70 / 179
71 / 179
72 / 179
73 / 179
74 / 179
75 / 179
76 / 179
77 / 179
78 / 179
79 / 179
80 / 179
81 / 179
82 / 179
83 / 179
84 / 179
85 / 179
86 / 179
87 / 179
88 / 179
89 / 179
90 / 179
91 / 179
92 / 179
93 / 179
94 / 179
95 / 179
96 / 179
97 / 179
98 / 179
99 / 179
100 / 179
101 / 179
102 / 179
103 / 179
104 / 179
105 / 179
106 / 179
107 / 179
108 / 179
109 / 179
110 / 179
111 / 179
112 / 179
113 / 179
114 / 179
115 / 179
116 / 179
117 / 179
118 / 179
119 / 179
120 / 179
121 / 179
122 / 179
123 / 179
124 / 179
125 / 179
126 / 179
127 / 179
128 / 179
129 / 179
130 / 179
131 / 179
132 / 179
133 / 179
134 / 179
135 / 179
136 / 179
137 / 179
138 / 179
139 / 179
140 / 179
141 / 179
142 / 179
143 / 179
144 / 179
145 / 179
146 / 179
147 / 179
148 / 179
149 / 179
150 / 179
151 / 179
152 / 179
153 / 179
154 / 179
155 / 179
156 / 179
157 / 179
158 / 179
159 / 179
160 / 179
161 / 179
162 / 179
163 / 179
164 / 179
165 / 179
166 / 179
167 / 179
168 / 179
169 / 179
170 / 179
171 / 179
172 / 179
173 / 179
174 / 179
175 / 179
176 / 179
177 / 179
178 / 179
179 / 179
HTML 5 II Jornada de Sistemas para Internet - FATESM 1sexta-feira, 22 de outubro de 2010
O que é o HTML 5? 2sexta-feira, 22 de outubro de 2010
XML APIs HTML 5 CSS 3 JavaScript 3sexta-feira, 22 de outubro de 2010
Histórico HTML HTML 4 XHTML HTML 5 1990 1997 2000 2010+ 4sexta-feira, 22 de outubro de 2010
w3c e o xhtml 2 <img /> 5sexta-feira, 22 de outubro de 2010
XHTML 2 não é web! 6sexta-feira, 22 de outubro de 2010
XHTML 2 não é web! 7sexta-feira, 22 de outubro de 2010
XHTML 2 não é web! 8sexta-feira, 22 de outubro de 2010
XHTML 2 não é web! 9sexta-feira, 22 de outubro de 2010
XHTML 2 não é web! 10sexta-feira, 22 de outubro de 2010
Grupos de Trabalho HTML WGWHAT WG 11sexta-feira, 22 de outubro de 2010
Princípios básicos Simplicidade Adaptação 12sexta-feira, 22 de outubro de 2010
Enxergar o futuro Compreender o passado Tradição 13sexta-feira, 22 de outubro de 2010
<!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
<!DOCTYPE html> 15sexta-feira, 22 de outubro de 2010
<html xmlns="http://www.w3.org/1999/xhtml" lang=”pt-BR”> <html lang=”pt-BR”> 16sexta-feira, 22 de outubro de 2010
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset=utf-8 > 17sexta-feira, 22 de outubro de 2010
- XML + HTML 18sexta-feira, 22 de outubro de 2010
WEB 3.0 19sexta-feira, 22 de outubro de 2010
20sexta-feira, 22 de outubro de 2010
21sexta-feira, 22 de outubro de 2010
Quando vai estar pronto? 22sexta-feira, 22 de outubro de 2010
W3C: não utilize HTML 5! Mito ou verdade? 23sexta-feira, 22 de outubro de 2010
Chrome Opera Internet Explorer SafariFirefox 24sexta-feira, 22 de outubro de 2010
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
26sexta-feira, 22 de outubro de 2010
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
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
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
Novos elementos 30sexta-feira, 22 de outubro de 2010
header hgroup section article aside nav footer audiovideo figure ruby progress Elementos estruturais 31sexta-feira, 22 de outubro de 2010
section uma seção genérica do documento div passa a ser somente um bloco qualquer 32sexta-feira, 22 de outubro de 2010
header cabeçalho do documento ou seção footer rodapé do documento ou seção 33sexta-feira, 22 de outubro de 2010
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
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
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
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
Mas como funciona essa estrutura? 38sexta-feira, 22 de outubro de 2010
header footer section 39sexta-feira, 22 de outubro de 2010
header footer section#container asidesection#artigos 40sexta-feira, 22 de outubro de 2010
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
header footer section#container asidesection#artigos article article article 42sexta-feira, 22 de outubro de 2010
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
H1 no artigo?? E a hierarquia???!?! 44sexta-feira, 22 de outubro de 2010
Nova ordenação hierárquica dos títulos 45sexta-feira, 22 de outubro de 2010
Como fica a marcação? 46sexta-feira, 22 de outubro de 2010
Temos mais elementos? 47sexta-feira, 22 de outubro de 2010
E o que não temos mais? acronym font big frame applet frameset marquee!!! 48sexta-feira, 22 de outubro de 2010
A marcação HTML não define estilização visual 49sexta-feira, 22 de outubro de 2010
O HTML 5 não tem <marquee>! 50sexta-feira, 22 de outubro de 2010
Mais simplicidade 51sexta-feira, 22 de outubro de 2010
<head> e <body> podem ser omitidos... 52sexta-feira, 22 de outubro de 2010
<head> e <body> podem ser omitidos... Mas não faça isso! 52sexta-feira, 22 de outubro de 2010
tags únicas não precisam de / <br /> <br> 53sexta-feira, 22 de outubro de 2010
<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
Esqueça os blocos 55sexta-feira, 22 de outubro de 2010
Problema Estrutural 56sexta-feira, 22 de outubro de 2010
É muito simples resolver... 57sexta-feira, 22 de outubro de 2010
Podemos criar elementos “novos” document.createElement(‘article’); article { display: block } 58sexta-feira, 22 de outubro de 2010
<!--[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
As APIs do HTML 5 60sexta-feira, 22 de outubro de 2010
- WebForms 2.0 - Web Storage - Web Sockets - Web Workers - Geolocation -Video & Audio - Canvas & SVG - Aplicações Offline 61sexta-feira, 22 de outubro de 2010
SVG <svg>   <circle id="sol" cx="50%" cy="50%" r="100"     fill="yellow"   /> </svg> 62sexta-feira, 22 de outubro de 2010
SVG <svg>   <circle id="sol" cx="50%" cy="50%" r="100"     fill="yellow"   /> </svg> 62sexta-feira, 22 de outubro de 2010
WebForms 2.0 63sexta-feira, 22 de outubro de 2010
Novos tipos de input email datetime etc range searchnumber 64sexta-feira, 22 de outubro de 2010
Se o browser não reconhece? 65sexta-feira, 22 de outubro de 2010
Novos atributos dos inputs required min / max pattern autofocusautocomplete placeholder 66sexta-feira, 22 de outubro de 2010
<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
Validando um form <script> form = document.getElementById(‘f’); if ( form.checkValidity() ) console.log(‘form válido’); </script> 68sexta-feira, 22 de outubro de 2010
Aplicações Off-line <html manifest=”cache.manifest”> 69sexta-feira, 22 de outubro de 2010
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
var cacheStatus = window.applicationCache.status; window.applicationCache.update(); window.applicationCache.swapCache(); 71sexta-feira, 22 de outubro de 2010
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
localStorage sessionStorage domínio de acesso aba/janela aberta 73sexta-feira, 22 de outubro de 2010
localStorage.chave = “valor”; localStorage[‘chave’] = “valor”; sessionStorage.chave = “valor”; sessionStorage[‘chave’] = “valor”; 74sexta-feira, 22 de outubro de 2010
75sexta-feira, 22 de outubro de 2010
SQL Database 76sexta-feira, 22 de outubro de 2010
var db = openDatabase(“nome”, “versão”); db.transaction(function(tx) { tx.executeSql(“SELECT * FROM tabela”, callbackSucesso, callbackErro); }); 77sexta-feira, 22 de outubro de 2010
78sexta-feira, 22 de outubro de 2010
Geolocation 79sexta-feira, 22 de outubro de 2010
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
Web Workers 81sexta-feira, 22 de outubro de 2010
Script principal Worker A Worker B Worker C Worker D 82sexta-feira, 22 de outubro de 2010
Script principal Worker A Worker B Worker C Worker D 82sexta-feira, 22 de outubro de 2010
Script principal Worker A Worker B Worker C Worker D 82sexta-feira, 22 de outubro de 2010
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
WebSockets 84sexta-feira, 22 de outubro de 2010
Ajax Uma requisição ao servidor vale para um pedido e uma resposta 85sexta-feira, 22 de outubro de 2010
WebSockets Uma única requisição da pra ficar mandando e recebendo mensagens do servidor o dia todo! 86sexta-feira, 22 de outubro de 2010
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
http://www.rumpetroll.com/ 88sexta-feira, 22 de outubro de 2010
Canvas 89sexta-feira, 22 de outubro de 2010
<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
91sexta-feira, 22 de outubro de 2010
Audio <audio src="sound.mp3" controls></audio> 92sexta-feira, 22 de outubro de 2010
Video 93sexta-feira, 22 de outubro de 2010
<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
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
Atributos HTML e JS para <video> loop autoplay controls preload 96sexta-feira, 22 de outubro de 2010
<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
Controles JS play() / play pause() / pause volume muted currentTime loadeddata ended 98sexta-feira, 22 de outubro de 2010
99sexta-feira, 22 de outubro de 2010
Como colocar vídeo para funcionar em qualquer browser? 100sexta-feira, 22 de outubro de 2010
<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
http://www.thewildernessdowntown.com/ 102sexta-feira, 22 de outubro de 2010
CSS 3 103sexta-feira, 22 de outubro de 2010
HTML CSSJavaScript 104sexta-feira, 22 de outubro de 2010
Cascading Style Sheet 105sexta-feira, 22 de outubro de 2010
1996 106sexta-feira, 22 de outubro de 2010
Usamos o CSS 2.1 107sexta-feira, 22 de outubro de 2010
E um pouco de CSS 3 108sexta-feira, 22 de outubro de 2010
Podemos implementar 100%? 109sexta-feira, 22 de outubro de 2010
110sexta-feira, 22 de outubro de 2010
111sexta-feira, 22 de outubro de 2010
html5readiness.com 112sexta-feira, 22 de outubro de 2010
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
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
O que temos de novo? 115sexta-feira, 22 de outubro de 2010
Novos seletores 116sexta-feira, 22 de outubro de 2010
tag #id .class 117sexta-feira, 22 de outubro de 2010
tag[atributo=valor] ex.: input[type=text] 118sexta-feira, 22 de outubro de 2010
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
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
input[type!=text] inputs que não sejam do tipo texto: 121sexta-feira, 22 de outubro de 2010
.linha:nth-child(even) { background: #dde; } .linha:nth-child(odd) { background: white; } 122sexta-feira, 22 de outubro de 2010
:not(.box) selecionar elementos que não tenham a classe “box” 123sexta-feira, 22 de outubro de 2010
li:first-child li:last-child 124sexta-feira, 22 de outubro de 2010
@font-face 125sexta-feira, 22 de outubro de 2010
Times new Roman é legal mas... 126sexta-feira, 22 de outubro de 2010
Quero um texto assim no meu site... 127sexta-feira, 22 de outubro de 2010
@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
@font-face Kit Generator http://www.fontsquirrel.com/fontface/generator 129sexta-feira, 22 de outubro de 2010
Google Web Fonts http://code.google.com/webfonts 130sexta-feira, 22 de outubro de 2010
text wrapping 131sexta-feira, 22 de outubro de 2010
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
Border Radius 133sexta-feira, 22 de outubro de 2010
#elemento { border-radius: 10px; } 134sexta-feira, 22 de outubro de 2010
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
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
border-radius: 10px 10px; A B A B AB 137sexta-feira, 22 de outubro de 2010
Border Image 138sexta-feira, 22 de outubro de 2010
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
Cores 140sexta-feira, 22 de outubro de 2010
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
Box-Shadow 142sexta-feira, 22 de outubro de 2010
#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
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
Text Shadow text-shadow: 4px 4px 4px rgba( 0, 0, 0, 0.6 ); 145sexta-feira, 22 de outubro de 2010
Reflexos 146sexta-feira, 22 de outubro de 2010
-webkit-box-reflect: pos dist máscara 147sexta-feira, 22 de outubro de 2010
-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
Transforms 149sexta-feira, 22 de outubro de 2010
-webkit-transform: rotateZ(5deg); 150sexta-feira, 22 de outubro de 2010
Gradient 151sexta-feira, 22 de outubro de 2010
-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
-webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), to(#000)) 153sexta-feira, 22 de outubro de 2010
background-size 154sexta-feira, 22 de outubro de 2010
background-size:100% auto contain cover 155sexta-feira, 22 de outubro de 2010
Múltiplos Backgrounds 156sexta-feira, 22 de outubro de 2010
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
Colunas 158sexta-feira, 22 de outubro de 2010
-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
-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
Transitions 160sexta-feira, 22 de outubro de 2010
161sexta-feira, 22 de outubro de 2010
161sexta-feira, 22 de outubro de 2010
161sexta-feira, 22 de outubro de 2010
161sexta-feira, 22 de outubro de 2010
#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
#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
#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
Animations 163sexta-feira, 22 de outubro de 2010
@-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
@-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
http://goo.gl/mc76 165sexta-feira, 22 de outubro de 2010
166sexta-feira, 22 de outubro de 2010
http://goo.gl/Vnqe 167sexta-feira, 22 de outubro de 2010
Leo Balter @leobalter leo@balter.com.br yayquery.com.br 168sexta-feira, 22 de outubro de 2010

Mais conteúdo relacionado

PDF
Introdução ao HTML e CSS
porSérgio Souza Costa
 
PDF
Programação Web com HTML e CSS
porVictor Adriel Oliveira
 
PDF
Curso de Desenvolvimento Web - Módulo 01 - HTML
porRodrigo Bueno Santa Maria, BS, MBA
 
PDF
Curso de HTML5 - Aula 01
porLéo Dias
 
PPTX
HTML 5 A evolução do HTML 4 para o HTML 5
porondazul
 
PDF
E-book sobre HTML 5 (Devmedia)
porDevmedia
 
PPTX
HTML5 CSS3
porrommelweb
 
PDF
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
porRenato Bongiorno Bonfanti
 
Introdução ao HTML e CSS
porSérgio Souza Costa
 
Programação Web com HTML e CSS
porVictor Adriel Oliveira
 
Curso de Desenvolvimento Web - Módulo 01 - HTML
porRodrigo Bueno Santa Maria, BS, MBA
 
Curso de HTML5 - Aula 01
porLéo Dias
 
HTML 5 A evolução do HTML 4 para o HTML 5
porondazul
 
E-book sobre HTML 5 (Devmedia)
porDevmedia
 
HTML5 CSS3
porrommelweb
 
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
porRenato Bongiorno Bonfanti
 

Mais procurados

PDF
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
porPeslPinguim
 
PPT
Html Básico
porMarcelo Machado Pereira
 
PDF
Desenvolvimento Web : HTML5, CSS3 & JavaScript
porFábio Flatschart
 
PPTX
HTML - Aula 01 - Estrutura básica e tags básicas no html
porTiago Luiz Ribeiro da Silva
 
PDF
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
porUni Buscapé Company
 
PDF
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
porAndré Constantino da Silva
 
PDF
Html5 & CSS3
porK19 Treinamentos
 
PPTX
Introdução a HTML5
porSalvador Torres
 
PDF
Minicurso de HTML básico - Atualizado para HTML5
porJose Augusto Cintra
 
PDF
Curso HTML e CSS Part1
porHerbet Ferreira Rodrigues
 
PDF
Mini curso html5 slides
porCarlos Rodrigo de Araujo
 
PDF
Html5 aula 02
porJose Berardo
 
PDF
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
porFábio Flatschart
 
PPTX
Curso de html - Introdução ao HTML
porTales Augusto
 
DOCX
Apostila curso xhtml css
porSeekr Gestão e Monitoramento de Marcas em Mídias Sociais
 
PDF
WebDesign AULA 2: Introdução a HTML
porDra. Camila Hamdan
 
PDF
Html5 Aula 6
porJose Berardo
 
PDF
Html5 Aula 4
porJose Berardo
 
PPT
Agilidade e Semântica com HTML5 e CSS3
porAnderson Aguiar
 
PDF
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT
porAndré Luís
 
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
porPeslPinguim
 
Html Básico
porMarcelo Machado Pereira
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript
porFábio Flatschart
 
HTML - Aula 01 - Estrutura básica e tags básicas no html
porTiago Luiz Ribeiro da Silva
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
porUni Buscapé Company
 
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
porAndré Constantino da Silva
 
Html5 & CSS3
porK19 Treinamentos
 
Introdução a HTML5
porSalvador Torres
 
Minicurso de HTML básico - Atualizado para HTML5
porJose Augusto Cintra
 
Curso HTML e CSS Part1
porHerbet Ferreira Rodrigues
 
Mini curso html5 slides
porCarlos Rodrigo de Araujo
 
Html5 aula 02
porJose Berardo
 
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
porFábio Flatschart
 
Curso de html - Introdução ao HTML
porTales Augusto
 
Apostila curso xhtml css
porSeekr Gestão e Monitoramento de Marcas em Mídias Sociais
 
WebDesign AULA 2: Introdução a HTML
porDra. Camila Hamdan
 
Html5 Aula 6
porJose Berardo
 
Html5 Aula 4
porJose Berardo
 
Agilidade e Semântica com HTML5 e CSS3
porAnderson Aguiar
 
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT
porAndré Luís
 

Destaque

PDF
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
porRodrigo Bueno Santa Maria, BS, MBA
 
PDF
Aula 1 linguagem html (1)
porKaoru Hatake
 
PPTX
Web design responsivo e adaptativo - HTML5/CSS3
porHeraldo Gonçalves Lima Junior
 
PDF
Curso de Desenvolvimento Web - Módulo 02 - CSS
porRodrigo Bueno Santa Maria, BS, MBA
 
PDF
HTML Básico
porWanderlei Silva do Carmo
 
PPTX
Apresentacao html css
porDaniele Montenegro
 
PDF
Aula 5 -Avaliação de interfaces de usuário - testes com usuários
porAndré Constantino da Silva
 
PDF
Minicurso "Jogos Multiplataforma com Javascript"
porFelipe Pedroso
 
PDF
Introdução a HTML, CSS, JS, Ajax
porGabriel Kamimura Yano
 
PPT
CSS Básico para Webdesign
porRenato Melo
 
PDF
Aula 4 – Linguagem HTML - Imagens e links
porAndré Constantino da Silva
 
PDF
Resumo html 2012 exercícios 01 21
porLeonam De Souza Calderaro
 
PDF
Desenvolvimento-web-com-html-css-e-javascript
porManuel Fernando
 
PDF
Games e inovacao tecnologica
porAlexsandro
 
PPT
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
porRenato Melo
 
PDF
HTML, CSS & Style Guides
porBruno Trecenti
 
PDF
Web Design Responsivo
porEduardo Mendes
 
KEY
HTML/CSS Patterns
porLeonardo Quixada
 
PDF
curso de html
pormarkuszakeu
 
PPTX
Upload
porEb 2,3 de beiriz
 
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
porRodrigo Bueno Santa Maria, BS, MBA
 
Aula 1 linguagem html (1)
porKaoru Hatake
 
Web design responsivo e adaptativo - HTML5/CSS3
porHeraldo Gonçalves Lima Junior
 
Curso de Desenvolvimento Web - Módulo 02 - CSS
porRodrigo Bueno Santa Maria, BS, MBA
 
HTML Básico
porWanderlei Silva do Carmo
 
Apresentacao html css
porDaniele Montenegro
 
Aula 5 -Avaliação de interfaces de usuário - testes com usuários
porAndré Constantino da Silva
 
Minicurso "Jogos Multiplataforma com Javascript"
porFelipe Pedroso
 
Introdução a HTML, CSS, JS, Ajax
porGabriel Kamimura Yano
 
CSS Básico para Webdesign
porRenato Melo
 
Aula 4 – Linguagem HTML - Imagens e links
porAndré Constantino da Silva
 
Resumo html 2012 exercícios 01 21
porLeonam De Souza Calderaro
 
Desenvolvimento-web-com-html-css-e-javascript
porManuel Fernando
 
Games e inovacao tecnologica
porAlexsandro
 
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
porRenato Melo
 
HTML, CSS & Style Guides
porBruno Trecenti
 
Web Design Responsivo
porEduardo Mendes
 
HTML/CSS Patterns
porLeonardo Quixada
 
curso de html
pormarkuszakeu
 
Upload
porEb 2,3 de beiriz
 

Semelhante a Html 5 e Css3

PPTX
Visão Geral do HTML5 e do Internet Explorer 9
porRodrigo Kono
 
PDF
Introdução ao Web Design: Aula 5 - HTML (part. 1)
porGustavo Zimmermann
 
PPTX
HTML 5, CSS 3 e o futuro da Web
porDiego Pessoa
 
PDF
HTML5
porZigotto Tecnologia
 
PPTX
Aula html5
porRodrigo Gidra
 
PDF
Html5 em 15 minutos
porJosé Willams
 
PPSX
W3C Web Standards HTML
porAndrea Dalforno
 
PDF
Html5
porthiagosenac
 
PDF
E-Book de estudos
porinfo_cimol
 
PDF
Html5 ass
porVitor Fonseca de Melo
 
PPT
#DeveloperDay - Front-end API html5
porLeandro Santos
 
PDF
1a5614c679b23c018654639f6b57ecf1.pdf
porNickMartinsgaspar
 
PDF
Palestra html5 e CSS3
porEmiliano Barreto
 
PDF
Html5
porAlan Pereira
 
PDF
HTML5 e o futuro da Web - Senac Consolação 2012
porReinaldo Ferraz
 
PPTX
I.h aula 6 7 8 9 10 11 12
porArmando Rivarola
 
PPTX
Seminario html5
porWérmeson Da Silva Lopes
 
PDF
CCT0735_auwwwwwwwwwwwwwwwwwwwwwwwwla02.pdf
porIedaRosanaKollingWie
 
ODP
Html5,css3,javascript: O lugar onde sonhos se tornam realidade.
porEdmo Lima
 
ODP
Html5,css3,javascript o lugar onde sonhos se tornam realidade.
porEdmo Jeova
 
Visão Geral do HTML5 e do Internet Explorer 9
porRodrigo Kono
 
Introdução ao Web Design: Aula 5 - HTML (part. 1)
porGustavo Zimmermann
 
HTML 5, CSS 3 e o futuro da Web
porDiego Pessoa
 
HTML5
porZigotto Tecnologia
 
Aula html5
porRodrigo Gidra
 
Html5 em 15 minutos
porJosé Willams
 
W3C Web Standards HTML
porAndrea Dalforno
 
Html5
porthiagosenac
 
E-Book de estudos
porinfo_cimol
 
Html5 ass
porVitor Fonseca de Melo
 
#DeveloperDay - Front-end API html5
porLeandro Santos
 
1a5614c679b23c018654639f6b57ecf1.pdf
porNickMartinsgaspar
 
Palestra html5 e CSS3
porEmiliano Barreto
 
Html5
porAlan Pereira
 
HTML5 e o futuro da Web - Senac Consolação 2012
porReinaldo Ferraz
 
I.h aula 6 7 8 9 10 11 12
porArmando Rivarola
 
Seminario html5
porWérmeson Da Silva Lopes
 
CCT0735_auwwwwwwwwwwwwwwwwwwwwwwwwla02.pdf
porIedaRosanaKollingWie
 
Html5,css3,javascript: O lugar onde sonhos se tornam realidade.
porEdmo Lima
 
Html5,css3,javascript o lugar onde sonhos se tornam realidade.
porEdmo Jeova
 

Html 5 e Css3