Galería de fotos polaroid, sólo usando CSS 3

Viendo la galería de fotos con estilo polaroid que han creado en el blog de Tutorialzine, la cual utiliza jQuery y un mínimo CSS3, que es una sombra "box-shadow" y una rotación que utiliza "-webkit-transform".
Así hemos creado una galería de fotos similar pero que únicamente utiliza CSS 3, pero aplicando las diferentes opciones que permite este.

El código XHTML creado, únicamente consta de una lista de imágenes (ul > li) con su respectivo pie de imagen:
  • Globos
  • Coche
  • Niebla
  • Molino de viento
  • Bosque
La hoja de estilos, la teneis aquí, en ella, lo más destacable es:
Por un lado, tenemos el contenedor de todas las imágenes (UL), al cual le aplicamos un gradiente de fondo utilizando "-webkit-gradient" en la propiedad "background" del elemento. Aplicamos un gradiente circular o radial con una posición y tamaño, que va de un gris más oscuro, a un gris más claro.
ul.thumb {
   position: relative;
   list-style: none;
   background: -webkit-gradient(radial, 45 45, 50, 50 10, 640, from(#555), to(#222)) !important;
   background: #666;
}

También tenemos el posicionamiento y la rotación que damos a cada LI, con su respectiva imagen y texto. Posicionamos el elemento centrado tanto en altura como en anchura, lo redimensionamos y le aplicamos sombra, además, es importante tener en cuenta que este elemento tiene un efecto "ease-in-out" en el "-webkit-transition" con una duración de 3 segundos, es el que hace que en WebKit, se amplien y reduzcan con el efecto de zoom . Además, con el selector ":nth-child()", cambiamos la posición y giramos cada imagen, además de aplicar a cada imagen una sombra.
ul.thumb li {
   position: absolute;
   top: 50%;
   left: 50%;
   padding: 6px 6px 24px 6px;
   background: #FFF;
   width: 150px;
   height: 130px;
   -moz-box-shadow:1px 1px 6px #222;
   -webkit-box-shadow:1px 1px 6px #222;
   box-shadow:1px 1px 6px #222;
   -webkit-transition: all 3s ease-in-out;
   z-index: 0;
}
ul.thumb li img {
   width: 100%;
   height: 100%;
}
ul.thumb li:nth-child(1) {
   margin-top: -130px;
   margin-left: -130px;
   -moz-transform: rotate(30deg);
   -webkit-transform: rotate(30deg);
   transform: rotate(30deg);
}

Para terminar, también es muy destacable el estilo que aplicamos al estado ":hover" de cada imagen, en este, utilizamos "-webkit-transform" para cambiar la rotación y poner la imagen completamente horizontal:
ul.thumb li:hover{
   font-size: 1.3em;
   z-index: 10;
   width: 480px;
   height: 322px;
   margin-top: -151px;
   margin-left: -240px;
   -moz-box-shadow:8px 8px 24px #111;
   -webkit-box-shadow:8px 8px 24px #111;
   box-shadow:8px 8px 24px #111;
   -moz-transform: rotate(0deg);
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
}

La galería de fotos podeis visualizarla aquí y es únicamente funcional desde FireFox 3.5 (no veremos efecto de ampliación alguno) y desde navegadores utilizando últimas versiones de WebKit, como por ejemplo Safari y Google Chrome (en estos, el efecto de ampliación funciona gracias a -webkit-transition).

La razón por la que no funcionará en Internet Explorer (cualquier versión), es que este, ni en su última versión cumple con el estandar CSS 3, por ejemplo, el selector :nth-child(N) no es reconocido por IE.

Comentarios

Comentario de Francisco - 12 de Agosto de 2014 - 23:37
Cómo puedo cambiar el fondo de la página y meterlo dentro de un div con dimensiones especificas sin alterar el efecto de las imagenes?
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario:
Nuestra página web utiliza cookies propias y de terceros, para realizar el análisis de la navegación de los usuarios y así poder mejorar nuestros servicios. Si continúas navegando, consideramos que aceptas su uso. Puedes cambiar la configuración u obtener más información aquí