HTML5 y CSS3

html5 y css3 construyendo la web 2.0

html5 css3
contenido presentación
.leaf{
height:350px;
<!DOCTYPE html> width:272px;
<html lang="en" class=""> background: #edcf17;
<head> -webkit-border-radius:55px 30px 245px 0px;
! <meta charset="UTF-8" /> -moz-border-radius:55px 30px 245px 0px;
! <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" /> -o-border-radius:55px 30px 245px 0px;
! border-radius:55px 30px 245px 0px;
! <title>inuit.css—cooler than a polar bear’s toenails</title> position: absolute;
! opacity:0.97;
!  -webkit-transform: rotate(0deg) translate(64px,-0.9258em);
! <link rel="stylesheet" href="css/inuit.css" /> -moz-transform: rotate(0deg) translate(64px,-0.9258em);
! -o-transform: rotate(0deg) translate(64px,-0.9258em);
!  transform: rotate(0deg) translate(64px,-0.9258em);
! <link rel="stylesheet" href="css/style.css" /> }
!
!  #yellow{
! <link rel="shortcut icon" href="icon.png" /> z-index:-97;
! <link rel="apple-touch-icon-precomposed" href="icon.png" /> background:-webkit-gradient(radial,
</head> 64 64, 279, -147 99, 100, from(#d9a919), to(white), color-stop(.35, #F0D418));
<body> }
! #yellow2{
!  background:-webkit-gradient(radial,
! 64 64, 279, -120 99, 115, from(#d9a919), to(white), color-stop(.35, #F0D418));
! <div id="page" class="grid grid-10"> z-index:-94;
! ! height:79px;
! ! <a href="https://twitter.com/inuitcss" title="Follow inuit.css on Twitter"><img src="img/ width:255px;
logo.png" alt="inuit.css logo" id="logo" /></a> }
! ! #green{
! ! <h1>Thank you for choosing <a href="http://csswizardry.com/inuit/">inuit.css</a>. Your background: #44A73D;
hair looks really lovely today…</h1> background:-webkit-gradient(radial,
! ! 64 64, 329, -227 299, 100, from(#44A73D), to(white), color-stop(.40, #46ac3f));
! </div> background:-moz-radial-gradient(-100% 45%, circle cover, white 30%, #44A73D 82%);
! -webkit-transform: rotate(120deg) translate(60px,152px);
</body> -moz-transform: rotate(120deg) translate(60px,152px);
</html> -o-transform: rotate(120deg) translate(60px,152px);
transform: rotate(120deg) translate(60px,152px);
z-index:-96;
}

HTML5 doctype

<!DOCTYPE html>

elementos estructurales

nos da nuevo vocabulario
semántico para distintas partes de
la estructura, eliminando la
necesidad de IDs y clases

Internet Explorer necesita ciertos arreglos con javascript
para lograr que reconozca estos nuevos elementos

html 4 html5
<html>
<html>
<head>
<head>
<title>Mokka mit Schlag </title>
<title>Mokka mit Schlag </title>
</head>
</head>
<body>
<body>
<header>
<div id="page">
<h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>
<div id="header">
</header>
<h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>
<section>
</div>
<article>
<div id="container">
<h2><a href=
<div id="center" class="column">
"/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
<div class="post" id="post-1000572">
Spring Comes (and Goes) in Sussex County</a></h2>
<h2><a href=
"/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
<p>Yesterday I joined the Brooklyn Bird Club for our
Spring Comes (and Goes) in Sussex County</a></h2>
annual trip to Western New Jersey, specifically Hyper
Humus, a relatively recently discovered hot spot. It
<div class="entry">
started out as a nice winter morning when we arrived at
<p>Yesterday I joined the Brooklyn Bird Club for our
the site at 7:30 A.M., progressed to Spring around 10:00
annual trip to Western New Jersey, specifically Hyper
A.M., and reached early summer by 10:15. </p>
Humus, a relatively recently discovered hot spot. It
</article>
started out as a nice winter morning when we arrived
at the site at 7:30 A.M., progressed to Spring around
10:00 A.M., and reached early summer by 10:15. </p>
<article>
</div>
<h2><a href=
</div>
"/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
But does it count for your life list?</a></h2>
<div class="post" id="post-1000571">
<p>Seems you can now go <a
<h2><a href=
href="http://www.wired.com/science/discoveries/news/
"/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
2007/04/cone_sf">bird watching via the Internet</a>. I
But does it count for your life list?</a></h2>
haven't been able to test it out yet (20 user
limit apparently) but this is certainly cool.
<div class="entry">
Personally, I can't imagine it replacing
<p>Seems you can now go <a
actually being out in the field by any small amount.
href="http://www.wired.com/science/discoveries/news/
On the other hand, I've always found it quite
2007/04/cone_sf">bird watching via the Internet</a>. I
sad to meet senior birders who are no longer able to
haven't been able to test it out yet (20 user
hold binoculars steady or get to the park. I can
limit apparently) but this is certainly cool.
imagine this might be of some interest to them. At
Personally, I can't imagine it replacing
least one elderly birder did a big year on TV, after
actually being out in the field by any small amount.
he could no longer get out so much. This certainly
On the other hand, I've always found it quite
tops that.</p>
sad to meet senior birders who are no longer able to
</article>
hold binoculars steady or get to the park. I can
<nav>
imagine this might be of some interest to them. At
<a href="/blog/page/2/">« Previous Entries</a>
least one elderly birder did a big year on TV, after
</nav>
he could no longer get out so much. This certainly
</section>
tops that.</p>
</div>
<nav>
</div>
<ul>
<li><h2>Info</h2>
</div>
<ul>
<li><a href="/blog/comment-policy/">Comment Policy</a></li>
<div class="navigation">
<li><a href="/blog/todo-list/">Todo List</a></li>
<div class="alignleft">
</ul></li>
<a href="/blog/page/2/">« Previous Entries</a>
<li><h2>Archives</h2>
</div>
<ul>
<div class="alignright"></div>
<li><a href='/blog/2007/04/'>April 2007</a></li>
</div>
<li><a href='/blog/2007/03/'>March 2007</a></li>
</div>
<li><a href='/blog/2007/02/'>February 2007</a></li>
<li><a href='/blog/2007/01/'>January 2007</a></li>
<div id="right" class="column">
</ul>
<ul id="sidebar">
</li>
<li><h2>Info</h2>
</ul>
<ul>
</nav>
<li><a href="/blog/comment-policy/">Comment Policy</a></li>
<footer>
<li><a href="/blog/todo-list/">Todo List</a></li>
<p>Copyright 2007 Elliotte Rusty Harold</p>
</ul></li>
</footer>
<li><h2>Archives</h2>
<ul>
</body>
<li><a href='/blog/2007/04/'>April 2007</a></li>
</html>
<li><a href='/blog/2007/03/'>March 2007</a></li>
<li><a href='/blog/2007/02/'>February 2007</a></li>
<li><a href='/blog/2007/01/'>January 2007</a></li>
</ul>
</li>
</ul>
</div>
<div id="footer">
<p>Copyright 2007 Elliotte Rusty Harold</p>
</div>
</div>

</body>
</html>

ejemplos

HTML5: <aside></aside>
HTML4: <div class="aside"></div>

HTML5: <audio src="xyz.ogg" autoplay controls></audio>
HTML4: <object type="application/ogg"
data="xyz.ogg"><param name="src" value="xyz.ogg"></
object>

http://www.anieto2k.com/demo/canvasﬁrefox.html

deg_cola_6.addColorStop(1,'rgba(254,249,149,0)'); ! ctx.lineTo(170,327);
function draw(){ ! ctx.fillStyle = mar;/*0.1*/ ! ctx.bezierCurveTo(230,430,360,470,465,425);
! var deg_cola_7 = ctx.createLinearGradient(640,240,590,500); ! ctx.quadraticCurveTo(443,305,452,292);
var canvas = document.getElementById('tutorial'); ! ctx.arc(390,278,228,0,Math.PI*2,true); ! ctx.fill();
! deg_cola_7.addColorStop(0,'rgba(254,249,149,1)'); ! ctx.quadraticCurveTo(448,287,445,293);
if (canvas.getContext){ ! ctx.fill(); ! ctx.beginPath();
! deg_cola_7.addColorStop(0.3,'rgba(254,254,37,1)'); ! ctx.bezierCurveTo(436,296,430,274,447,260);
var ctx = canvas.getContext('2d'); ! //continentes ! ctx.fillStyle = deg_lomo_2;
! deg_cola_7.addColorStop(1,'rgba(254,249,149,0)'); ! ctx.lineTo(446.3,257);
! //degradados ! ctx.beginPath(); ! ctx.moveTo(415,477);
! var deg_cola_8 = ctx.createLinearGradient(640,240,590,500);
! var contsupder = ctx.createLinearGradient(370,160,470,230); ! ctx.fillStyle = "rgba(50, 130, 600, 1)";/*0.3*/ ! ctx.bezierCurveTo(430,266,408,235,419,227);
! ctx.bezierCurveTo(360,462,345,455,295,400);
! deg_cola_8.addColorStop(0,'rgba(254,249,149,1)'); ! ctx.bezierCurveTo(407,221,411,198,440,214);
! contsupder.addColorStop(0,'#0F80BC'); ! //continente superior izquierdo ! ctx.lineTo(275,415);
! deg_cola_8.addColorStop(0.3,'rgba(254,254,37,1)'); ! ctx.lineTo(440,220);
! contsupder.addColorStop(1,'#000C36'); ! ctx.beginPath(); ! ctx.bezierCurveTo(310,445,342,470,415,477);
! deg_cola_8.addColorStop(1,'rgba(222,92,1,0.9)'); ! ctx.lineTo(446,216);
! var contsupizq = ctx.createLinearGradient(390,50,210,120); ! ctx.fillStyle = contsupizq; ! ctx.fill();
! var deg_cola_9 = ctx.createLinearGradient(580,320,350,480); ! ctx.lineTo(452,223);
! contsupizq.addColorStop(0,'#0F80BC'); ! ctx.moveTo(390,50); ! ctx.beginPath();
! deg_cola_9.addColorStop(0,'rgba(254,249,149,1)'); ! ctx.lineTo(456,223);
! contsupizq.addColorStop(1,'#053A74'); ! ctx.lineTo(370,59.5); ! ctx.fillStyle = deg_lomo_3;
! deg_cola_9.addColorStop(0.3,'rgba(254,254,37,1)'); ! ctx.bezierCurveTo(465,215,445,200,459,193);
! var contgrande = ctx.createLinearGradient(390,160,550,370); ! ctx.lineTo(358,80); ! ctx.moveTo(308,466);
! deg_cola_9.addColorStop(1,'rgba(185,18,13,0.9)'); ! ctx.bezierCurveTo(471,206,471,188,482,200);
! contgrande.addColorStop(0,'#084F85'); ! ctx.bezierCurveTo(356,82,361,89,366,85); ! ctx.bezierCurveTo(280,438,260,410,250,387);
! var deg_oreja_izq = ctx.createLinearGradient(190,120,220,180);
! contgrande.addColorStop(1,'#00032E'); ! ctx.bezierCurveTo(359,99,368,102,356,120); ! ctx.bezierCurveTo(493,208,496,215,492,217);
! ctx.lineTo(210,375);
! deg_oreja_izq.addColorStop(0,'rgba(249,189,95,1)'); ! ctx.bezierCurveTo(497,217,496,226,491,226);
! var minicontdergrande = ctx.createLinearGradient(530,200,571,200); ! ctx.lineTo(348,137); ! ctx.bezierCurveTo(240,426,274,450,308,466);
! deg_oreja_izq.addColorStop(0.2,'rgba(245,167,75,1)'); ! ctx.quadraticCurveTo(486,230,492,232);
! minicontdergrande.addColorStop(0,'#011F64'); ! ctx.bezierCurveTo(347,138,340,128,340,138); ! ctx.fill();
! deg_oreja_izq.addColorStop(0.7,'rgba(174,42,5,1)'); ! ctx.quadraticCurveTo(498,228,504,233);
! minicontdergrande.addColorStop(1,'#001149'); ! ctx.bezierCurveTo(334,140,332,138,327,134); ! ctx.beginPath();
! deg_oreja_izq.addColorStop(1,'rgba(174,42,5,1)'); ! ctx.quadraticCurveTo(503,240,498,238);
! var contizqgrande = ctx.createLinearGradient(330,354,348,373); ! ctx.lineTo(280,150); ! ctx.fillStyle = deg_lomo_4;
! var deg_cabeza = ctx.createLinearGradient(200,125,200,159); ! ctx.quadraticCurveTo(498,234,495,237);
! contizqgrande.addColorStop(0,'#000721'); ! ctx.lineTo(220,150); ! ctx.moveTo(260,470);
! deg_cabeza.addColorStop(0,'rgba(255,255,255,0.8)'); ! ctx.bezierCurveTo(498,250,506,247,501,255);
! contizqgrande.addColorStop(1,'#001250'); ! ctx.lineTo(216,130); ! ctx.bezierCurveTo(230,430,220,395,215,360);
! deg_cabeza.addColorStop(1,'rgba(255,255,255,0)'); ! ctx.quadraticCurveTo(508,257,509,261);
! var mar = ctx.createLinearGradient(210,50,210,390); ! ctx.bezierCurveTo(260,82,310,53,390,50); ! ctx.lineTo(175,365);
! var deg_oreja_der = ctx.createLinearGradient(350,110,290,160); ! ctx.quadraticCurveTo(514,265,520,258);
! mar.addColorStop(0,'#67C5D5'); ! ctx.fill(); ! ctx.bezierCurveTo(195,408,223,445,260,470);
! deg_oreja_der.addColorStop(0,'rgba(254,242,190,1)'); ! ctx.quadraticCurveTo(546,245,524,264);
! mar.addColorStop(0.5,'#5BA5C4'); ! //continente superior derecho ! ctx.fill();
! deg_oreja_der.addColorStop(0.25,'rgba(244,176,82,1)'); ! ctx.bezierCurveTo(530,261,550,244,534,267);
! mar.addColorStop(1,'#211375');! ! ctx.beginPath(); ! ctx.beginPath();
! deg_oreja_der.addColorStop(1,'rgba(222,114,16,1)'); ! ctx.quadraticCurveTo(539,276,530,287);
! var cristal = ctx.createLinearGradient(390,60,390,180); ! ctx.fillStyle = contsupder;/*0.3*/ ! ctx.fillStyle = deg_lomo_3;
! var deg_rojo_lomo = ctx.createLinearGradient(150,260,380,500); ! ctx.quadraticCurveTo(530,296,521,300);
! cristal.addColorStop(0,'rgba(255,255,255,0.6)'); ! ctx.moveTo(394,50); ! ctx.moveTo(223,419);
! deg_rojo_lomo.addColorStop(0,'rgba(179,0,0,1)'); ! ctx.quadraticCurveTo(520,295,512,300);
! cristal.addColorStop(0.6,'rgba(255,255,255,0.3)'); ! ctx.quadraticCurveTo(391,55,397,65); ! ctx.bezierCurveTo(230,430,205,390,211,362);
! deg_rojo_lomo.addColorStop(0.9,'rgba(186,19,4,1)'); ! ctx.bezierCurveTo(523,305,524,312,515,323);
! cristal.addColorStop(0.95,'rgba(255,255,255,0)'); ! ctx.quadraticCurveTo(395,72,398,74); ! ctx.lineTo(183,342);
! deg_rojo_lomo.addColorStop(1,'rgba(186,19,4,0.2)'); ! ctx.quadraticCurveTo(517,339,509,337);
! var cachetepeludo = ctx.createLinearGradient(250,260,300,380); ! ctx.quadraticCurveTo(420,82,418.5,89); ! ctx.bezierCurveTo(188,380,205,396,223,419);
! var deg_lomo_1 = ctx.createLinearGradient(460,440,170,330); ! ctx.quadraticCurveTo(511,347,500,343);
! cachetepeludo.addColorStop(0,'rgba(150,18,3,1)'); ! ctx.quadraticCurveTo(419,92,414,92); ! ctx.fill();
! deg_lomo_1.addColorStop(0,'rgba(255,255,255,0.2)'); ! ctx.quadraticCurveTo(493,340,498,348);
! cachetepeludo.addColorStop(0.5,'rgba(193,49,1,1)'); ! ctx.quadraticCurveTo(409,89,411,95); ! ctx.beginPath();
! deg_lomo_1.addColorStop(0.3,'rgba(222,114,16,1)'); ! ctx.quadraticCurveTo(504,354,500,360);
! cachetepeludo.addColorStop(1,'rgba(228,95,7,0)'); ! ctx.quadraticCurveTo(422,100,411,100); ! ctx.fillStyle = deg_lomo_3;
! deg_lomo_1.addColorStop(1,'rgba(222,114,16,1)'); ! ctx.quadraticCurveTo(492,362,495,352);
! var hocicobase = ctx.createLinearGradient(315,0,380,0); ! ctx.lineTo(420,107); ! ctx.moveTo(180,390);
! var deg_lomo_2 = ctx.createLinearGradient(460,440,170,330); ! ctx.bezierCurveTo(476,365,493,367,479,370);
! hocicobase.addColorStop(0,'rgba(173,39,5,1)'); ! ctx.lineTo(417,112); ! ctx.bezierCurveTo(177,320,178,320,186,300);
! hocicobase.addColorStop(0.4,'rgba(237,85,2,1)'); ! ctx.bezierCurveTo(400,115,449,124,412,124); ! ctx.lineTo(166,260);
! deg_lomo_2.addColorStop(0.3,'rgba(222,114,16,1)'); ! ctx.lineTo(481,387);
! hocicobase.addColorStop(1,'rgba(237,85,2,1)'); ! ctx.lineTo(409.5,127.5); ! ctx.bezierCurveTo(160,320,162,320,180,390);
! deg_lomo_2.addColorStop(1,'rgba(222,114,16,1)'); ! ctx.fill();
! var blancohocico = ctx.createLinearGradient(320,220,340,210); ! ctx.lineTo(416,135); ! ctx.fill();
! var deg_lomo_3 = ctx.createLinearGradient(340,440,170,330); ! //isla a la derecha del continente grande
! blancohocico.addColorStop(0,'rgba(242,199,171,1)'); ! ctx.lineTo(422,140); ! ctx.beginPath();
! deg_lomo_3.addColorStop(0,'rgba(232,210,100,0.4)'); ! ctx.beginPath();
! blancohocico.addColorStop(1,'rgba(255,255,204,1)'); ! ctx.lineTo(437,135); ! ctx.fillStyle = deg_lomo_3;
! deg_lomo_3.addColorStop(0.5,'rgba(222,114,16,1)'); ! ctx.fillStyle = minicontdergrande;
! var sombrahocico = ctx.createLinearGradient(335,0,380,0); ! ctx.lineTo(449,128.8); ! ctx.moveTo(170,269);
! deg_lomo_3.addColorStop(1,'rgba(222,114,16,1)'); ! ctx.moveTo(560,222);
! sombrahocico.addColorStop(0,'rgba(0,0,0,0.1)'); ! ctx.bezierCurveTo(452,130,447,124,455,125); ! ctx.bezierCurveTo(155,286,154,297,151,310);
! var deg_lomo_4 = ctx.createLinearGradient(340,440,170,330); ! ctx.bezierCurveTo(556,220,554,226,548,222);
! sombrahocico.addColorStop(1,'rgba(0,0,0,0.01)'); ! ctx.lineTo(461,127); ! ctx.lineTo(149,280);
! var puntahocico = ctx.createLinearGradient(367,181.5,381,196); ! ctx.lineTo(477,135.5); ! ctx.lineTo(152,266);
! deg_lomo_4.addColorStop(0.5,'rgba(222,114,16,0.6)'); ! ctx.quadraticCurveTo(544,225,546,227);
! puntahocico.addColorStop(0,'rgba(133,142,141,1)'); ! ctx.lineTo(479,138.5); ! ctx.fill();
! deg_lomo_4.addColorStop(1,'rgba(222,114,16,0)'); ! ctx.quadraticCurveTo(549.5,226,551,229);
! puntahocico.addColorStop(0.3,'rgba(133,142,141,1)'); ! ctx.quadraticCurveTo(472,140,479,155); ! //picos blancos del lomo
! var deg_lomo_picos_blancos = ctx.createLinearGradient(263,145,190,190); ! ctx.quadraticCurveTo(545,226,542,233);
! puntahocico.addColorStop(1,'rgba(0,0,0,1)'); ! ctx.lineTo(483,157); ! ctx.beginPath();
! deg_lomo_picos_blancos.addColorStop(0,'rgba(255,255,255,0)'); ! ctx.quadraticCurveTo(540,230,539,232);
! var sombra_blanca_pata = ctx.createLinearGradient(440,340,380,310); ! ctx.quadraticCurveTo(482.5,153,487,154); ! ctx.fillStyle = deg_lomo_picos_blancos;
! deg_lomo_picos_blancos.addColorStop(0.5,'rgba(255,255,255,0.3)'); ! ctx.lineTo(538,230);
! sombra_blanca_pata.addColorStop(0,'rgba(243,248,155,1)'); ! ctx.bezierCurveTo(492,154,485,162,489,160); ! ctx.moveTo(263,145);
! deg_lomo_picos_blancos.addColorStop(1,'rgba(255,255,255,0)'); ! ctx.quadraticCurveTo(528,232,533,238.5);
! sombra_blanca_pata.addColorStop(1,'rgba(243,248,155,0)'); ! ctx.quadraticCurveTo(488,165,498,166); ! ctx.bezierCurveTo(250,148,234,160,233,183);
! var deg_lomo_picos_blancos_1 = ctx.createLinearGradient(175,180,175,210); ! ctx.bezierCurveTo(540,234,541,240,536,242);
! var sombra_pata = ctx.createLinearGradient(420,335,300,380); ! ctx.quadraticCurveTo(498,169,502,169); ! ctx.bezierCurveTo(250,155,250,160,263,145);
! deg_lomo_picos_blancos_1.addColorStop(0,'rgba(255,255,255,0)'); ! ctx.quadraticCurveTo(546,247,547,240);
! sombra_pata.addColorStop(0,'rgba(142,15,1,0.3)'); ! ctx.quadraticCurveTo(503,171,506,174); ! ctx.fill();
! deg_lomo_picos_blancos_1.addColorStop(1,'rgba(255,255,255,0.3)'); ! ctx.lineTo(546,236);
! sombra_pata.addColorStop(1,'rgba(142,15,1,1)'); ! ctx.quadraticCurveTo(506.5,186,508,172); ! ctx.beginPath()
! var deg_lomo_picos_blancos_2 = ctx.createLinearGradient(160,200,160,240); ! ctx.lineTo(548,234);
! //degradados amarillos de la cola ! ctx.bezierCurveTo(515,172,513,165,514,161); ! ctx.beginPath();
! deg_lomo_picos_blancos_2.addColorStop(0,'rgba(255,255,255,0)'); ! ctx.lineTo(548,232);
! var deg_cola_1 = ctx.createLinearGradient(445,85,555,140); ! ctx.quadraticCurveTo(520,154,518,163); ! ctx.fillStyle = deg_lomo_picos_blancos_4;
! deg_cola_1.addColorStop(0,'rgba(254,249,149,1)'); ! ctx.bezierCurveTo(526,168,536.5,169,540,160); ! ctx.moveTo(173,235);
! var deg_lomo_picos_blancos_3 = ctx.createLinearGradient(160,240,160,320); ! ctx.quadraticCurveTo(560,232,562,226);
! deg_cola_1.addColorStop(0.5,'rgba(254,254,37,1)'); ! ctx.lineTo(560,140); ! ctx.bezierCurveTo(167,244,162,253,159,263);
! deg_lomo_picos_blancos_3.addColorStop(0,'rgba(255,255,255,0)'); ! ctx.fill();
! deg_cola_1.addColorStop(1,'rgba(254,249,149,0)'); ! ctx.lineTo(531,99); ! ctx.bezierCurveTo(158,252,158,245,161,231);
! deg_lomo_picos_blancos_3.addColorStop(0.5,'rgba(255,255,255,0.3)'); ! //parte de abajo continente izquierdo
! var deg_cola_2 = ctx.createLinearGradient(445,85,600,200); ! ctx.bezierCurveTo(487,66,449,53,394,50); ! ctx.fill();
! deg_lomo_picos_blancos_3.addColorStop(1,'rgba(255,255,255,0.3)'); ! ctx.beginPath();
! deg_cola_2.addColorStop(0,'rgba(254,249,149,1)'); ! ctx.fill(); ! ctx.beginPath();
! var deg_lomo_picos_blancos_4 = ctx.createLinearGradient(160,230,160,255); ! ctx.fillStyle = contizqgrande;
! deg_cola_2.addColorStop(0.5,'rgba(254,254,37,1)'); ! //isla entre continentes derecho e izquierdo ! ctx.fillStyle = deg_lomo_picos_blancos_2;
! deg_lomo_picos_blancos_4.addColorStop(0,'rgba(255,255,255,0)'); ! ctx.moveTo(320,360);
! deg_cola_2.addColorStop(1,'rgba(247,151,8,1)'); ! ctx.moveTo(401,120); ! ctx.moveTo(180,200);
! var deg_cola_3 = ctx.createLinearGradient(445,85,600,210); ! ctx.quadraticCurveTo(408,128,404,133); ! ctx.bezierCurveTo(173,208,166,217,160,226);
! var deg_lomo_picos_blancos_5 = ctx.createLinearGradient(190,245,190,275); ! ctx.lineTo(395,407);
! deg_cola_3.addColorStop(0,'rgba(254,249,149,1)'); ! ctx.quadraticCurveTo(413,138,408,140.5); ! ctx.bezierCurveTo(161,219,163,208,167,198);
! deg_lomo_picos_blancos_5.addColorStop(0,'rgba(255,255,255,0)'); ! ctx.quadraticCurveTo(388,404,390,395.5);
! deg_cola_3.addColorStop(0.5,'rgba(254,254,37,1)'); ! ctx.quadraticCurveTo(410,155,388,154); ! ctx.fill();
! deg_lomo_picos_blancos_5.addColorStop(1,'rgba(255,255,255,0.3)'); ! ctx.quadraticCurveTo(384,399,383,395);
! deg_cola_3.addColorStop(1,'rgba(254,249,149,0)'); ! ctx.quadraticCurveTo(396,148,390,143); ! ctx.beginPath();
! var deg_lomo_picos_blancos_6 = ctx.createLinearGradient(180,280,180,320); ! ctx.quadraticCurveTo(392,385,381,380);

http://www.anieto2k.com/demo/canvasﬁrefox.html
! var deg_cola_4 = ctx.createLinearGradient(598,130,590,265); ! ctx.quadraticCurveTo(378,155,375,140); ! ctx.fillStyle = deg_lomo_picos_blancos_5;
! deg_lomo_picos_blancos_6.addColorStop(0,'rgba(255,255,255,0)'); ! ctx.quadraticCurveTo(385,373,378,370);
! deg_cola_4.addColorStop(0,'rgba(254,249,149,1)'); ! ctx.quadraticCurveTo(386,132,389,134); ! ctx.moveTo(209,247);
! deg_cola_4.addColorStop(0.5,'rgba(254,254,37,1)'); ! ctx.quadraticCurveTo(387,129,396,130); ! ctx.bezierCurveTo(205,258,206,267,208,277);
! //circulo grande ! ! ctx.fill();
! deg_cola_4.addColorStop(1,'rgba(254,249,149,0)'); ! ctx.quadraticCurveTo(395,125,401,120); ! ctx.bezierCurveTo(197,270,195,261,194,250);
! //ctx.beginPath(); ! //cristalizado
! var deg_cola_5 = ctx.createLinearGradient(580,200,590,370); ! ctx.fill(); ! ctx.fill();
! ctx.fillStyle = "rgba(0, 0, 100, 1)";/*0.1*/ ! ctx.beginPath();
! deg_cola_5.addColorStop(0,'rgba(254,249,149,1)'); ! //continente grande del centro ! ctx.beginPath();
! ctx.arc(390,278,232,0,Math.PI*2,true); ! ctx.fillStyle = cristal;
! deg_cola_5.addColorStop(0.3,'rgba(254,254,37,1)'); ! ctx.beginPath(); ! ctx.fillStyle = deg_lomo_picos_blancos_6;
! ctx.fill(); ! ctx.moveTo(390,60);
! deg_cola_5.addColorStop(1,'rgba(254,249,149,0)'); ! ctx.fillStyle = contgrande; ! ctx.moveTo(200,280);
! //2 circulo grande ! ctx.bezierCurveTo(321.5,60,266,95,266,138);
! var deg_cola_6 = ctx.createLinearGradient(580,200,590,310); ! ctx.moveTo(452,405); ! ctx.bezierCurveTo(198,290,197,303,200,320);
! ctx.beginPath(); ! ctx.bezierCurveTo(266,181,321.5,216,390,216);
! deg_cola_6.addColorStop(0,'rgba(254,249,149,1)'); ! ctx.quadraticCurveTo(443,395,427,397); ! ctx.bezierCurveTo(190,307,187,290,188,280);
x.fillStyle = deg_lomo_picos_blancos; ! ctx.bezierCurveTo(445.5,216,514,181,514,138);
! deg_cola_4.addColorStop(1,'rgba(254,249,149,0)'); ! ctx.quadraticCurveTo(413,392,432,390.5); ! ctx.fill();
! ctx.moveTo(243,155); ! ctx.bezierCurveTo(514,95,445.5,60,390,60);
! var deg_cola_5 = ctx.createLinearGradient(580,200,590,370); ! ctx.lineTo(420,384); ! ctx.beginPath();
! ctx.bezierCurveTo(227,154,208,170,208,186); ! ctx.fill();
! deg_cola_5.addColorStop(0,'rgba(254,249,149,1)'); ! ctx.lineTo(412,385); ! ctx.strokeStyle = "rgb(0,0,0)";
! ctx.bezierCurveTo(218,174,230,160,243,155); ! ! //cola y lomo
! deg_cola_5.addColorStop(0.3,'rgba(254,254,37,1)'); ! ctx.quadraticCurveTo(405,383,407,381); ! //ctx.moveTo(700,500);
! ctx.fill(); ! ! ctx.fillStyle = "rgba(222, 115, 27, 1)";/*0.1*/
! deg_cola_5.addColorStop(1,'rgba(254,249,149,0)'); ! ctx.quadraticCurveTo(385,384,401,378); ! ctx.arc(700,500,15,0,Math.PI*2,true);
! ctx.beginPath(); ! ! ctx.beginPath();
! var deg_cola_6 = ctx.createLinearGradient(580,200,590,310); ! ctx.quadraticCurveTo(401,374,405,372); ! ctx.stroke();
! ctx.fillStyle = deg_lomo_picos_blancos; ! ! ctx.moveTo(445,87);
! deg_cola_6.addColorStop(0,'rgba(254,249,149,1)'); ! ctx.quadraticCurveTo(402,365,411,360); ! ctx.font="24px Arial";
! ctx.moveTo(235,139); ! ! ctx.bezierCurveTo(530,85,572,108,600,165);
! ! deg_cola_4.addColorStop(1,'rgba(254,249,149,0)'); ! ctx.quadraticCurveTo(407,355,410,350); ! ctx.strokeText("R",691.5,509);! !
! ctx.bezierCurveTo(205,148,185,170,187,184); ! ! ctx.bezierCurveTo(596,135,593,132,590,124);
! var deg_cola_5 = ctx.createLinearGradient(580,200,590,370); ! ctx.lineTo(431,318); }
! ctx.bezierCurveTo(215,155,200,170,235,139); ! ! ctx.bezierCurveTo(620,155,626,195,632,255);
! deg_cola_5.addColorStop(0,'rgba(254,249,149,1)'); ! ctx.quadraticCurveTo(440,319,446,320); ! else {
! ctx.fill(); ! ! ctx.bezierCurveTo(635,225,635,225,637,220);
! deg_cola_5.addColorStop(0.3,'rgba(254,254,37,1)'); ! ctx.quadraticCurveTo(446,312,460,314); ! document.write("Su navegador no soporta esta
! ctx.beginPath(); ! ! ctx.bezierCurveTo(645,465,495,520,400,525);
! deg_cola_5.addColorStop(1,'rgba(254,249,149,0)'); ! ctx.lineTo(460,319); tecnologia");
! ctx.fillStyle = deg_lomo_picos_blancos_1; ! ! ctx.bezierCurveTo(235,528,168,420,150,310);
! var deg_cola_6 = ctx.createLinearGradient(580,200,590,310); ! ctx.quadraticCurveTo(449,313,449,303); ! }
! ctx.moveTo(195,180); ! ! ctx.bezierCurveTo(148,317,148,317,147,331);
! deg_cola_6.addColorStop(0,'rgba(254,249,149,1)'); }

canvas demos

http://www.nevermindthebullets.com/strip.html#1-1

http://mrdoob.com/projects/chromeexperiments/ball_pool/

https://mozillademos.org/demos/marblerun/demo.html

https://mozillademos.org/demos/flight-of-the-navigator/demo.html

https://mozillademos.org/demos/holo-mobile/demo.html (sólo firefox mobile)

http://html-5tutorial.com/static/demo/chrome-logo.html

.leaf{ #blue_core{
height:350px; width:180px;
width:272px; height:180px;
background: #edcf17; -webkit-border-radius:180px;
-webkit-border-radius:55px 30px 245px 0px; -moz-border-radius:180px;
-moz-border-radius:55px 30px 245px 0px; -o-border-radius:180px;
-o-border-radius:55px 30px 245px 0px; border-radius:180px;
border-radius:55px 30px 245px 0px; background:#3f67bc;
position: absolute; background:-webkit-gradient(radial, 90 0, 90, 90 -20, 0, from(#466CC7), to(#72A0CF));
opacity:0.97; background:-moz-radial-gradient(50% -80px, circle cover, #89bbef 0%, #466CC7 60%);
-webkit-transform: rotate(0deg) translate(64px,-0.9258em); line-height:180px;
-moz-transform: rotate(0deg) translate(64px,-0.9258em); -webkit-box-shadow: 2px 12px 8px #aaa;
-o-transform: rotate(0deg) translate(64px,-0.9258em); -moz-box-shadow: 2px 12px 8px #aaa;
transform: rotate(0deg) translate(64px,-0.9258em); -o-box-shadow: 2px 12px 8px #aaa;
} box-shadow: 2px 12px 8px #aaa;
/*-webkit-transition:-webkit-transform 5s ease-out;*/
#yellow{ }
z-index:-97; #white_shell{
background:-webkit-gradient(radial, width:180px;
64 64, 279, -147 99, 100, from(#d9a919), to(white), color-stop(.35, #F0D418)); height:180px;
} -webkit-border-radius:180px;
#yellow2{ -moz-border-radius:180px;
background:-webkit-gradient(radial, -o-border-radius:180px;
64 64, 279, -120 99, 115, from(#d9a919), to(white), color-stop(.35, #F0D418)); border-radius:180px;
z-index:-94; border:15px solid white;
height:79px; vertical-align: middle;
width:255px; line-height:180px;
} }
#green{ #colors{
background: #44A73D; -webkit-border-radius:360px;
background:-webkit-gradient(radial, -moz-border-radius:360px;
64 64, 329, -227 299, 100, from(#44A73D), to(white), color-stop(.40, #46ac3f)); -o-border-radius:360px;
background:-moz-radial-gradient(-100% 45%, circle cover, white 30%, #44A73D 82%); border-radius:360px;
-webkit-transform: rotate(120deg) translate(60px,152px); padding:140px;
-moz-transform: rotate(120deg) translate(60px,152px); -webkit-box-shadow: 0px 10px 15px #aaa;
-o-transform: rotate(120deg) translate(60px,152px); -moz-box-shadow: 0px 10px 15px #aaa;
transform: rotate(120deg) translate(60px,152px); -o-box-shadow: 0px 10px 15px #aaa;
z-index:-96; box-shadow: 0px 10px 15px #aaa;
} }
#red{ #trimmer{
background: #E03e39; border:25px solid white;
background:-webkit-gradient(radial, -webkit-border-radius:370px;
164 100, 280, 466 400, 10, from(#e44d40), to(white), color-stop(.25, #df3b3f)); -moz-border-radius:370px;
background:-moz-radial-gradient(160% 60%, white 0%, #e44d40 60%); -o-border-radius:370px;
-webkit-transform: rotate(-120deg) translate(206px,73px); border-radius:370px;
-moz-transform: rotate(-120deg) translate(206px,73px); z-index: 100;
-o-transform: rotate(-120deg) translate(206px,73px); padding:140px;
transform: rotate(-120deg) translate(206px,73px); padding:0;
z-index:-95; margin:0;
} width:491px;
}

color: opacidad

div { color: #f00; opacity: 1.0; }

div { color: #f00; opacity: 0.5; }

color: rgba

div { color: rgb(0,255,0); }

div { color: rgba(0,255,0,0.5); }

background-size

div { background-size: 100px 65px; }

div { background-size: 400px 65px; }

background-image
background: url(body-top.png) top left no-repeat,
url(body-bottom.png) bottom left no-repeat,
url(body-middle.png) left repeat-y;

border-image

border-image: url(button.png) 0 12 0 12 stretch
stretch;

border-image: url(border.png) 27 27 27 27 round
round;

border-radius
border-radius: 10px;

border-top-right-radius: 10px;

http://slides.html5rocks.com/#rounded-corners

box-shadow

box-shadow: 10px 10px 10px #333;

text-overflow

text-overflow: ellipsis;

Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nam purus nunc, auctor et accumsan ut, aliquam
vel leo. Quisque dignissim tincidunt rhoncus. Duis
sed velit rutrum lorem rutrum faucibus. Nam tincidunt
eros at arcu vestibulum egestas. Donec fringilla,
turpis in auctor luctus, orci orci vestibulum lacus,
a tristique felis erat non diam. Morbi dolor massa,
elementum ac iaculis quis, iaculis sed neque. Aliquam
erat volutpat. Aliquam porttitor auctor massa sit
amet ultrices. Maecenas quis nunc nibh, sit amet
hendrerit leo. Donec a massa eget velit consectetur
fermentum aliquet et eros. Vestibulum volutpat, est
vitae dapibus congue, nibh augue vehicula lacutus es…

text-shadow

text-shadow: 10px 10px 10px #333;

This is sample text.

@font-face
@font-face {
font-family: Helvy;
src: url(MgOpenModernaBold.ttf);
font-weight: bold;
font-style: normal;
}

p.specialFont { font-family: Helvy, sans-serif; }

http://www.fontsquirrel.com/fontface/generator

transformation: rotate

transform: rotate(30deg);

transformation: scale

transform: scale(0.5,2.0);

transformation: skew

transform: skew(-30deg);

transformation: translate

transform: translate(30px, 0);

transitions

transition: all 1s ease;

http://slides.html5rocks.com/#css-transitions

http://www.nearshorenexus.com

media queries

@media (min-width: 1100px){
body{
margin:150px 0 0 100px;
}
}

http://www.alsacreations.fr/

http://benthebodyguard.com/

APIs

http://slides.html5rocks.com/#drag-in

prefijos:

-webkit -moz x -webkit -o

-webkit-box-shadow:2px 2px 5px #666;
-moz-box-shadow:2px 2px 5px #666;
-o-box-shadow:2px 2px 5px #666;
box-shadow:2px 2px 5px #666;

http://prefixmycss.com/

http://www.findmebyip.com/litmus

recursos para ie y plantillas para iniciar html5

http://fetchak.com/ie-css3/

http://www.thewildernessdowntown.com/
*ver con google chrome

HTML5 y CSS3

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to HTML5 y CSS3

Similar to HTML5 y CSS3 (20)

Recently uploaded

Recently uploaded (20)

HTML5 y CSS3