{"id":598,"date":"2010-01-12T20:00:05","date_gmt":"2010-01-12T19:00:05","guid":{"rendered":"http:\/\/www.davidrojas.net\/?p=598"},"modified":"2013-11-23T19:09:57","modified_gmt":"2013-11-23T18:09:57","slug":"screencast-mejora-progresiva-con-css3","status":"publish","type":"post","link":"https:\/\/www.davidrojas.net\/index.php\/diseno-web\/screencast-mejora-progresiva-con-css3\/","title":{"rendered":"Videotutorial: Mejora progresiva con CSS3"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.davidrojas.net\/wp-content\/uploads\/2010\/01\/css3_screencast.png\" alt=\"\" title=\"css3_screencast\" width=\"163\" height=\"104\" class=\"derecha alignright size-full wp-image-640\" \/>En este videotutorial voy a ense\u00f1aros algunas propiedades de <a href=\"http:\/\/www.css3.info\/preview\/\" title=\"Informaci\u00f3n sobre CSS3 (ingl\u00e9s)\">CSS3<\/a> que nos servir\u00e1n para mejorar visualmente nuestros dise\u00f1os sin necesidad de usar im\u00e1genes o javascript, concretamente el manejo de sombras, gradientes y transformaciones s\u00f3lo con CSS. Puesto que <a href=\"http:\/\/www.w3.org\/TR\/css3-roadmap\/\" title=\"Roadmap de CSS3\">CSS3 a\u00fan no es un est\u00e1ndar<\/a>, tendremos que usar las extensiones propietarias que implementan los navegadores m\u00e1s modernos, como las \u00faltimas versiones de Safari, Chrome y Firefox. Estas propiedades generalmente contiene el prefijo <code>-moz<\/code> para Firefox y <code>-webkit<\/code> para Safari y Chrome (webkit es que el motor utilizado en estos navegadores).<\/p>\n<p><em class=\"linkem\"><a href='http:\/\/www.davidrojas.net\/demos\/css3\/' title=\"Demo mejora con CSS3\" target=\"_blank\">Ver Demo CSS3<\/a><\/em><br \/>\n<!--more--><\/p>\n<h3>Ver screencast (duraci\u00f3n: 15:49)<\/h3>\n<div class=\"video\">\n<iframe loading=\"lazy\" src=\"\/\/player.vimeo.com\/video\/80137240?portrait=0&amp;color=c00202\" width=\"490\" height=\"368\" frameborder=\"0\" webkitallowfullscreen mozallowfullscreen allowfullscreen><\/iframe>\n<\/div>\n<ul>\n<li><a href=\"https:\/\/mega.co.nz\/#!2BMEmRoa!I-a0Thj2OKnpk-0pudkbtjTRMFF9LJDi3JYnlMlmz7U\" title=\"Descargar versi\u00f3n alta calidad\">Descargar videotutorial en alta calidad &#8211; MOV (46 MB)<\/a><\/li>\n<li><a href=\"https:\/\/mega.co.nz\/#!fU9AiTSK!P89K8E2wtnkw8vygN3d5Im8OOV5SgxwkQ2WDqFtPdQ8\" title=\"Descargar versi\u00f3n iPod\/iPhone\">Descargar videotutorial optimizado para iPod\/iPhone &#8211; M4V (24 MB)<\/a><\/li>\n<\/ul>\n<p><\/p>\n<p>Como siempre, pod\u00e9is encontrar todos los screencasts en la <a href=\"http:\/\/www.davidrojas.net\/index.php\/category\/screencasts\/\" title=\"Videotutoriales de dise\u00f1o, desarrollo web, codeigniter, CSS3\">p\u00e1gina de videotutoriales<\/a>, o suscribiros al <a href=\"http:\/\/itunes.apple.com\/WebObjects\/MZStore.woa\/wa\/viewPodcast?id=326994250\" title=\"Enlace a videopodcast de David Rojas en iTunes\">podcast de iTunes<\/a>.<\/p>\n<h3>HTML y CSS<\/h3>\n<p>En el fuente del ejemplo de arriba ten\u00e9is c\u00f3digo completo, pero voy a destacaros aqu\u00ed las partes importantes. En el CSS:<\/p>\n<pre lang=\"css\">\r\na.foto{\r\n  background: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 255, 255)), to(rgb(207, 207, 207)));\r\n  -webkit-border-radius:8px;\r\n  -moz-border-radius:8px;\r\n  -webkit-box-shadow:0px 0px 20px #6F5F4C;\r\n  -moz-box-shadow:0px 0px 20px #6F5F4C;\r\n  -webkit-transition:all .3s linear;\r\n}\r\na.foto:hover{\r\n  -webkit-transform: rotate(-5deg) scale(1.08);\r\n  -moz-transform: rotate(-5deg) scale(1.08);\r\n}\r\na.foto span{\r\n  text-shadow:1px 1px 2px #9F886D;\r\n}\r\n<\/pre>\n<p>Y el HTML:<\/p>\n<pre lang=\"html4strict\">\r\n<a class=\"foto\" href=\"#\">\r\n   <img decoding=\"async\" src=\"underworld_evolution.jpg\" alt=\"Underworld\" \/>\r\n   <span>Texto descriptivo a pie de foto<\/span>\r\n<\/a>\r\n<\/pre>\n<h3>\u00bfCu\u00e1ndo utilizar estas propiedades?<\/h3>\n<p>Es importante tener siempre presente que estas propiedades no son soportadas por todos los navegadores, por lo tanto tenemos que restringir su uso a mejoras est\u00e9ticas, que no influyan en la maquetaci\u00f3n o la usabilidad de la web. Los navegadores que no las soporten (como Internet Explorer) simplemente ver\u00e1n una versi\u00f3n un poco \u00abdescafeinada\u00bb de nuestro sitio.<\/p>\n<p>Tambi\u00e9n es interesante conocer todo el potencial de CSS3 que nos proporciona <a href=\"http:\/\/developer.apple.com\/safari\/articles\/cssrecipes.html\" title=\"trucos CSS para webkit\">webkit<\/a> si estamos interesados en el desarrollo web m\u00f3vil, ya que adem\u00e1s de Safari y Chrome, los navegadores de iPhone, Android, las nuevas Blackberry, Nokia y Palm Pre est\u00e1n basados en webkit.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este videotutorial voy a ense\u00f1aros algunas propiedades de CSS3 que nos servir\u00e1n para mejorar visualmente nuestros dise\u00f1os sin necesidad de usar im\u00e1genes o javascript, concretamente el manejo de sombras, gradientes y transformaciones s\u00f3lo con CSS. Puesto que CSS3 a\u00fan no es un est\u00e1ndar, tendremos que usar las extensiones propietarias que implementan los navegadores m\u00e1s [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,9,3,12],"tags":[],"class_list":["post-598","post","type-post","status-publish","format-standard","hentry","category-css","category-desarrollo-web","category-diseno-web","category-screencasts"],"_links":{"self":[{"href":"https:\/\/www.davidrojas.net\/index.php\/wp-json\/wp\/v2\/posts\/598","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.davidrojas.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.davidrojas.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.davidrojas.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.davidrojas.net\/index.php\/wp-json\/wp\/v2\/comments?post=598"}],"version-history":[{"count":55,"href":"https:\/\/www.davidrojas.net\/index.php\/wp-json\/wp\/v2\/posts\/598\/revisions"}],"predecessor-version":[{"id":980,"href":"https:\/\/www.davidrojas.net\/index.php\/wp-json\/wp\/v2\/posts\/598\/revisions\/980"}],"wp:attachment":[{"href":"https:\/\/www.davidrojas.net\/index.php\/wp-json\/wp\/v2\/media?parent=598"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.davidrojas.net\/index.php\/wp-json\/wp\/v2\/categories?post=598"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.davidrojas.net\/index.php\/wp-json\/wp\/v2\/tags?post=598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}