HTML5 y CSS3

html5 y css3 construyendo la web 2.0

¿qué es HTML5?

1. no es una sola gran cosa

2. no hay que desechar nada

3. es fácil empezar

4. ya es funcional

5. llegó para quedarse

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; }

nuevos elementos

HTML5 doctype<!DOCTYPE html>

elementos estructurales nos da nuevo vocabulariosemántico para distintas partes de la estructura, eliminando la necesidad de IDs y clasesInternet 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> havent been able to test it out yet (20 user limit apparently) but this is certainly cool. <div class="entry"> Personally, I cant 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, Ive 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 havent 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 cant 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, Ive 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>

ejemplosHTML5: <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://slides.html5rocks.com

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); ! deg_lomo_2.addColorStop(0,rgba(255,255,255,0.2)); ! ctx.quadraticCurveTo(485,365,480,380);! 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); ! deg_lomo_4.addColorStop(0,rgba(255,255,255,0.3)); ! ctx.quadraticCurveTo(546,220,547,226);! 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_lomo_picos_blancos_2.addColorStop(1,rgba(255,255,255,0.3)); ! ctx.lineTo(554,232);! 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); ! deg_lomo_picos_blancos_4.addColorStop(1,rgba(255,255,255,0.3)); ! ctx.lineTo(320,410);! 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_lomo_picos_blancos_6.addColorStop(1,rgba(255,255,255,0.3)); ! ctx.lineTo(380,360);! 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.htmlhttps://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: opacidaddiv { color: #f00; opacity: 1.0; }div { color: #f00; opacity: 0.5; }

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

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

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

border-imageborder-image: url(button.png) 0 12 0 12 stretchstretch;border-image: url(border.png) 27 27 27 27 roundround;

border-radius border-radius: 10px;border-top-right-radius: 10px; http://slides.html5rocks.com/#rounded-corners

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

text-overflowtext-overflow: ellipsis;Lorem ipsum dolor sit amet, consectetur adipiscingelit. Nam purus nunc, auctor et accumsan ut, aliquamvel leo. Quisque dignissim tincidunt rhoncus. Duissed velit rutrum lorem rutrum faucibus. Nam tincidunteros 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. Aliquamerat volutpat. Aliquam porttitor auctor massa sitamet ultrices. Maecenas quis nunc nibh, sit amethendrerit leo. Donec a massa eget velit consecteturfermentum aliquet et eros. Vestibulum volutpat, estvitae dapibus congue, nibh augue vehicula lacutus es…

text-shadowtext-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/

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

motores

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/

ventajas vs desventajas

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

http://www.intergraphicdesigns.com	404
http://www.bolsasistemas.com	13
http://www.elnuevoparquet.com	1
url_unknown	1
http://intergraphicdesigns.com	1

HTML5 y CSS3

by InterGraphicDESIGNS on Apr 29, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 420

Statistics

HTML5 y CSS3 — Presentation Transcript