Fotografia.com

Fotografía y cámaras digitales

Jueves, 14 de julio de 2005

Galerias de Fotos con CSS

A la hora de pensar en alternativas para presentar imágenes dinámicamente en un sitio web nos encontramos en que existen muchas y de las más variadas. Tenemos galerías hechas en flash, en javascript y en CSS. Si, El CSS puede ser una alternativa interesante y práctica para presentar imágenes dinámicamente.

css gallery

En estos simples ejemplos, las imágenes son pre cargadas y el css se encarga de mostrarlas a medida que se el puntero del mouse se posiciona por encima de ellas. Simples si, pero potencialmente interesantes ya que combinadas con un pequeño script server side (como por ejemplo PHP), se podría hacer una interesante galería dinámica.

En el primer ejmplo, tenemos un efecto de imágenes superpuestas de forma vertical u horizontal donde se despliega la seleccionada por el puntero del mouse.

En el segundo ejemplo, tenemos una galería un poco más compleja como también rígida.

Lo bueno de todo esto es la estandarización y accesibilidad, ya que tanto javascript como flash todavía no son 100% estándares. Estamos hablando de realizar galerías visualmente dinámicas con XHTML y CSS absolutamente estándares.

Claro, estos ejemplos como son con imágenes precargadas se puede volver un poquito engorroso al cargar todas las imágenes de una galería que contenga muchas de estas, pero no deja de ser una alternativa potente y muy flexible.
Cansado por mi parte de las pesadas galerías en flash, creo que esto, aunque no es novedad, le da un aire fresco a las opciones de galerías dinámicas.

 

COMENTARIOS

1
jgarcía
19 de julio de 2005 - 12:35 pm

Interesantes galerías. Muchas gracias por la información.

He encontrado por casualidad FD y me ha gustado mucho, Lucas.

2
Katia
7 de abril de 2007 - 10:56 pm

Muy buenos ejemplos, pero tengo que realizar una galeria de mas de 200 imagenes y dejar la misma calidad…. esto me da mas o menos una idea
pero seguire buscando.

 

COMENTAR




XHTML: Puedes usar estas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Publicidad

red de Zumo de Blogs

Logotipo de Zumo de BlogsZumo de Blogs
Blog Corporativo de Zumo de Blogs
Logotipo de GizmosGizmos
Blog de tecnología y consumo
Logotipo de Visual BetaVisual Beta
Blog de Aplicaciones online y offline
Logotipo de Notas de CineNotas de Cine
Conoce los secretos del mundo del cine
Logotipo de Modo JuegosModo Juegos
Un blog sobre videojuegos y consolas
Logotipo de A Fin de MesA fin de mes
Un blog sobre ahorro para finalizar el mes
Logotipo de TrotamillasTrotamillas
Un blog sobre los viajes
Logotipo de Centro MujerCentro Mujer
Un espacio diferente para compartir todo lo que nos interesa como mujer
Logotipo de Catálogo MotorCatálogo Motor
Toda la información del motor en un solo sitio

Blogs para Empresas

Logotipo de PequeliaPequelia
Un mundo para padres e hijos.

Páginas

Categorías

Archivos

Créditos

 

Una idea de Blogestudio Estándar W3C sobre CSS Estándar W3C sobre XHTML 1.0