Estilos>>Técnicas
Bueno pues parece que vamos a empezar a hacer alguna cosa que creíamos que no se podía hacer con las páginas HTML.
Por lo que sabíamos hasta el momento, las imágenes forman un rectángulo que nos permite que el texto fluya por la izquierda o por la derecha del mismo.
Esto parece bastante lógico cuando se trata de fotografías, ya que estamos acostumbrados a percibirlas como un todo en el que la figura y el fondo componen un paralelogramo. Sin embargo la situación varía mucho cuando la imagen que vemos es un dibujo, denominado clipart en el lenguaje informático en el que nos encontramos unos contornos que lo separan claramente del fondo y le hacen adquirir una personalidad propia. Este es el caso de nuestra valiente patinadora, que se ha venido deslizando por la red desde su origen en la librería Open Clipart que es una galería de imágenes distribuidas bajo licencia Creative Commons y a la que puedes acceder para descargar trabajos de otros internautas o aportar el tuyo si tienes una buena mano.
El caso es que, correspondiendo a sus esfuerzos también hemos hemos hecho lo posible para aprender a deslizarnos y para ello hemos contado con la inestimable ayuda de uno de los grandes expertos en aplicación de CSS: Eric Meyer, en cuya web encontrarás el artículo "ragged float" que explica el principio que se ha aplicado para crear este ejemplo.
¡Uf, menos mal! Aunque creo que han aparecido un para de referencias interesantes en los párrafos anteriores, ya estaba empezando a pensar que iba a ser incapaz de encontrar tema con el que ir rellenando el espacio para que pudieras comprobar el efecto de deslizamiento del texto siguiendo el perfil de una imagen. Como estoy escribiendo con una resolución de 1024x768 y puede que esta página se muestre dentro de una estructura de marcos, es seguro que ya habremos superado a nuestra amiga la patinadora, así que vamos a ver un par de detalles sobre la técnica empleada.
La idea en la que se apoya esta técnica es que la imagen flote y el texto fluya a su alrededor. Pero como lo que no queremos es que la imagen sea un rectángulo tenemos que hacer un par de trabajos para lograr el efecto deseado:
. En el artículo de
Eric Meyer se hace con todas las imágenes tengan la misma
altura, sin embargo en nuestra patinadora hemos utilizado alturas
diferentes haciendo fragmentos más altos cuando el borde
derecho se encontraba a la misma altura como ocurre con la cabeza.A partir de aquí no hace falta más que empezar a escribir a continuación de la última imagen. Obviamente, si nuestra imagen estuviera insertada en otro punto de la página podríamos tener texto por encima, a su lado y por debajo según dicha posición.
Así pues, toda la técnica se basa en la
siguiente regla CSS aplicada a los elementos img:
.patina { margin: 0 1em 0 0;
float: left;
clear: left;
}
El único margen es el de la derecha, la
flotación es a la izquierda y, para evitar que las
imágenes aparezcan una a continuación de otra se
ha añadido la propiedad clear:left,
de manera que nada pueda
flotar a la izquierda de cada imagen.
El artículo original de Eric Meyer
incluía la propiedad height con un
valor en
píxeles ya que todas las imágenes
tenían la misma altura. Como en nuestro caso no era posible
probé primero a poner la altura con un valor "auto" y,
finalmente opté por suprimir la propiedad, dado que las
imágenes llevan ya la indicación de altura y ha
funcionado correctamente en Internet Explorer 6, Mozilla 1.7.8, Firefox
1.04 y Opera 7.54 para Windows que han sido los navegadores sobre los
que he probado la página.
p{position:
relative; z-index:50;} al descubrir que, en Internet
Explorer las
imágenes podían superponerse al texto en algunos
momentos. Al incluir un índice de profundidad para los
párrafos que son los elementos que bordean las
imágenes
se consigue evitar esta situación que no afectaba a los
otros
navegadores. Explicamos brevemente un método de trabajo para fragmentar una imagen en tiras utilizando Gimp:
. En la sección desliga el ancho y el
alto pulsando sobre el icono 
y
adjudícale los valores que consideres más
adecuados a ambos parámetros. (15 píxeles para el
alto y 5 para el ancho pueden ser una buena opción) para crear la primera "loncha".
Guárdala.