Figura 9.1 Sombra aplicada a las imágenes y otros elementos mediante CSS
Utilizando las propiedades width y height, es posible mostrar las imágenes con cualquier altura/anchura, independientemente de su altura/anchura real:
#destacada {
width: 120px;
height: 250px;
}
<img id="destacada" src="imagen.png" />
No obstante, si se utilizan alturas/anchuras diferentes de las reales, el navegador deforma las imágenes y el resultado estético es muy desagradable.
Por otra parte, establecer la altura/anchura de todas las imágenes mediante CSS es una práctica poco recomendable. El motivo es que normalmente dos imágenes diferentes no comparten la misma altura/anchura. Por lo tanto, se debe crear una nueva regla CSS (y un nuevo selector) para cada una de las diferentes imágenes del sitio web.
En la práctica, esta forma de trabajo produce una sobrecarga de
estilos que la hace inviable. Por este motivo, aunque es una solución
que no respeta la separación completa entre contenidos (XHTML) y
presentación (CSS), se recomienda establecer la altura/anchura de las
imágenes mediante los atributos width y height de la etiqueta <img>:
<img src="imagen.png" width="120" height="250" />
Cuando una imagen forma parte de un enlace, los navegadores muestran
por defecto un borde azul grueso alrededor de las imágenes. Por tanto,
una de las reglas más utilizadas en los archivos CSS es la que elimina
los bordes de las imágenes con enlaces:
img {
border: none;
}
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. Esto se ha
arreglado en la versión 3 de CSS.
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 9.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>