HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE
-
Upload
rodrigo-muniz -
Category
Documents
-
view
417 -
download
2
description
Transcript of HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE
![Page 1: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/1.jpg)
297 km
de Recife a Natal
HTML5 & CSS3
![Page 2: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/2.jpg)
297 km
de Recife a Natal
HTML5 & CSS3
![Page 3: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/3.jpg)
:)
![Page 4: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/4.jpg)
NIVELAMENTO
<cite>
<base>
<optgroup>
Define a URL base para os links relativos da página
Uma citação ou referência a outra fonte
Você conhece essas tags?
![Page 5: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/5.jpg)
WORKSPACE
Google Chrome 6.0 Devou Webkit Nightly Build
(mais recente)
Notepad ++
+
![Page 6: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/6.jpg)
POR ONDE PASSAREMOS✓ Novas tags de marcação
✓ Semântica em Links (Link relations)
✓ Novos tipos de campos de formulário
✓ Multimídia (Vídeo & Audio)
✓ Desenhar (Canvas)
✓ JS APIs
✓ Novos seletores
✓ Dados Offline
✓ Geolocalização
...
✓ Melhorias em Backgrounds
✓ Suporte a novos formatos de web fonts
✓ Colunas
✓ Decoração de textos (rgba, text-shadow, text stroke...)
✓ Decoração de boxes (rgba, border-radius, gradient, shadows)
✓ CSS Transitions, Transforms, Animação
![Page 7: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/7.jpg)
POR ONDE PASSAREMOS✓ Novos seletores CSS3
✓ Melhorias em Backgrounds
✓ Suporte a novos formatos de web fonts
✓ Colunas
✓ Decoração de textos (rgba, text-shadow, text stroke...)
✓ Decoração de boxes (rgba, border-radius, shadows)
✓ CSS Transitions, Transforms, Animação
![Page 8: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/8.jpg)
MAS ANTES...
![Page 9: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/9.jpg)
e HTML 4.01
HTML5 VS XHTML
http://officespam.chattablogs.com/archives/2007/03/tattoos-of-the-geeky-kind.html
![Page 10: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/10.jpg)
DOCTYPE gigantesco é coisa do passadoHTML5 VS (X)HTML
HTML 4.01 Strict<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html>HTML 5
XHTML 1.0 Transitional<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML 4.01 Frameset<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
![Page 11: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/11.jpg)
Não temos que escolher entre transitional e strictHTML5 VS (X)HTML
<!DOCTYPE html>
HTML 4.01 Strict<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 5
XHTML 1.0 Transitional<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
![Page 12: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/12.jpg)
Tags <script> agora tem o atributo de tipo text/javascript como facultativo
HTML5 VS (X)HTML
(x)HTML<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/jquery.js"></script>HTML 5
![Page 13: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/13.jpg)
O charset também foi simplificadoHTML5 VS (X)HTML
(x)HTML<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8" />HTML 5
![Page 14: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/14.jpg)
Elementos sem tag de fechamento são fechados de forma facultativa
HTML5 VS (X)HTML
HTML<p><img src=”foto.jpg” alt=”Foto”> Praesent eget neque eu.<br>Eros interdum malesuada non vel leo.
</p>
<p><img src=”foto.jpg” alt=”Foto”> Praesent eget neque eu.<br />Eros interdum malesuada non vel leo.
</p>
HTML 5
XHTML<p><img src=”foto.jpg” alt=”Foto” /> Praesent eget neque eu.<br />Eros interdum malesuada non vel leo.
</p>
![Page 15: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/15.jpg)
Depois do XHTML a tag embed volta diferenteHTML5 VS (X)HTML
XHTML<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="foobar/swflash.cab" width="100" height="100" id="movie">
<param name="movie" value="flash.swf" /><param name="quality" value="high" />
</object>
HTML 5<embed src=”flash.swf” id=”movie” width="100" height="100">
HTML<object width="100" height="100"><param name="movie" value="flash.swf">
<embed src="flash.swf" width="100" height="100"></embed>
</object>
![Page 16: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/16.jpg)
✓ DOCTYPE gigantesco não é mais necessário
✓ Não temos que escolher entre transitional e strict
✓ Tags <script> não precisam de atributo de tipo text/javascript
✓ Charset também foi simplificado
✓ Elementos sem tag de fechamento são fechados de forma facultativa (ex.: <br>)
✓ Nova tag embed
HTML5 VS (X)HTML
![Page 17: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/17.jpg)
Novas tags
HTML5 - SEMÂNTICA
http://www.flickr.com/photos/jesper/346483230
![Page 18: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/18.jpg)
SEMÂNTICA: NOVAS TAGS...
<body><header>
<hgroup><h1>HTML 5 e CSS3</h1><h2>De Recife a Natal</h2>
<hgroup></header>
<section id="conteudo"> <article> <header> <h1>Lorem ipsum dolor sit</h1> <p>Publicado em <time datetime="2010-08-25">Agosto de 2010</time></p> </header> <section> ... </seciton> </article> </section> <aside> <ul> ... </ul> </aside> <footer> <a rel="license" href="http://creativecommons.org/licenses/by/2.0/">Creative Commons Attribution 2.0 Generic</a> - Conteúdo para fins educacionais. </footer>
</body>...
![Page 19: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/19.jpg)
1) article
2) aside
3) audio
4) figure
5) figcaption
6) footer
7) header
8) nav
9) section
10) source
11) video
12) canvas
13) command
14) datagrid
15) datalist
16) details
17) embed
18) output
19) progress
20) rp
21) rt
22) ruby
23) dialog
24) hgroup
25) mark
26) meter
27) summary
28) time
SEMÂNTICA: NOVAS TAGS
http://www.w3schools.com/html5/html5_reference.asp
![Page 20: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/20.jpg)
Especificam a relação entra o documento atual e o alvo da URL de um link
SEMÂNTICA: LINK RELATIONS
http://www.w3schools.com/html5/att_a_rel.asp
1) alternate
1) archives
2) author
3) bookmark
4) contact
5) external
6) first
7) help
8) icon
9) index
10) last
11) license
12) next
13) nofollow
14) noreferrer
15) pingback
16) prefetch
17) prev
18) search
19) stylesheet
20) sidebar
21) tag
22) up
![Page 21: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/21.jpg)
SEMÂNTICA: LINK RELATIONS...
<body><header>
<hgroup><h1>HTML 5 e CSS3</h1><h2>De Recife a Natal</h2>
<hgroup></header>
<section id="conteudo">... </section> <aside> <ul> <li><a rel="external" href="http://www.w3.org/TR/html5/">HTML5 - WC3</a></li> <li><a rel="external" href="http://www.lipsum.com/">Gerador de Lorem Ipsum</a></li> </ul> </aside> <footer> <a rel="license" href="http://creativecommons.org/licenses/by/2.0/">Creative Commons Attribution 2.0 Generic</a> - Conteúdo para fins educacionais. </footer>
</body>...
![Page 22: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/22.jpg)
FORMULÁRIOSNovos tipos de campos
1) email
2) url
3) number
4) range
5) date
6) month
7) week
8) time
9) datetime
10) datetime-local
11) search
12) color
:invalid {/*Estilo do campo inválido*/
background: yellow;}
![Page 23: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/23.jpg)
FORMULÁRIOSNovos tipos de campos
No Opera 9.0 ou mais recente
type=”datetime” type=”month” type=”week”
http://diveintohtml5.org/forms.html
![Page 24: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/24.jpg)
FORMULÁRIOSNovos tipos de campos
Teclado no Safari do iOS iPhone, iPhone Touch e iPad
type=”number” type=”url” type=”email”
http://diveintohtml5.org/forms.html
![Page 25: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/25.jpg)
MULTIMÍDIAVídeo e Áudio
<video src="http://upload.wikimedia.org/wikipedia/commons/0/05/Black_and_white_cat_drinks_from_a_puddle.ogg"controls id="testeCat" width="480"> Seu navegador não suporta o vídeo desta página.</video>
http://dev.opera.com/articles/view/introduction-html5-video/
![Page 26: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/26.jpg)
MULTIMÍDIAVídeo e Áudio
<input type="button" onclick="v.play()"; value="Executa >" />
<input type="button" onclick="v.pause()"; value="Pausa ||" />
Executa
Pausa
<input type="button" onclick="v.muted=true"; value="Mudo" />
Mudo
http://dev.opera.com/articles/view/introduction-html5-video/
![Page 27: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/27.jpg)
CANVASGráficos 2D
<canvas id="quadro" width="500" height="500"></canvas>...#quadro { background: url(img/bg-metal.jpg) no-repeat; border: 1px solid #000;}
Canvas
y
x0,0
500,500
![Page 28: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/28.jpg)
CANVASGráficos 2D
//c.fillRect(x, y, width, heigth);c.fillStyle = "#92b000";c.fillRect(18, 15, 150, 100);
Um retângulo verde
c.strokeStyle = "#FF0000";c.strokeRect(28, 25, 200, 200);
Um retângulo com borda vermelha
c.clearRect(20,20,35,55);
Limpa pixels
http://doctype.tv/canvas?autoplay=true
![Page 29: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/29.jpg)
CANVASGráficos 2D
//Pegou a canetac.beginPath();//Localizou a caneta no papel 110,100c.moveTo(110,100);//Dali desenhou uma linha até 110,200c.lineTo(110,200);//Em seguida outra linha até 400,200c.lineTo(400,200);//Fechac.closePath();c.strokeStyle = "#fff";c.stroke();c.fillStyle = "rgba(255,255,255,0.5)";c.fill();
Ponto a ponto
http://doctype.tv/mockups?autoplay=true
![Page 30: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/30.jpg)
CANVASGráficos 2D
c.fillStyle = "#fff";c.font = "bold 42px Helvetica";c.fillText("HTML 5", 248, 403);
Texto simples
![Page 31: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/31.jpg)
CANVASGráficos 2D
//c.arc(x, y, radius, start, end, anticlockwise);c.arc(100, 100, 50, 0, 2*Math.PI, false);c.strokeStyle = "#ff0000";c.stroke();
Círculo
http://doctype.tv/mockups?autoplay=true
![Page 32: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/32.jpg)
CANVASGráficos 2D
Exemplos
http://www.chromeexperiments.com/
http://alteredqualia.com/canvasmol/#DNA
http://pixie.strd6.com/sprites/new
http://www.kevs3d.co.uk/dev/asteroids/
WebGL
http://webkit.org/blog/603/webgl-now-available-in-webkit-nightlies/
![Page 33: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/33.jpg)
POR ONDE JÁ PASSAMOS
✓ Novas tags de marcação
✓ Semântica em Links (Link relations)
✓ Novos tipos de campos de formulário
✓ Multimídia (Vídeo & Audio)
✓ Desenhar (Canvas)
✓ JS APIs
✓ Novos seletores
✓ Dados Offline
✓ Geolocalização
✓ Novos seletores CSS3
✓ Melhorias em Backgrounds
✓ Suporte a novos formatos de web fonts
✓ Colunas
✓ Decoração de textos (rgba, text-shadow, text stroke...)
✓ Decoração de boxes (rgba, border-radius, gradient, shadows)
✓ CSS Transitions, Transforms, Animação
![Page 34: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/34.jpg)
Mais que marcação para o HTML5
JS APIS
![Page 35: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/35.jpg)
JS APISNovos seletores
var e = document.getElementById('login');e.focus();
var els = document.getElementsByTagName('input');els[0].focus();
var els = document.getElementsByClassName('invalido');els[0].focus();
Encontrando elementos pela classe
var els = document.querySelectorAll('#conteudo aside');
var els = document.querySelectorAll('.invalido');
Encontrando elementos pela sintaxe do CSS
![Page 36: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/36.jpg)
JS APISDados Offline
document.querySelector('#save').addEventListener('click', function () { window.localStorage.setItem('value', area.value); window.localStorage.setItem('timestamp', (new Date()).getTime());}, false);
localStorage
document.querySelector('#save').addEventListener('click', function () { window.sessionStorage.setItem('value', area.value); window.sessionStorage.setItem('timestamp', (new Date()).getTime());}, false);
sessionStorage
var db = window.openDatabase("meudb", "1.0");db.executeSql("SELECT * FROM teste", [], successCallback, errorCallback);
Web SQL Database
http://dev.w3.org/html5/webstorage/
![Page 37: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/37.jpg)
JS APISDados Offline
<html manifest=”/cache.manifest”>
Offline Cache
AddType text/cache-manifest .manifest
Configuração server-side (no Apache com .htaccess)
CACHE MANIFEST # Offline cache v1index.htmlcss/style.cssjs/script.js # imagesimg/bg.pngimg/bt.png
exemplo.manifest
<script>var on = navagator.onLine;</script>
Offline ou não?
![Page 38: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/38.jpg)
JS APISGeolocalização
navigator.geolocation.getCurrentPosition(positionCallback, error);
Latitude e Longitude
var id = navigator.geolocation.watchPosition(positionCallback);
Acompanha localização
navigator.geolocation.clearWatch(id);
Para de acompanhar a localização
http://dev.w3.org/geo/api/spec-source.html
![Page 39: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/39.jpg)
JS APISGeolocalização
function positionCallback(position) {position.coords.latitude; //graus decimaisposition.coords.longitude;position.coords.accuracy; //metros
position.coords.altitude; //metrosposition.coords.altitudeAccuracy; //metros
position.coords.speed; //metros / segundosposition.coords.heading; //Graus em relação ao Norte
}
Armazenado em .coords
http://dev.w3.org/geo/api/spec-source.html
![Page 40: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/40.jpg)
POR ONDE JÁ PASSAMOS
✓ Novas tags de marcação
✓ Semântica em Links (Link relations)
✓ Novos tipos de campos de formulário
✓ Multimídia (Vídeo & Audio)
✓ Desenhar (Canvas)
✓ JS APIs
✓ Novos seletores
✓ Dados Offline
✓ Geolocalização
✓ Novos seletores CSS3
✓ Melhorias em Backgrounds
✓ Suporte a novos formatos de web fonts
✓ Colunas
✓ Decoração de textos (rgba, text-shadow, text stroke...)
✓ Decoração de boxes (rgba, border-radius, shadows)
✓ CSS Transitions, Transforms, Animação
![Page 41: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/41.jpg)
Estilo, editoração e animação
CSS3
http://www.flickr.com/photos/atzu/4365152223
![Page 42: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/42.jpg)
CSS3Novos seletores
input[type=”text”]{border: 1px solid #000
}
Por atributos específicos
:not(div) {display: inline;
}
Negação (Firefox, Safari e Opera)
p:first-child { ... }li:last-child { ... }
Parentesto
![Page 43: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/43.jpg)
CSS3Melhorias no controle do tamanho do background
background-size: cover;
Cover (menor possível)
background-size: contain;
Contain (maior possível)
background-size: 80%;
Porcentagem
![Page 44: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/44.jpg)
CSS3Suporte a outros formatos de web fonts
TrueType/Openype TT(.ttf)
OpenType PS (.otf)
Outros
http://www.webfonts.info/wiki/index.php?title=@font-face_browser_support
![Page 45: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/45.jpg)
CSS3Colunas
-webkit-column-count:3;-webkit-column-rule:1px solid #ccc;-webkit-column-gap:40px;
Webkit
-moz-column-count:3;-moz-column-rule:1px solid #ccc;-moz-column-gap:40px;
Firefox
![Page 46: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/46.jpg)
CSS3Decoração de texto e boxes
background: rgba(255, 255, 255, 0.8);/*red, green, blue, alpha*/
rgba()
text-shadow: #000 3px 2px 9px;/*cor horizontal vertical blur*/
text-shadow
-webkit-box-shadow: #000 3px 2px 9px;/*cor horizontal vertical blur*/
box-shadow
-webkit-text-stroke: 1px #F00;
text-stroke
![Page 47: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/47.jpg)
CSS3Decoração de texto e boxes
border-radius: 8px 0 8px 0;/*sentido horário do canto superiror esquerdo*/
Bordas arredondadas
![Page 48: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/48.jpg)
CSS3CSS Transitions e Transforms
-webkit-transition: margin-left 1s ease-in-out;margin-left: 120px;...
Prepara a transição
-webkit-transform: scale(0.5) rotate(45deg);
Transforms
-webkit-transition: -webkit-transform 1s ease-in-out;-webkit-transform: scale(.5) rotate(45deg);
Juntas
http://webkit.org/blog/138/css-animation/
![Page 49: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/49.jpg)
CSS3CSS Animation
@-webkit-keyframes zoom { from { font-size: 100%; } to { font-size: 300%; }}
keyframes
p { -webkit-animation-name: zoom; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -webkit-animation-direction: alternate;}
Aplicando a animação
http://webkit.org/blog/324/css-animation-2/
![Page 50: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/50.jpg)
CHEGAMOS!PERGUNTAS?
4H DEPOIS...
![Page 51: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/51.jpg)
:)
@rdmuniz
rodrigomuniz.com
facebook.com/rodrigomuniz
linkedin.com/in/rodrigomuniz
***
wenetus.com
http://creativecommons.org/licenses/by-sa/3.0/
![Page 52: HTML5 CSS3 de Recife a Natal - Wordshop para a UFPE](https://reader033.fdocuments.net/reader033/viewer/2022042513/5520833a497959842f8b4c36/html5/thumbnails/52.jpg)
REFERÊNCIAS
http://www.flickr.com/photos/jesper/346483297
http://slides.html5rocks.com/
http://diveintohtml5.org/
http://developer.apple.com/safari/
http://webkit.org/
http://whatwg.org/html5
http://www.w3schools.com/html5/html5_reference.asp
http://w3c.br/cursos/html5/conteudo/
http://html5demos.com/
http://www.css3.info/
http://www.w3.org/
http://www.w3c.br/