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.

¿Necesitas contratar un hosting para tu web?
En SiteGround tienes disponible una amplia oferta de hostings para todo tipo de bolsillos y necesidades. Encuentra el hosting que estás buscando al mejor precio, con las últimas tecnologías en velocidad y seguridad web y soporte en español 24h:
HostingHosting WordPress

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?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *