Segundo ejemplo de álbum fotográfico animado con CSS 3

  • Por
  • CSS
Realizamos otro ejemplo de animaciones para tu galería de fotos solamente con CSS 3.
Continuamos explorando las posibilidades de las animaciones CSS3, con nuevos ejemplos prácticos que estamos seguros resultarán interesantes para los aficionados al desarrollo de páginas web.

En este artículo vamos a realizar una galería de fotos, en la que las imágenes aparecen desordenadas y al pasar por ellas pasan a primer plano y se ven a su tamaño real. En el artículo anterior vimos como realizar un ejemplo distinto de galería inspirado en las clásicas Polaroid. Ahora podemos ver otra idea de galería fotográfica con animaciones CSS 3, que tendrá un resultado bastante curioso, pero veremos que es más sencilla de realizar que la anterior.

Vamos a colocar primero nuestro código HTML para ir viendo poco a poco cómo construiríamos nuestro ejemplo.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
   <title>Album de fotos con CSS</title>
<link rel="stylesheet" href="album2.css" type="text/css">
</head>

<body>
<div id="galeria">
   <div id="imagen1">
      <img src="images/image1.jpg">
      
   </div>   
   <div id="imagen2">
      <img src="images/image2.jpg">
      
   </div>   
   <div id="imagen3">
      <img src="images/image3.jpg">
      
   </div>   
   <div id="imagen4">
      <img src="images/image4.jpg">
      
   </div>   
   <div id="imagen5">
      <img src="images/image5.jpg">
      
   </div>   
   <div id="imagen6">
      <img src="images/image6.jpg">
      
   </div>   
</div>

</body>
</html>

En principio no hay nada que no sepamos, es simplemente un <DIV id=galeria> y dentro hemos ido colocando las imágenes dentro de otros <DIV>.

Ahora pasamos al código CSS que es el realmente importante:

Primero unos estilos generales para la galería:

#galeria {
      width: 800px;
      height: 600px;
      margin: 20px auto;
      padding: 40px;
      position: relative;
}   

Luego unos estilos específicos para cada imagen:

#galeria div {
   position: absolute;
   overflow: hidden;
   opacity: 0.9;
   -webkit-transition: all 0.5s linear;
   -webkit-border-radius: 15px;
   border-radius: 15px;
   -webkit-box-shadow: -3px -3px 50px #666;
   box-shadow: -3px -3px 50px #666;
   -webkit-transform: scale(0.60);
}   

Aquí lo que hacemos es crear un borde alrededor de cada imagen, dejarla un poco transparente y bajarla el tamaño, para que luego cuando pasemos el ratón crezca a su tamaño real.

Nota: Como venimos advirtiendo, las animaciones CSS 3 todavía no se encuentran disponibles en todos los navegadores. En estos ejemplos estamos trabajando a modo de demostración, con los atributos de CSS 3 propios del navegador Chrome o Safari. En breve podremos usar los atributos propios de CSS 3, que serían simplemente los mismos, pero quitando el prefijo -webkit. Pero de momento, para ver los ejemplos en funcionamiento y que se vean todas las animaciones CSS, hay que ejecutarlos en Google Chrome o Safari.

#galeria div:hover {
   z-index: 999;
   -webkit-transform: rotate(0deg);
   opacity: 1;
   
}   

Con este código conseguimos que la imagen vaya al primer plano de la pantalla y se vea sin transparencia, al pasar el ratón por encima de la imagen.

#imagen1 {
   top: 50px;
   left: 130px;
   z-index:1;
}
         
#imagen2 {
   top: 300px;
   left:100px;
   z-index:7;
}
         
#imagen3 {
   top: 420px;
   left:350px;
   z-index:3;
}
         


#imagen4 {
   top: 135px;
   left: 450px;
   z-index:4;
}
         
#imagen5 {
   top: -100px;
   right: 200px;
   z-index:5;
}
         
#imagen6 {
   top: 220px;
   right: 120px;
   z-index:6;
}

Y finalmente con estos estilos lo que hacemos es colocar las imágenes donde nos de la gana. Si tuviéramos un sistema automático que nos mostrara más imágenes estos estilos los podríamos poner directamente en nuestro código.

Otra opción posible para este álbum es la de rotar las imágenes para que parezcan más desordenadas, para ello tan solo tendríamos que añadir la propiedad -webkit-transform: rotate(xdeg); a cada imagen, siendo x los grados a rotar.

Podemos ver como se queda nuestro album en el siguiente enlace.

En el siguiente artículo veremos como crear un menú dinámico sin Javascript ni jQuery ni programación en otros lenguajes que no sean HTML y CSS 3.

Autor

Sara Alvarez

Equipo DesarrolloWeb.com

Compartir

Comentarios

Xorocobos

31/3/2011
Pequeño añadido
Hola a tod@s

Como le comenté a la amiga Sara quiero añadir un par de puntos a estas impresionantes demostraciones

Tanto para esta galería de imágenes y la otra, la de la Polaroid, lo que hace posible estos efectos nuevos en CSS3 son las funciones box-shadow, transform y transition, hasta aquí lo tenemos claro y nos ponemos en el tema.

El ejemplo que nos da Sara es para Webkit, pero en Gecko, MS y Opera también están disponibles estas funciones.

Les dejo los links a las páginas de MDN doc center donde además de explicarnos las funciones para Firefox nos muestra la compatibilidad con los principales navegadores

https://developer.mozilla.org/en/css/-moz-transform
https://developer.mozilla.org/en/CSS/-moz-transition
https://developer.mozilla.org/En/CSS/Box-shadow

A la espera quedamos todos de que esto se estandarice y no tengamos que estar especificando para cada navegador como por ejemplo con Border-Radius que ya lo reconocen todos.

Un saludo

Jorge

05/4/2011
Hola
Muy buenos estos ejemplos, han sido de gran ayuda pero creo que deberian generalizarlos a otros navegadores populares como Mozilla Firefox e Internet Explorer.