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 screencast (duración: 15:49)
- Descargar videotutorial en alta calidad – MOV (46 MB)
- Descargar videotutorial optimizado para iPod/iPhone – M4V (24 MB)
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.
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
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.
@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.
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.
@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.
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 😀
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.
Una vez más muy buen trabajo.
Gracias por tus aportes.
Muchisimas gracias David, por el tutorial. Me ha sido de gran ayuda.
Que grande una vez mas.
Voy a ponerlo en practica para mi portafolio, muchas gracias. Por cierto ya que este comentario tiene un tiempo despues del video digo que al menos en firefox4 ya funciona el efecto de -webkit-transition:all .3s linear;
cambiandolo claro por -moz-transition:all .3s linear;
Un saludo!
[…] Videotutorial: Mejora progresiva con CSS3: En este tutorial David Rojas nos enseña como utilizar algunas propiedades CSS3 para mejorar nuestros diseño sin necesidad de utilizar imágenes. […]
[…] Videotutorial: Mejora progresiva con CSS3: En este tutorial David Rojas nos enseña como utilizar algunas propiedades CSS3 para mejorar nuestros diseño sin necesidad de utilizar imágenes. […]
Hice el tutorial, funciona perfecto, en el explorer 9, ya se ven los bordes redondeados y las sombras, no la aceleración y desaceleración de movimiento. Obviamente cuando hiciste el video, no estaba el explorer 9, y dicen que el 10 ya tomaría bien los degradados, esperemos así sea. Felicitaciones por acercarnos al css3. Saludos!
Hola David, tengo un inconveniente, intenté agragar tres columnas de texto debajo del tutorial que hicimos con vos de una imagen con bordes redondeados y sombra, y las tres columnas, me toman las propiedades de la rotación, el borde, y la sombra externa, lo subí a la web, para que lo veas, está en:
http://zonatest.comuf.com/
Yo voy a seguir intentando, pero no puedo hacer que no herede los estilos del div de la imagen, saludos, Danny.
[…] Videotutorial: Mejora progresiva con CSS3: En este tutorial David Rojas nos enseña como utilizar algunas propiedades CSS3 para mejorar nuestros diseño sin necesidad de utilizar imágenes. […]
[…] Videotutorial: Mejora progresiva con CSS3: En este tutorial David Rojas nos enseña como utilizar algunas propiedades CSS3 para mejorar nuestros diseño sin necesidad de utilizar imágenes. […]
Sabine List
Videotutorial: Mejora progresiva con CSS3 « David Rojas – Diseño y desarrollo web