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.

Packs de recursos a precios increíbles
Aprovecha la ocasión y hazte con alguno de estos packs con recursos de calidad para profesionales, ahora a precios muy rebajados:
Pack rebajado un 99%1000 fotos rebajadas un 64%

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