8.2.1. Sombra (drop shadow)
La mayoría de aplicaciones de diseño gráfico permiten añadir una sombra (llamada drop shadow en inglés) a las imágenes. CSS no incluye propiedades que permitan mostrar de forma sencilla sombras en los elementos.
No obstante, existen varias técnicas sencillas y otras más avanzadas que permiten crear sombras que se adapten a cualquier imagen o elemento. A continuación se muestra una técnica sencilla para añadir sombra a las imágenes.
El estilo final de las sombras creadas con esta técnica se muestra a continuación:
Figura 8.1 Sombra aplicada a las imágenes y otros elementos mediante CSS
La técnica mostrada se presentó por primera vez en la página web http://wubbleyew.com/tests/dropshadows.htm y consiste en la utilización de un par de elementos <div> alrededor del elemento que va a mostrar una sombra. La sombra se consigue mediante una imagen muy grande que contiene una sombra orientada hacia el lado derecho e inferior.
La ventaja de este método es que es sencillo y solamente requiere añadir un par de <div> por cada elemento. Además, como la sombra es una imagen muy grande, el efecto funciona con elementos de cualquier tamaño.
El mayor inconveniente de este método es que la sombra siempre se muestra en la misma dirección (derecha inferior) y que en Internet Explorer 6 y versiones anteriores sólo muestran la sombra correctamente cuando el color de fondo de la página es blanco (ya que Internet Explorer 6 y versiones anteriores no soportan imágenes en formato PNG con transparencias).
El código HTML y CSS del ejemplo anterior es bastante sencillo:
.dropshadow {
float:left;
clear:left;
background: url(imagenes/shadowAlpha.png) no-repeat bottom right !important;
background: url(imagenes/shadow.gif) no-repeat bottom right;
margin: 10px 0 10px 10px !important;
margin: 10px 0 10px 5px;
padding: 0px;
}
.innerbox {
position:relative;
bottom:6px;
right: 6px;
border: 1px solid #999999;
padding:4px;
margin: 0px 0px 0px 0px;
}
<div class="dropshadow">
<div class="innerbox">
<img src="imagenes/imagen.png" alt="Imagen genérica" />
</div>
</div>
<div class="dropshadow">
<div class="innerbox">
<h4>Párrafo de texto</h4>
<p>Esta técnica no sólo permite añadir sombra a las imágenes, sino a cualquier elemento.</p>
</div>
</div>