Uso de CSS3 - Sombras
0 comentarios
Las hojas de estilo en cascada (CSS) son habituales en el día a día del desarrollo web, y con las nuevas funcionalidades de CSS3, hay diseñadores que auguran la tecnología Flash al olvido en un breve periodo de tiempo. Mi opinión es que no creo que este sea tan rápido, ya que dichas propiedades son muy potentes, pero mientras tanto se siguen utilizando navegadores que no soportan las nuevas especificaciones de este lenguaje, y por lo tanto los desarrolladores web tendrán que seguir utilizando CSS2.1. Además, Flash es una tecnología muy potente y avanzada, y que en el caso de las animaciones algunas son realmente espectaculares.
Una buena solución es utilizar estas propiedades para los navegadores que soportan varias de estas propiedades, como es el caso de Firefox, Chrome, Safari, Opera... y más con las noticias a diario del lanzamiento de nuevas versiones de los principales navegadores como es Firefox 4, Chrome 9 y creo que el más importante y esperado por los desarrolladores que es Internet Explorer 9, y no lo digo porque sea el navegador que más me guste, más bién porque me encantaría que nadie más volviera a usar el resto de navegadores de la familia de Microsoft, ya que al lado del resto, se nota una falta de potencia y seguridad.
Actualmente, el uso de estas propiedades conlleva un incremento en el número de lineas de código, y la recomendación es usar el menor número de lineas para ahorrar el máximo de bytes a descargar del lado del servidor. Para que lo entendais pondré un ejemplo.
Si queremos que una caja aparezca con sombra, tendremos que crear varias lineas de código:
#contenido{
-moz-box-shadow: 2px 2px 5px #AAA; //para firefox
-webkit-box-shadow: 2px 2px 5px #AAA; //para safari y chrome
-ms-box-shadow: 2px 2px 5px #AAA; //para IE9
box-shadow: 2px 2px 5px #AAA; //para Opera y futuras versiones que no necesiten del prefijo
}