Álbum con efectos en CSS 3

21 de marzo de 2011

Creamos un álbum de fotos con estilos impactantes de CSS 3 y animación, sin utilizar Javascript o jQuery.

A lo largo de varios artículos hemos presentado un avance de las posibilidades de CSS 3 para crear animaciones. que son sin duda una de las novedades más impactantes de esa nueva versión del lenguaje de estilos. En este artículo avanzamos un poco en dinámica de los anteriores de este manual y pasamos a utilizar lo aprendido sobre las animaciones CSS para darle un mejor aspecto a nuestra web.

En este ejemplo comprobaremos como con CSS3 podemos, simplemente aplicando unas cuantas reglas de estilo, dar un formato totalmente distinto e impactante a algo tan simple como unas imágenes y un texto. Además, veremos cómo aplicarle dinamismo a nuestra presentación y una pequeña interactividad, definiendo unicamente unos estilos CSS.

Este ejemplo, que veréis es relativamente sencillo, hace años sería muy complicado de hacer y tendríamos que emplear (aparte de HTML y CSS) muchas líneas de código y conocimientos avanzados de Javascript o de algún framework como jQuery. Es una muestra excelente de cómo CSS 3 sustituirá a Javascript en algunas parcelas de sus usos habituales. Estoy segura que os encantará.

Nota: Vamos a darle estilo a una pequeña galería de imágenes con unas fotografías fijas, que tenemos en un código HTML que he escrito a mano. Pero podéis imaginar que, con un poco de programación del lado del servidor, podemos hacerla más dinámica y sacar las imágenes de una base de datos.

En este caso lo primero que vamos a ver va a ser nuestro código HTML, para ir viendo los cambios que vamos realizando según vamos metiendo propiedades a nuestro CSS.

Lo primero que tenemos son las imágenes fijas en nuestro HTML.

Nota: Aviso de antemano que este ejemplo está preparado para el navegador Google Chrome o Safari, pero que pronto otros navegadores serán capaces de interpretar estas reglas de CSS 3. No obstante, habrá que cambiar algo el código del ejemplo, para incorporar las etiquetas CSS definitivas que se definan cuando el estándar termine de estar recomendado para implementación.

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

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

<body>

   <ul>
      <li><img src="images/mi-gatito.jpg" alt="" border="0"></li>
      <li><img src="images/queso-gema.jpg" alt="" border="0"></li>
      <li><img src="images/atardecer-pescando.jpg" alt="" border="0"></li>
      <li><img src="images/moto.jpg" alt="" border="0"></li>
      <li><img src="images/tanto-monta.jpg" alt="" border="0"></li>
      <li><img src="images/doris.jpg" alt="" border="0"></li>
   </ul>
</body>
</html>

Con esto, tan sólo nos aparecerían todas las imágenes en una lista, sin estilos y sin nada. Entonces lo primero que vamos a hacer es darle un estilo a la etiqueta <UL> dejándola así: <UL class=fotos>

Y ese estilo lo definimos con el siguiente código CSS:

ul.fotos {
   width: 970px;
   margin: 0 0 18px -30px;
}
ul.fotos li {
   display: inline;
}
ul.fotos a {
   display: inline;
   float: left;
   margin: 0 0 27px 30px;
   width: auto;
   padding: 10px 10px 15px;
   text-align: center;
   color: #333;
   font-size: 18px;
}
ul.fotos img {
   display: block;
   width: 190px;
   margin-bottom: 12px;
}

Esto lo único que hace es darle un ancho a nuestro álbum, y redimensiona nuestras imágenes para que todas tengan el mismo tamaño inicial. Todavía no hemos animado nada, vamos paso a paso.

Ahora vamos a ver que pasa si le damos más estilos a los

, pero esta vez tenemos que crear un enlace, aunque no apunte a ningún sitio para poder darle animación a nuestras imágenes. El enlace luego puede ir a la ampliación o a otro sitio, etc.

Para que nos salgan los títulos de las fotos tenemos que poner el atributo title en el enlace y no en la imagen.

Los nuevos estilos CSS serían los siguientes:

ul.fotos a:after {
content: attr(title);
}

Este estilo junto con las siguientes lineas que añadiríamos al estilo ul.fotos a, nos mostrarían una caja y el titulo de cada foto. Las líneas que tenemos que añadir son las siguientes:

-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-webkit-transform: rotate(-2deg);
-webkit-transition: -webkit-transform .15s linear;

Estos estilos son para la colocación de las cajas:

ul.fotos li:nth-child(3n) a {
   -webkit-transform: none;
   position: relative;
   top: -5px;

}
ul.fotos li:nth-child(5n) a {
   -webkit-transform: rotate(5deg);
   position: relative;
   right: 5px;

}

ul.fotos li a:hover {
   -webkit-transform: scale(1.25);
   -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
   position: relative;
   z-index: 5;
}

Con estos estilos lo que le decimos es que nos rote las fotos x grados y que cada 3 una la ponga recta, después en la 5 la rote algo más que las otras. Estos estilos podríamos hacerlos para infinidad de imágenes, buscando cada cuantas fotos queremos rotar o poner rectas. Además el último estilo nos hace que al pasar el ratón por la imagen, esta se agrande con scale y se ponga recta si estaba rotada.

Nota: hay que recordar que en el momento de redactar este artículo solamente es visible en Chrome y Safari.

Bueno y el resultado final sería el siguiente.

En el siguiente artículo veremos otro ejemplo de álbum de fotos con CSS 3.

Sara Alvarez

Equipo DesarrolloWeb.com

Follow {{ $author->twitter }}

Manual

Manual de CSS 3

Dibujo animado con CSS 3

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