Grid de thumbnails usando simples listas

Hoy me preguntaban como hacer una galeria de imagenes en grid con un listado simple, usando un list con UL – LI y CSS sin tener que hacer calculos con PHP o javascript, creo que eso ya es muy cosa del pasado, pero sin embargo hay quienes lo haciamos. Como ya liberé el blog, pues aprovecho [...]

Hoy me preguntaban como hacer una galeria de imagenes en grid con un listado simple, usando un list con UL – LI y CSS sin tener que hacer calculos con PHP o javascript, creo que eso ya es muy cosa del pasado, pero sin embargo hay quienes lo haciamos.

Como ya liberé el blog, pues aprovecho para compartir con quienes tengan las mismas dudas que yo tuve algun día y como hago este tipo de cosas muy simples que ayudan mucho a dar una buena imagen a un site pues podemos apartir de una simple estructura de CSS dar los efectos que deseemos.

Sobre este tema hay muchos tutoriales completos en internet, googlea un poco buscando con keywords como thumbnails lists y gallery with css, tambien te dejo unos links que puede aportarte mucho

• How to Create a Photographic Gallery Using CSS
• CSS Image Gallery
• Styling an image gallery with CSS
• New Markup (and CSS) for Thumbnail-Galleries

Y muchos otros que hay por ahí..

Antes que nada les recomiendo leer sobre Box Model de CSS que nos permitira entender porque nunca funcionan las cosas en IE ( 5 – 6 ) y el porque encontramos tantos hacks para resolver problemas que dan dolor de cabeza.

Ahora si entrémos en materia

1.- Primero que nada definamos la estructura del Listado que necesitamos, por ejemplo si deseamos tener resultado como el de http://www.csselite.com/, entonces propongo algo así:

                
                
                

             info del thumb



                
                
                

             info del thumb



                
                
                

             info del thumb



                
                
                

             info del thumb

Ver preview

2.- Crearémos los estilos necesarios para dar forma a la estructura que ya tenemos

Ver resultado

Resultado:….

y eso es todo, espero que no se haya pasado nada, avisenme porfavor si deje por por alto algun punto…saludos

(0) Comments Permalink