Videotutorial: Mejora progresiva con CSS3

En este videotutorial voy a enseñaros algunas propiedades de CSS3 que nos servirán para mejorar visualmente nuestros diseños sin necesidad de usar imágenes o javascript, concretamente el manejo de sombras, gradientes y transformaciones sólo con CSS. Puesto que CSS3 aún no es un estándar, tendremos que usar las extensiones propietarias que implementan los navegadores más modernos, como las últimas versiones de Safari, Chrome y Firefox. Estas propiedades generalmente contiene el prefijo -moz para Firefox y -webkit para Safari y Chrome (webkit es que el motor utilizado en estos navegadores).

Ver Demo CSS3

Ver screencast (duración: 15:49)

Como siempre, podéis encontrar todos los screencasts en la página de videotutoriales, o suscribiros al podcast de iTunes.

HTML y CSS

En el fuente del ejemplo de arriba tenéis código completo, pero voy a destacaros aquí las partes importantes. En el CSS:

a.foto{
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 255, 255)), to(rgb(207, 207, 207)));
  -webkit-border-radius:8px;
  -moz-border-radius:8px;
  -webkit-box-shadow:0px 0px 20px #6F5F4C;
  -moz-box-shadow:0px 0px 20px #6F5F4C;
  -webkit-transition:all .3s linear;
}
a.foto:hover{
  -webkit-transform: rotate(-5deg) scale(1.08);
  -moz-transform: rotate(-5deg) scale(1.08);
}
a.foto span{
  text-shadow:1px 1px 2px #9F886D;
}

Y el HTML:

<a class="foto" href="#">
   <img src="underworld_evolution.jpg" alt="Underworld" />
   <span>Texto descriptivo a pie de foto</span>
</a>

¿Cuándo utilizar estas propiedades?

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éticas, que no influyan en la maquetación o la usabilidad de la web. Los navegadores que no las soporten (como Internet Explorer) simplemente verán una versión un poco “descafeinada” de nuestro sitio.

También es interesante conocer todo el potencial de CSS3 que nos proporciona webkit si estamos interesados en el desarrollo web móvil, ya que además de Safari y Chrome, los navegadores de iPhone, Android, las nuevas Blackberry, Nokia y Palm Pre están basados en webkit.

Si te ha gustado este artículo, por favor compártelo:

Creado el Martes, 12 de Enero, 2010 a las 8:00 PM y archivado en CSS, Desarrollo Web, Diseño Web, Screencasts. Puedes seguir los comentarios de esta entrada a través del feed RSS 2.0. También puedes dejar un comentario, o trackback desde tu propia web.

7 comentarios para “Videotutorial: Mejora progresiva con CSS3”

Nicho dice:

Enero 16, 2010 en 9:41 PM

Oye pues gracias por este tutorial tan interesante, es bueno conocer todas estas técnicas para optimizar nuestros sitios, ojalá y todos los navegadores pudieran soportar css3
Maicro dice:

Febrero 13, 2010 en 7:39 PM

Como siempre, genial.

¿Sabes para cuándo será estándar la versión 3 de CSS? Bueno, estándar creo que es, ¿no? Pero, ¿para cuándo no será necesario añadir el nombre de los motores en las propiedades de los selectores?

Me quedo con tu “Y bien” para expresar la impotencia que da IE… La versión 8 no implementa CSS3. ¿Qué pretenderán? En fin.

Gracias. Un saludo.
David Rojas dice:

Febrero 15, 2010 en 10:26 AM

@Maicro Igual que con HTML5, el W3C va lentísimo, así que no se sabe cuando estará listo, pero el hecho de que los navegadores estén “empujando” hará que se den más prisa. El nombre de los motores se eliminará cuando la especificación sea oficial. Tiene sentido hacerlo así, porque todas estas propiedades forman parte del draft, pero cuando salga definitivo es posible que alguna se elimine o que cambien los parámetros. Sobre IE, han dicho que IE9 implementará bordes redondeados, y creo que nada más.
Maicro dice:

Febrero 16, 2010 en 10:26 AM

Gracias. ¡Jo! Lo del IE es de vergüenza ajena.

Después de sopesarlo mucho creo que esperaré a que la versión tres sea oficial. Ahora prefiero centrarme en otros aspectos.

Un abrazo.
David Rojas dice:

Febrero 16, 2010 en 11:48 PM

@Maicro Lo triste es que en este blog, que es bastante “niche” y concentrado en desarrollo web, reciba entre un 20-25% de visitas de IE. Aunque esa tendencia poco a poco va cambiando.
Maicro dice:

Marzo 4, 2010 en 12:03 PM

Supongo que los que llegamos a tu página somos noveles en el mundo de la creación de páginas. En esa inexperiencia y falta de conocimiento se engloba los problemas que IE nos plantea a nosotros. Así es que, en cierto modo, incluso veo baja esa cifra.

En mayor o menor medida somos unos cabezotas que nos cuesta desprendernos de nuestras costumbres. Yo reconozco que me costó desligarme del IE. Ahora, sin embargo, no lo soporto
Bruce dice:

Mayo 22, 2010 en 3:20 AM

Gracias. ¡Jo! Lo del IE es de vergüenza ajena.

Después de sopesarlo mucho creo que esperaré a que la versión tres sea oficial. Ahora prefiero centrarme en otros aspectos.

Un abrazo.