Sombras en imágenes con CSS

Imágenes con sombra desde CSS

Existen diferentes formas de colocar sombras a una imagen, yo les explicare la mas elegante, para Firefox y Safari solo hace falta agregar una propiedad simple para cada navegador y emula la sombra deseada, sin embargo, para Internet Explorer es otra cosa, como siempre nunca tiene nada como estandar y para poder reproducir una sombra (muy mal lograda), debes hacer uso de una llamada a un ActiveX que extrañamente ya incluye el navegador. :getlost:

Sigue leyendo para la explicación completa.

Para firefox hacemos uso de la propiedad -moz-box-shadow y para safari hacemos uso de la propiedad -webkit-box-shadow, ambas propiedades tienen la misma sintaxis:

1
2
3
4
5
6
7
8
9
10

-...-box-shadow: <horizontal> <vertical> <difuminado> <expansión> <color> ;
 
- horizontal: Un valor negativo mueve la sombra hacia la izquierda, un valor positivo hacia
              la derecha y si se deja en cero no se muestra.
- vertical:   Un valor negativo mueve la sombra hacia arriba, un valor positivo hacia abajo y
              si se deja en cero no se muestra.
- difuminado: Es el radio de difuminado de la sombra, si se deja en cero muestra un color solido.
- expansión:  Es el radio de expansión hacia todas partes, con un valor positivo crece, con un
              valor negativo se contrae.
- color:      Es el color de la sombra, debe estar en código hexadecimal.

Para internet explorer se supone que se debe colocar la propiedad Shadow para simular una sombra y su sintaxis es “simple”:

1
2
3
4
5
6
7

filter: progid:DXImageTransform.Microsoft.Shadow( color= <color>, direction= <dirección>,
                                                  strength= <tamaño> );
 
- color:     Es el color de la sombra, debe estar en código hexadecimal.
- dirección: Es la dirección hacia donde se muestra la sombra, solo se permiten los
             valores 0, 45, 90, 135, 180, 225, 270 y 315. (inicia desde la parte superior)
- tamaño:    Es el tamaño de la sombra, si se deja en cero no se muestra.

Ahora que ya explique la sintaxis de cada propiedad, les dejo el ejemplo de como crear una clase de estilo que pueden utilizar en cada imagen a la que le quieran colocar sombra, pueden hacer sus pruebas en cualquiera de estos navegadores.

1
2
3
4
5
6

.sombra
{
    -moz-box-shadow: 2px 2px 5px #999;
    -webkit-box-shadow: 2px 2px 5px #999;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#999999, direction=135, strength=4);
}

Esta es una de tantas formas que existen para hacer el efecto de sombras, tendremos que seguir usando lineas especificas para cada navegador ya que si utilizáramos la propiedad box-shadow del CSS3 seria tan simple como esto:

1
2
3
4

.sombra
{
    box-shadow: 2px 2px 5px #999;
}

Espero que les sirva esta información, a mi me ayudo mucho el saber como hacerlo todo desde el mismo código CSS y poder evitarme el usar muchos DIVs diferentes para lograr la simulación.