Creando sombras con CSS3 compatibles con varios navegadores

Con la llegada de CSS3 tenemos varias opciones a la hora de diseñar bastante interesantes, y una de ellas es la de darle sombras a los elementos, evitándonos de esta manera tener que crear imágenes para hacer las sombras, algo que sin duda era un poco coñazo.

La técnica es supersencilla y se aprende en un momentito. Esta es la sintaxis de la propiedad:

box-shadow: (desplazamiento horizontal)px (desplazamiento vertical)px (longitud)px (cod color);

Pero igual lo has probado y dices… ¿porqué no me funciona en algunos navegadores? Pues porque hay que usar sentencias compatibles, asique si queremos que funcione en todos los navegadores CSS3 necesitaremos utilizar algo así:

  • -moz-box-shadow:0px 0px 25px #000; (Para Firefox)
  • -webkit-box-shadow:0px 0px 25px #000; (Para los basados en Webkit)
  • box-shadow:0px 0px 25px #000; (Para el resto con CSS3)

Es una pena que no valga con utilizar una única sentencia, pero de momento es lo que hay.

Mejora el rendimiento de tu web
Te enseñamos cómo crear tu web con WordPress y cómo conseguir mucho tráfico en poco tiempo:
Crear un blog con WordPressPasa de 0 a 5.000 visitas en tu web

Categorías

CSS

Carlos Sánchez

Una de mis pasiones es el diseño, y de hecho trabajo como diseñador de interfaces para aplicaciones de iOS, además de hacer de vez en cuando... Ver perfil ›

Un comentario

  1.   saiseihogo dijo

    Sí, esto es con css3 pero por que no agregras también los códigos para ie6, 7 y 8?

Escribe un comentario