Decorar imágenes con CSS 3 y HTML 5 – Parte 2

Ahora vamos a crear una galería mas avanzada utlilizando etiquetas de HTML 5 especificas para este tipo de trabajo. En este caso la etiqueta <figure> alrededor de cada imagen y la etiqueta <figcaption> para agregar una

etiqueta informativa a la imagen. La idea es decorar las imagenes con un efecto tipo marco y una cinta adhesiva en la parte superior.

HTML

Esta estructura colocar dentro de la etiqueta body:

<ul class="galeria tape"> <li> <figure> <a href="https://www.ribosomatic.com"><img src="1.jpg" alt="image" width="170" height="120"></a> <figcaption>Llamas</figcaption> </figure> </li> <li> <figure> <a href="https://www.ribosomatic.com"><img src="2.jpg" alt="image" width="170" height="120"></a> <figcaption>Machupicchu</figcaption> </figure> </li> <li> <figure> <a href="https://www.ribosomatic.com"><img src="3.jpg" alt="image" width="170" height="120"></a> <figcaption>Ollantaitambo</figcaption> </figure> </li> </ul>

La estructura es fácil de comprender, hemos agregar elementos nuevos del HTML 5 para envolver la imagen con figure y una pequeña información al pie de esta con figcaption.

CSS

En el mismo documento HTML ó en una hoja de estilos fuera, colocar el siguiente código:

.galeria { margin: 0 0 25px; text-align: center; } .galeria li { display: inline-block; margin: 5px; list-style: none; } .galeria a { display: inline-block; } .tape li { width: 170px; padding: 5px; margin: 15px 10px; border: solid 1px #cac09f; background: #fdf8e4; text-align: center; box-shadow: inset 0 1px rgba(255,255,255,.8), 0 1px 2px rgba(0,0,0,.2); } .tape figure { position: relative; margin: 0; } .tape figure:before { position: absolute; content: ' '; top: 0; left: 0; width: 100%; height: 100%; background: url(overlay.png) no-repeat; } .tape figcaption { font: 100%/120% Handlee, Arial, Helvetica, "sans-serif"; color: #787568; } .tape a:before { position: absolute; z-index: 2; content: ' '; top: -12px; left: 50%; width: 115px; height: 32px; margin-left: -57px; background: url(tape.png) no-repeat; }

Si nos fijamos la parte de galeria es para darle estilo a la imagenes que estan en forma de lista, pero con este código las ponemos en linea recta y ocultamos la viñeta. Lo que nos interesa es la clase tape que le da estilo a cada elemento de lista li, figure y figcaption.

En tape figure:before especificamos el marco difuminado que agregaremos a cada imagen, y en tape a:before incluimos en el vinculo ó enlace la imagen de una cinta adhesiva en la parte superior de cada imagen de la galería.

El resultado final puedes apreciarlo aca: [ ver ejemplo ]