Creamos un álbum de fotos con estilos impactantes de CSS 3 y animación, sin utilizar Javascript o jQuery.
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á.
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.
<!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
<ul class="fotos">
<li><a href="#" title="Mi gato"><img src="images/mi-gatito.jpg" alt="" border="0" ></a></li>
<li><a href="#" title="El queso"><img src="images/queso-gema.jpg" alt="" border="0" ></a></li>
<li><a href="#" title="Valmayor"><img src="images/atardecer-pescando.jpg" alt="" border="0" ></a></li>
<li><a href="#" title="Mi moto"><img src="images/moto.jpg" alt="" border="0" ></a></li>
<li><a href="#" title="Toledo"><img src="images/tanto-monta.jpg" alt="" border="0" ></a></li>
<li><a href="#" title="Mi coneja"><img src="images/doris.jpg" alt="" border="0" ></a></li>
</ul>
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.
Bueno y el resultado final sería el siguiente.
En el siguiente artículo veremos otro ejemplo de álbum de fotos con CSS 3.