Como hacer una sombra con CSS3 (Box-shadow)

Una de las propiedades interesantes que nos ofrece CSS3 es la capacidad de crear y configurar el efecto de sombra con código CSS. Nos podemos olvidar de crear imágenes con Photoshop y ponerlas como background.

Entre otras cosas, podremos elegir el color, tamaño, desenfoque y desplazamiento de la sombra (drop shadow). En este artí­culo, veremos como implementar este efecto para que sea compatible con todos los navegadores (Mozilla Firefox, Safari, Chrome, Internet Explorer, etc…).

Vamos directo a la materia:

Este seria el código básico para crear la sombra:

#ejemplobasico {
box-shadow: 10px 10px 5px #888;
}

Y esta la sombra:

Ejemplo básico de sombra con CSS3

Pero como se trata de una propiedad CSS3 y los navegadores aún no están estandarizados, tendrás que añadir un par de instrucciones extra para que sea «cross browsing» (compatible con todos los navegadores):

#ejemplobasico {
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}

Veamos ahora unos ejemplos de hasta donde podemos llegar con este increí­ble efecto con distintas configuraciones de distancia, desenfoque, posición, etc…

Ejemplo de sombra a la izquierda y arriba sin desenfoque y con una distancia de 5px:

Ejemplo de sombra plana con CSS3
#ejemplo1 {
-moz-box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px #888;
box-shadow: -5px -5px #888;
}

Ejemplo de la misma sombra pero con desenfoque:

Ejemplo de sombra con desenfoque con CSS3
#ejemplo2 {
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
}

Ejemplo de sombra sin desenfoque pegada a la esquina:

Ejemplo de sombra pegada a la esquina con CSS3
#ejemplo3 {
-moz-box-shadow: -5px -5px 0 5px #888;
-webkit-box-shadow: -5px -5px 0 5px#888;
box-shadow: -5px -5px 0 5px #888;
}

Ejemplo de sombra sin distancia y con un desenfoque de 5px

Ejemplo de sombra sin distancia y con desenfique con CSS3
#ejemplo4 {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}

Con estos ejemplos de sombras, puedes ver como afectan los distintos parámetros para configurar el aspecto de la sombra. A partir de aquí­ tu mismo puedes inventar la sombra que del color y gusto que más te apetezca.

¿Te ha gustado este artí­culo? Deja un comentario y comparte, ¡gracias!

Compartir

3 comentarios sobre “Como hacer una sombra con CSS3 (Box-shadow)”

Deja una respuesta

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

Puedes usar estas etiquetas y atributos HTML:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>