Como hacer Thumbnails dinámicos,accesibles y ligeros muy fácil.

Primero definamos algo: Cuanto de ancho y alto,en mi caso,sera de 96x96px.

Comencemos con el HTML,que sera simplemente una imagen metida dentro de un link,con su respectivo alt y demás:

<span id=”thumb_scatman” class=”thumb”>

<a href=”” title=”titulo del thumbnail”>

<img src=”http://linkdejemplo.com/thumbtrans.png&#8221; alt=”thumbnail” />

</a>

</span>

ahora,como veran,la imagen lleva a una imagen png,esta imagen tendra el tamaño del thumbnail (en mi caso 96×96) y estara vacia,pero no sera blanca sino que todo lo que tendra sera el canal alpha.

Una vez hecho esto,vamos a hacer las imagen del thumbnail en mi caso sera una simple foto mia re-escala y con bordes redondeados (se los recomiendo,tambien podrian hacer que el thumb paresca un pin).

Ahora,el siguiente paso,en cualquier editor imágenes (yo uso gimp pero ustedes pueden usar photoshop o lo que sea) tomen el thumbnail que hicieron y subanle el brillo mas o menos un 35% para que quede bastante claro.

Supongamos que la imagen del thumb original sea “thumb_1.png”,la version mucho mas clara es la “thumb_1_ligth.png” y la totalmente transparente es “thumbtrans.png”.

Bueno,entonces demos lo dinámico con el todo poderoso CSS:

.thumb {
height: 96px;
width: 96px;
}
#thumb_scatman {
background-image: url(img/thumb_1_ligth.png);
}
#thumb_scatman:hover {
background-image: url(img/thumb_1.png);
}

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: