Capitulo 8

       8.1. Estilos básicos.

8.1.1. Establecer la anchura y altura de las imágenes.

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.

El motivo es que normalmente dos imágenes diferentes no comparten la misma altura/anchura. En la práctica, esta forma de trabajo produce una sobrecarga de estilos que la hace inviable.

<img src="imagen.png" width="120" height="250" />

8.1.2. Eliminar el borde de la imágenes con enlaces.

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;
}

       8.2. Estilos avanzados.

8.2.1. Sombra (drop shadow)

La mayoría de aplicaciones de diseño gráfico permiten añadir una sombra a las imágenes. CSS no incluye propiedades que permitan mostrar de forma sencilla sombras en los elementos.

A continuación se muestra una técnica sencilla para añadir sombra a las imágenes.

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 alrededor del elemento que va a mostrar una sombra. La ventaja de este método es que es sencillo y solamente requiere añadir un par de por cada elemento. Además, como la sombra es una imagen muy grande, el efecto funciona con elementos de cualquier tamaño.