Sombras en CSS 3 con box-shadow

  • Por
  • CSS
Crear sombras en CSS3 con el atributo box-shadow. Por fin podremos aplicar sombras a los elementos de la página, sin usar imágenes, Javascript ni nada extra, simplemente con un atributo de CSS 3.
CSS 3 supone una nueva revolución en el diseño web, aportando soluciones a muchas de las prácticas que utilizan los diseñadores para decorar las páginas web. Esto quiere decir que, muchas de las cosas que antes hacíamos con técnicas de diseño que requerían uso de imágenes, como las sombras o las esquinas redondeadas, a partir de ahora las vamos a poder especificar simplemente desde CSS.

Como vimos en el artículo introducción a CSS 3, No cabe duda que significará un grande avance para las personas que nos dedicamos a desarrollar webs, que nos permitirá ahorrar tiempo y sobre todo, economizar código fuente, lo que hará las páginas más ligeras y separará aun más el contenido de la forma.

A lo largo del Manual de CSS 3 ya vimos varios atributos nuevos de bastante importancia y variedad y ahora le toca el turno a box-shadow, el atributo de CSS3 que nos permitirá definir sombras a los elementos de la página.

Atributo box-shadow

El atributo box-shadow requiere varios valores para especificar las características de la sombra, como difuminado, separación de la sombra y la propia caja o color. La sintaxis es como esta:

box-shadow: 5px -9px 3px #000;

Por orden de aparición, los valores que se indican en box-shadow son:

Desplazamiento horizontal de la sombra: La sombra de un elemento suele estar un poco desplazada con respecto al elemento que la produce y su posición será en función del ángulo con el que llegue la luz. En el caso de este ejemplo el primero de los valores, 5px, quiere decir que la sombra aparecerá 5 píxeles a la derecha. Si la sombra quisiéramos que apareciera un poco hacia la izquierda del elemento original que la produce, pondríamos un valor negativo a este atributo. Cuanto más desplazamiento tenga una sombra, el elemento que la produce parecerá que está más separado del lienzo de la página.

Desplazamiento vertical de la sombra: El segundo valor que colocamos en el atributo box-shadow es el desplazamiento vertical de la sombra con respecto a la posición del elemento que la produce. Este valor es similar al desplazamiento horizontal. Valores positivos indican que la sombra aparecerá hacia abajo del elemento y valores negativos harán que la sombra aparezca desplazada un poco hacia arriba. En el caso del anterior ejemplo, con -9px estamos indicando que la sombra aparecerá desplazada 9 píxeles hacia arriba del elemento.

Difuminado: El tercer valor indica cuánto queremos que esté difuminado el borde de la sombra. Si el difuminado fuera cero, querría decir que la sombra no tiene ningún difuminado y aparece totalmente definida. Si el valor es mayor que cero, como en nuestro ejemplo 3px, quiere decir que la sombra tendrá un difuminado de esa anchura, 3 píxeles en el ejemplo.

Color de la sombra: El último atributo que se indica en el atributo box-shadow es el color de la sombra. Generalmente las sombras en el mundo real tienen un color negro o grisaceo, pero con CSS3 podremos indicar cualquier gama de color para hacer la sombra, lo que nos dará bastante más versatilidad a los diseños gracias a la posible utilización de sombras en distintos colores, que puedan combinar mejor con nuestra paleta. En el ejemplo anterior habíamos indicado una sombra con color negro.

Compatibilidad de las sombras CSS con navegadores

Lo cierto es que las CSS 3 todavía están en fase de especificación, aunque ya se encuentran muy avanzadas y los navegadores más modernos ya han comenzado a implementarlas. No obstante, el W3C todavía no ha liberado las especificaciones de esta versión de las Hojas de Estilo en Cascada y hasta que empiece a recomendar su implementación los clientes web no tienen por qué entenderlas.

Por el momento podemos utilizar box-shadow en las versiones más moderas del navegador Opera. Por su parte, navegadores basados en Mozilla y WebKit tienen soporte a esta funcionalidad de CSS3, pero a través de unos atributos CSS con una ligera variación en su nombre.

Atributo box-shadow para navegadores basados en Mozilla, como Firefox: De manera temporal, Firefox es capaz de interpretar el atributo -moz-box-shadow, por ejemplo:

-moz-box-shadow: 1px 1px 0px #090;

Atributo box-shadow para navegadores basados en WebKit, como Safari o Google Chrome: En estos momentos y de manera temporal, navegadores como Chrome o Safari entienden el atributo: -webkit-box-shadow, por ejemplo:

-webkit-box-shadow: 3px 3px 1px #fc8;

Como podremos imaginar, si deseamos ampliar al máximo la compatibilidad con box-shadow, necesitaríamos indicar tanto el propio atributo box-shadow (que funciona en Opera y en el futuro funcionará en todos los navegadores), así como -moz-box-shadow y -webkit-box-shadow para que funcione en las versiones actuales de Firefox, Safari, Chrome, etc.

Ejemplos de Sombras CSS3

Ahora veamos varios ejemplos de sombras creadas directamente con CSS 3 y el atributo box-shadow, con sus variantes para compatibilidad temporal en los navegadores Mozilla o WebKit.

#cajasombra{
   background-color: #ddd;
   width: 300px;
   padding: 10px;
   
   box-shadow: 5px 5px 0 #333;
   -webkit-box-shadow: 5px 5px 0 #333;
   -moz-box-shadow: 5px 5px 0 #333;
}

Esto crearía una capa con un gris claro como color de fondo y una sombra desplazada abajo y a la derecha en 5 píxeles y sin difuminado. Además, hemos definido un color de sombra gris oscuro para el elemento.

#sombraclara{
   width: 200px;
   padding: 10px;
   background-color: #999;
   color: #fff;
   
   box-shadow: 2px 2px 2px #ffc;
   -webkit-box-shadow: 2px 2px 2px #ffc;
   -moz-box-shadow: 2px 2px 2px #ffc;
}

Este otro ejemplo es para una sombra un poco menor, también desplazada hacia abajo y a la derecha y con un difuminado de 2 píxeles. Además hemos indicado un color amarillo claro para la sombra, por lo que, para verla bien, tendríamos que colocar este elemento sobre un fondo oscuro.

#sombraredondeada{
   background-color: #090;
   color: #fff;
   width: 400px;
   padding: 10px;
   -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
   
   box-shadow: 15px -10px 3px #000;
   -webkit-box-shadow: 15px -10px 3px #000;
   -moz-box-shadow: 15px -10px 3px #000;
}

En este tercer ejemplo tenemos un caso curioso de sombra, pues está aplicada sobre un elemento que tiene las esquinas redondeadas con CSS 3. Así pues, la sombra también debe tener las sombras redondeadas, para ajustarse al elemento que la produce. Ambos navegadores con compatibilidad a sombras y CSS 3 funcionan correctamente con sombras y bordes redondeados.

Para acabar, ponemos un enlace a una página donde puedes ver los ejemplos de sombras en CSS 3.

Ten en cuenta que debes probar estos ejemplos con Opera, Firefox, Safari o Chrome, que son los que actualmente soportan este atributo.

Si deseas ampliar las informaciones y practicar más con este nuevo atributo de CSS3 para la realización de sombras, te recomendamos leer el artículo sobre cómo hacer un resplandor exterior con CSS 3.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Livan

31/3/2010
Bordes redondeados y sombras con CSS3
Muy bueno el recurso, soluciona y optimiza los porblemas generados por la utilización de muchas imágenes en un diseño web haciendo el sitio mas ligero... PERO (siempre hay uno)... si estamos haciendo un sitio optimizado para que se vea en la mayoría de los navegadores mas utilizados mundialmente (Mozilla; Chrome; Opera; IE 7 u 8), en éste último los efectos de redondeado de esquinas y sombras no los reconoce por lo que no los muestra, solo se ven los recuadros con sus letras, el color de fondo y las ezquinas sin redondear; es decir nada de lo que qerríamos que se viera se verá, en Opera si se muestra el efecto de sombra pero no el redondeado, en Chrome no he probado, y en el Mozilla si se visualiza todo el efecto.
Asi que queda por la desición de cada cual si utiliza este recurso o se va por la vieja escuela de las sonmbras y redondeses de esquinas con imágenes.
Sería muy bueno, y que no quede en la utopía, que los desarrolladores de navegadores Web se pusieran de acuerdo almenos en la estandarización de la interpretación de los códigos y recursos utilizados y existentes en el mundo para evitarnos a los desrrolladores y diseñadores dolores de cabeza como este.

Juan Martín

01/4/2010
Multiples sombras
quería comentar que con este nuevo atributo css es posible asignar multiples sombras a un mismo elemento, separando cada una por una coma:

-moz-box-shadow: 1px 1px 0px #090 , -1px -1px 0px #009;
esto seria una sombra verde inferior derecha y otra azul superior izquierda

al menos en Firefox 3.6 funciona, no probe en otros exploradores

cadavid

01/5/2010
es una imagen con sombra lo que se utiliza en esa pagina en la columna derecha?
Hola soy un des arrollador novato y estoy desarrollando una pagina web centrada y me gusta mucho la sombra que tiene la columna derecha de esta web, me gustaria saber como se hizo.

gracias XD

eljuanca

20/5/2010
mas sobre sombras
Se puede decir que soy otro novato y para ser franco , todo lo que he podido aprender sobre desarrollo de webs , se lo debo a esta pagina y a quienes estan detras de ellas.No me canso de agradecer a estas personas cada dia de mi vida.Bueno, al grano, hablando de sombras, a mi me encanta el efecto de sombra que tienen los menus desplegables que se derivan del navegador principal de esta pagina.(ese que sale -por ejemplo- cuando posicionamos el cursor en monotematicos o en secciones.En honor a la verdad me gusta el efecto completo y quisiera saber como lo puedo hacer, si no es mucho pedir y si puedo hacerlo con css.gracias una vez mas.

bernardao

02/2/2011
Como hacer efectos que se aplican en esta página
Buenas,
A los dos que preguntan como hacer efectos que se pueden ver en esta página, decirles que pueden ver el código CSS en la siguiente dirección.
http://www.desarrolloweb.com/estilo_2009.css

midesweb

13/7/2011
la sombra de la derecha...
cadavid, la sombra que hay en el diseño de este sitio está realizada con una imagen de fondo. Nosotros todavía no usamos las características de CSS y además, en el momento del rediseño de este sitio al que te refieres (que fue en 2009) todavía ningún navegador soportaba las CSS3.

simon

02/11/2011
Sombras
muy bueno, le da un toque especial a las mis paginas... gracias

Diego

14/9/2012
Gracias!
Gracias a tu explicación pude entender lo que nunca había entendido... era tan simple!

Pr0fug0

21/1/2013
Sombra encima de una imagen de fondo
Estoy haciendo una pagina y por lo que veo el fondo de la pagina es un color

Si le pongo una imagen de fondo a mi pagina e intento poner un box-shadow
no funciona :s que hago?

luiscr269

12/2/2013
Pruebas con navegadores
Hola. Acabo de empezar a meterme en el tema de la creación de webs, os agradezco estos cursos tan amenos, tanto en web como en video.

He comparado box-shadow en distintos navegadores y este es el resultado:
- Firefox 18.0: funciona "box-shadow" y no funciona "-moz-box-shadow"(?)
- Chrome 24.0: funciona "box-shadow" y "-webkit-box-shadow"
- Explorer 8.0: no funciona nada (que sigan así).

Saludos.

Rafael

16/7/2014
Sombras
Siempre que he querido hacer efectos en mi blog los saco de esta pagina, esta muy buena amigo un saludo!

http://como-bajar-de-peso-rapido-web.blogspot.com/