RibosoMatic

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="http://ribosomatic.com"><img src="1.jpg" alt="image" width="170" height="120"></a>
			<figcaption>Llamas</figcaption>
	        </figure>
  	</li>
	<li>
		<figure>
			<a href="http://ribosomatic.com"><img src="2.jpg" alt="image" width="170" height="120"></a>
			<figcaption>Machupicchu</figcaption>
		</figure>
	</li>
	<li>
		<figure> 
        	<a href="http://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 ]