Aplicaremos sombras a un objeto o capa utilizando solamente CSS.
Para navegadores adaptados a el standard CSS3: Firefox, Ópera, etc:
-moz-box-shadow: #000 10px 10px 10px 10px;
Lo primero que tenemos indicado (#000) es el color de la sombra.
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.
Para Internet Explorer:
filter:progid:DXImageTransform.Microsoft.Shadow(color:#000, direction= 135);
color: color de la sombra.
direction: dirección hacia la que se desplaza la sombra. Su valor se indica en grados y sólo se permiten los valores 0, 45, 90, 135, 180, 225, 270 y 315.
strength: distancia en píxeles hasta la que se extiende la sombra.
En un ejemplo:
#cajaroja {
width: 250px;
height: 250px;
background: #FF0000;
-moz-box-shadow: #000 5px 5px 5px; /* CSS3 standard */
filter: progid:DXImageTransform.Microsoft.Shadow(color=black, direction= 135, strength:2); /* IE */
}
Vamos a aplicarle sombra a un texto.
Para navegadores standard CSS3: Firefox, Ópera, etc:
text-shadow: #000 10px 10px 10px;
Para Internet Explorer:
filter:progid:DXImageTransform.Microsoft.Shadow(direction= 135, color:#000);
En un ejemplo:
p.textorojo {
width: 250px;
color: #FF0000;
text-shadow: #000 5px 5px 5px; /* CSS3 standard */
filter: progid:DXImageTransform.Microsoft.Shadow(color=black, direction= 135, strength:2); /* IE */
}
Este sería un texto con sombra utilizando solamente CSS.
