1. Objetivo
Vamos a crear un álbum de fotos "vintage", de estilo Polaroid, con algunas fotografías sobre "una mesa". Cuando se pase el ratón por encima de una de las fotos, esta se situará por encima de las demás, con un fondo más claro y una sombra más pronunciada.
Este ejemplo retoma en gran medida el del sitio web: http://line25.com/tutorials/how-to-create-a-pure-css-polaroid-photo-gallery
2. La estructura de la galería
Vamos a crear la estructura en HTML5, con los elementos section, figure y figcaption. El elemento section presenta un código de identificación y cada elemento figure dispone de una clase.
<section id="galeria">
<figure class="pic-1">
<img src="photo1.jpg" alt="Hipopótamo" />
<figcaption>Hipopótamo</figcaption>
</figure>
<figure class="pic-2">
<img src="photo2.jpg" alt="Tigre" />
<figcaption>Tigre</figcaption>
</figure>
<figure class="pic-3">
<img src="photo3.jpg" alt="Cebra" />
<figcaption>Cebra</figcaption>
</figure>
<figure class="pic-4">
<img src="photo4.jpg" alt="Suricata" />
<figcaption>Suricata</figcaption>
</figure>
</section>
3. El diseño de la galería
La galería presenta un ancho fijo y ha sido centrada en la página.
body {
font: .8em Verdana, Arial, Helvetica, Geneva, sans-serif;
}
#galeria {
width: 700px;
margin: 60px auto;
}
Los elementos figure "fluyen" hacia la izquierda (float: left), presentan márgenes diferentes para separase unos de otros (margin: 0 10px 0). El espaciado es mayor en la parte de abajo, para poder insertar la leyenda (padding: 10px 25px 10px). El fondo es de color gris (background: #eee). Además, presentan bordes (border: 1px solid #fff) y una sombra (box-shadow: 0px 2px 15px #333).
#galeria figure {
float: left;
margin: 0 10px 10px 0;
padding: 10px 10px 25px 10px;
background: #eee;
border: 1px solid #fff;
-moz-box-shadow: 0px 2px 15px #333;
-webkit-box-shadow: 0px 2px 15px #333;
-o-box-shadow: 0px 2px 15px #333;
box-shadow: 0px 2px 15px #333;
}
El texto de la leyenda está centrado.
#galeria figcaption {
text-align: center;
}
4. Los estilos para las fotografías
Cada fotografía se encuentra dentro de un elemento figure que posee su propia clase. Indicaremos un orden de superposición para cada clase (z-index: 1). Cada fotografía sufrirá una transformación con un valor de rotación diferente (transform: rotate(-10deg)).
#galeria figure.pic-1 {
z-index: 1;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: rotate(-10deg);
}
#galeria figure.pic-2 {
z-index: 2;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}
#galeria figure.pic-3 {
z-index: 3;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);
}
#galeria figure.pic-4 {
z-index: 4;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: rotate(-10deg);
}
5. La transformación
Vamos a definir la transformación que se aplicará al pasar el ratón (:hover) por encima de los elementos figure. Modificaremos la propiedad z-index para que tome un valor superior al valor actual, de modo que la imagen se sitúe por encima de las demás. Aplicaremos una sombra más oscura (box-shadow: 3px 5px 15px #000) y un fondo de color blanco.
#galeria figure:hover {
z-index: 10;
-moz-box-shadow: 3px 5px 15px #000;
-webkit-box-shadow: 3px 5px 15px #000;
-o-box-shadow: 3px 5px 15px #000;
box-shadow: 3px 5px 15px #000;
background-color: #fff;
}
6. El resultado visual
Al visualizar la página, todas las fotografías mostrarán su transformación (la rotación).
Cuando se pase el ratón por encima de una foto, esta se colocará en primer plano, con un fondo blanco y una sombra más pronunciada.
Espero haber ayudado en algo. Hasta la próxima oportunidad!
Twittear
No hay comentarios:
Publicar un comentario