Sombras nada más ... entre Firefox e IE

Lentamente, los navegadores van incorporando opciones de diseño aunque, claro está, cada uno lo hace a su modo y con sus propia sintaxis; pequeño detalle que ... nos vuelve locos.

Las sombras son una de esas opciones y ni la w3.org tiene claro que hacer con ellas y ha sido removida temporalmente de las especificaciones del futuro CSS3. Se soponía que uno podría aplicarlas de manera similar a esto:

box-shadow: 5px 5px 5px #AABBCC;

Pero, pese a que box-shadow aún no funciona, algunos navegadores siguen teniendo la posibilidad de agregar sombras, no solo a los textos usando la propiedad text-shadow, sino también a bloques, es decir, a etiquetas como DIV, P o incluso IMG y  si bien se recomienda que esos bloques estén dimensionados con width o height, sólo es necesario en versiones de Internet Explorer anteriores a la 8.

Lo confuso es que cada navegador tiene su propio juego de instrucciones excepto Opera donde no está implementado. Por ejemplo, todas estas declaraciones deberían generar el mismo resultado:

en Firefox 3.5 en adelante (ver detalles):

-moz-box-shadow: 5px 5px 5px #ABC;

en los que usan WebKit como Chrome y Safari (ver detalles):

-webkit-box-shadow: 5px 5px 5px #ABC;

en Internet Explorer 8 (ver detalles):

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5)";

en Internet Explorer en general (ver detalles):

filter: progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5);

Este es un texto dentro de un DIV

Bueno, eso del mismo resultado es un decir porque en IE las sombras se muestran "duras" más estáticas pero, algo es algo.

Para aplicar el efecto, he declarado una clase y la he agregado a un DIV:

<style>
.sombra {
  /* propiedades normales */
  -moz-border-radius: 10px;
  background-color: #456;
  color: #DEF;
  font-size: 24px;
  height: 30px;
  margin: 20px auto;
  padding: 10px;
  text-align: center;
  width: 400px;
  /* propiedades de la sombra */
  -moz-box-shadow: 5px 5px 5px #ABC;
  -webkit-box-shadow: 5px 5px 5px #ABC;
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5)";
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5);
}
</style>

<div class="sombra"> Este es un texto dentro de un DIV </div>

De manera similar, prodría aplicarse a un elemento más complejo:

Esta es una imagen dentro de un DIV

La sintaxis para Firefox y todos los navegadores basados en Gecko es la siguiente (los que usan WebKit son similares, sólo cambia el nombre de la propiedad):

-moz-box-shadow: offsetX offsetY blurRadius spreadRadius colorRGB;

offsetX offsetY indican la distancia horizontal y vertical del comienzo de la sombra; valores positivos colocan la sombra debajo; valores negativos, colocan la sombra arriba:

-moz-box-shadow y -webkit-box-shadow
Este es un texto dentro de un DIV	Este es un texto dentro de un DIV	Este es un texto dentro de un DIV

blurRadius indica el efecto blur o esfumado, cuanto más alto sea, más se esfuma y, por defecto es 0:

blurRadius 1	blurRadius 10	blurRadius 50
Este es un texto dentro de un DIV	Este es un texto dentro de un DIV	Este es un texto dentro de un DIV

spreadRadius es el tamaño de esa sombra, su ancho y su alto; un valor de 0 hace que sea tan grande como el elemento:

spreadRadius 5	spreadRadius 10	spreadRadius 20
Este es un texto dentro de un DIV	Este es un texto dentro de un DIV	Este es un texto dentro de un DIV

Hay un dato extra que podemos incluir: la palabra inset que hará que la sombra, en lugar de estar afuera, esté adentro. Un ejemplo:

-moz-box-shadow: -110px 2px 30px 1px #AABBCC inset;

Este es un texto dentro de un DIV

Para tener esa sombra en ambos ángulos, agregamos otra definición, separándola con una coma. De este modo:

-moz-box-shadow: 5px 5px 5px #ABC, -5px -5px 5px #ABC;

Este es un texto dentro de un DIV

La propiedad puede ser combinada con cualquier otra (bordes, fondos, curvas) y generar cualquier tipo de efecto extraño:

-moz-box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;

Este es un texto dentro de un DIV

En Internet Explorer lo que se usa es uno de los tantos filtros disponibles, la propiedad básica es filter aunque en IE8 se habla de -ms-filter, en realidad, ambas son la misma; la única diferencia es que en un caso, los valores se colocan entre comillas y en el otro, no:

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(propiedades)"; 
filter: progid:DXImageTransform.Microsoft.Shadow(propiedades);

Cada una de esas propiedades se separa con una coma y hay disponibles cuatro:

color indica el color de la sombra en formato RGB
direction establece la direccion (un ángulo) de la sombra y es un valor en grados (por defecto 225)
enabled puede ser false o true y habilita o deshabilita la sombra
strength es el tamaño de la sombra, cuánto se extenderá y su valor máximo es 255

filter: sólo en Internet Explorer
Este es un texto dentro de un DIV	Este es un texto dentro de un DIV	Este es un texto dentro de un DIV

Las sombras pueden agregarse y quitarse a voluntad, por eso podríamos crear alguna clase de efecto hover. Las quitamos con:

-moz-box-shadow:  none;
-webkit-box-shadow:  none; 
filter: progid:DXImageTransform.Microsoft.Shadow(enabled=false);

Al colocar el cursor encima, se mostrará una sombra ...

<style>
  .sombra {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    filter: progid:DXImageTransform.Microsoft.Shadow(enabled=false);
  }
  .sombra:hover {
    -moz-box-shadow: 5px 5px 5px #AABBCC;
    -webkit-box-shadow: 5px 5px 5px #AABBCC;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5,enabled=true);
}
</style>

<div class="sombra"> ............... </div>