Sombras (box-shadow)

La propiedad CSS box-shadow añade efectos de sombra alrededor del marco de un elemento, se pueden definir múltiples efectos separados por comas. La caja de la sombra se describe por los desplazamientos en X e Y, los radios de desenfoque y dispersión, y el color relativos al elemento.

La propiedad box-shadow permite proyectar una sombra difuminada desde el marco de casi cualquier elemento. Si border-radius es especificado en un elemento con la propiedad box-shadow, la sombra adopta la misma curva en las esquinas. El z-orden de múltiples cajas de sombra es la misma que de múltiples sombras de texto (la primera sombra definida se ubica hasta arriba).

La sintaxis completa de la propiedad box-shadow es muy compleja y se define en el borrador de trabajo del módulo de fondos y bordes de CSS3. A continuación se muestra su sintaxis simplificada habitual:

box-shadow: <medida> <medida> <medida>? <medida>? <color>

La primera medida es obligatoria e indica el desplazamiento horizontal de la sombra. Si el valor es positivo, la sombra se desplaza hacia la derecha y si es negativo, se desplaza hacia la izquierda.
La segunda medida también es obligatoria e indica el desplazamiento vertical de la sombra. Si el valor es positivo, la sombra se desplaza hacia abajo y si es negativo, se desplaza hacia arriba.
La tercera medida es opcional e indica el radio utilizado para difuminar la sombra. Cuanto más grande sea su valor, más borrosa aparece la sombra. Si se utiliza el valor 0, la sombra se muestra como un color sólido.
La cuarta medida también es opcional e indica el radio con el que se expande la sombra. Si se establece un valor positivo, la sombra se expande en todas direcciones. Si se utiliza un valor negativo, la sombra se comprime.
El color indicado es directamente el color de la sombra que se muestra.

Desafortunadamente, esta propiedad sólo está disponible en los navegadores que más se preocupan por los estándares. El navegador Safari 3 incluye la propiedad con el nombre -webkit-box-shadow y Firefox 3.1 la incluye con el nombre -moz-box-shadow. La siguiente regla CSS muestra una sombra en los navegadores Firefox y Safari:

.elemento {
-webkit-box-shadow: 2px 2px 5px #999;
-moz-box-shadow: 2px 2px 5px #999;
}

La propiedad box-shadow permite definir una sombra a un objeto de la página. Debemos definir tres valores y un color, por ejemplo:

#recuadro1{
box-shadow: 30px 10px 20px #aaa;
border-radius: 20px;
background-color:#ddd;
width:200px;
padding:10px;
}

El código anterior mostrara lo siguiente:

Ejemplo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et arcu sodales, aliquam tellus ut, dapibus quam. Pellentesque a risus at eros bibendum gravida. Quisque blandit tempus efficitur. Pellentesque tortor turpis, luctus id tincidunt at, pharetra vel tortor. Morbi nibh nunc, consequat non velit quis, vehicula varius ante.

La propiedad tiene 3 valores y un color, los valores son los siguientes:

El desplazamiento horizontal de la sombra, positivo significa que la sombra se encuentra a la derecha del objeto, un desplazamiento negativo pondrá la sombra a la izquierda.
El desplazamiento vertical, uno negativo la sombra será en la parte superior del objeto, uno positivo la sombra estará por debajo.
El último valor es el color a aplicar a la sombra.