CSS: Cajas con sombra para todos los navegadores usando box-shadow + Shadow Filter

Vamos a ver cómo conseguir un interesante efecto de sombra usando solamente CSS. En el ejemplo aplicaremos la sombra a un div, pero este efecto se puede usar prácticamente con cualquier elemento HTML, como imágenes, tablas, formularios, etc.

Aunque para las versiones actuales de todos los navegadores solo sería necesario usar la propiedad estándar “box-shadow“, para lograr la compatibilidad con todos los navegadores y sus versiones, vamos a utilizar 5 propiedades distintas.

Las dos primeras son necesarias para versiones anteriores de Mozilla Firefox y de navegadores basados en WebKit, como Safari y Google Chrome. La tercera propiedad es la estándar de CSS 3, válida para Opera y para todos los navegadores actuales. Las dos últimas son filtros específicos de Microsoft (Shadow Filter) y son necesarias para antiguas versiones de Internet Explorer.

.shadow {
    -moz-box-shadow: 3px 3px 4px #111;
    -webkit-box-shadow: 3px 3px 4px #111;
    box-shadow: 3px 3px 4px #111;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#111111')";
    /* IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#111111');
}

Para usar este efecto en nuestro sitio web podemos añadir la clase anterior a la hoja de estilos (.css) y usar el atributo “class” en cualquier elemento al que le queramos aplicar una sombra:

<div class="shadow">Ejemplo de div con sombra</div>

En caso necesario, también podemos declarar los estilos directamente sobre el elemento, usando el atributo “style”:

<div style="-moz-box-shadow: 3px 3px 4px #111; -webkit-box-shadow: 3px 3px 4px #111; box-shadow: 3px 3px 4px #111; -ms-filter: 'progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=#111111)'; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#111111');">
Ejemplo de div con sombra
</div>

Ejemplo

Por supuesto puedes cambiar los valores de la sombra para que quede a tu gusto, sin olvidar que tendrás que hacer los cambios en todas las propiedades, intentando que la sombra sea similar en los distintos navegadores.

Valores de box-shadow

1. Desplazamiento de la sombra sobre el eje X. Relativo al elemento; puede tomar valores negativos. (Ejemplo: 3px)
2. Desplazamiento de la sombra sobre el eje Y. Relativo al elemento; puede tomar valores negativos. (Ejemplo: 3px)
3. Cantidad de efecto blur de la sombra. (Ejemplo: 4px)
4. Color de la sombra. (Ejemplo: #111)

Atributos de Shadow Filter

1. Extensión de la sombra, en píxeles. (Ejemplo: Strength=4)
2. Dirección de la sombra, en grados. Sólo puede tomar los valores: 0, 45, 90, 135, 180, 225, 270, 315. (Ejemplo: Direction=135)
3. Color de la sombra (Ejemplo: Color=’#111111′)