Imágenes con efecto polaroid y descripción en Blogger

En esta oportunidad les mostraré una forma de crear una pequeña galería de imágenes con efecto polaroid sólamente con CSS.

Estas llevan una pequeña descripción en la imagen, tal como se puede apreciar en el siguiente ejemplo:

Esta es una descripción

Esta es una descripción

Esta es una descripción

Esta es una descripción

Nota: No trabaja en Internet Explorer, las imágenes se verán planas y sin efectos.

¿Cómo añadirlas a Blogger?

Paso 1: Añadiendo los estilos:

En ''Diseño | Edición HTML'' buscaremos la siguiente sección:

]]></b:skin>

Arriba de esta pegaremos el siguiente código:

#minigaleria {
margin:0px auto;
padding-left:10px;
padding-top:20px;
padding-bottom:150px;
}


div.imagen1 /* IMAGEN 1*/
{
 -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); /* Sombra*/
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); /* Sombra para Firefox*/
 background: #ffffff;          /* Fondo Blanco*/
  margin: 2px;
  border: 1px solid #cccccc;   /*Borde*/
  height: auto;
  width: auto;
  float: left;
  text-align: center;
  -webkit-transform: rotate(12deg); /*Ángulo*/
-moz-transform: rotate(12deg); /*Ángulo*/
}  

div.imagen1 img
{
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
}

div.imagen2 /* IMAGEN 2*/
{
 -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); /* Sombra*/
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); /* Sombra para Firefox*/
 background: #ffffff;         /* Fondo Blanco*/
  margin: 2px;
  border: 1px solid #cccccc; /*Borde*/
  height: auto;
  width: auto;
  float: left;
  text-align: center;
  -webkit-transform: rotate(-16deg); /*Ángulo*/
-moz-transform: rotate(-16deg); /*Ángulo*/
}  


div.imagen2 img
{
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
}

div.imagen3 /* IMAGEN 3*/
{
 -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); /* Sombra*/
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); /* Sombra para Firefox*/
 background: #ffffff;          /* Fondo Blanco*/
  margin: 2px;
  border: 1px solid #cccccc; /*Borde*/
  height: auto;
  width: auto;
  float: left;
  text-align: center;
  -webkit-transform: rotate(22deg); /*Ángulo*/
-moz-transform: rotate(22deg); /*Ángulo*/
}  


div.imagen3 img
{
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
}

div.imagen4 /* IMAGEN 4*/
{
 -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); /* Sombra*/
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); /* Sombra para Firefox*/
 background: #ffffff;          /* Fondo Blanco*/
  margin: 2px;
  border: 1px solid #cccccc;  /*Borde*/
  height: auto;
  width: auto;
  float: left;
  text-align: center;
  -webkit-transform: rotate(-12deg); /*Ángulo*/
-moz-transform: rotate(-12deg); /*Ángulo*/
}  

div.imagen4 img
{
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
}

div.descripcion /*DESCRIPCIONES*/
{
  text-align: center;
  font-weight: normal;
  font-family: Arial;
  font-size:11px;
  width: 120px;
  margin: 5px;
}

Guardamos los cambios y listo.

Paso 2: Añadiendo una galería:

Cuando estés escribiendo una entrada utiliza la pestaña ''Edición de HTML''  y pega el siguiente código:

<div id="minigaleria">
<div class="imagen1">
 <a target="_blank" href="enlace1"><img src="URLIMAGEN1" alt="" width="110" height="90" /></a>
 <div class="descripcion">Esta es una descripción</div>
</div>
<div class="imagen2">
 <a target="_blank" href="enlace2"><img src="URLIMAGEN2" alt="" width="110" height="90" /></a>
 <div class="descripcion">Esta es una descripción</div>
</div>
<div class="imagen3">
 <a target="_blank" href="enlace3"><img src="URLIMAGEN3" alt="" width="110" height="90" /></a>
 <div class="descripcion">Esta es una descripción</div>
</div>
<div class="imagen4">
 <a target="_blank" href="enlace4"><img src="URLIMAGEN4" alt="" width="110" height="90" /></a>
 <div class="descripcion">Esta es una descripción</div>
</div>
</div>

Previsualizas la entrada para ver si los cambios son correctos, y cuando la hayas completado guarda el resultado.

Importante:

• Si deseas añadir otra imagen pero con ángulo distinto deberás crear un nuevo patrón en la zona CSS de la siguiente forma:

div.imagen5
{
 -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
 background: #ffffff;
  margin: 2px;
  border: 1px solid #cccccc;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
  -webkit-transform: rotate(-12deg) /*ANGULO DE LA QUINTA IMAGEN*/
-moz-transform: rotate(-12deg); /*ANGULO DE LA QUINTA IMAGEN*/
}  

div.imagen5 img
{
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
}

• Para poder utilizar la nueva imagen deberás utilizar el siguiente código:

<div class="imagen5">
 <a target="_blank" href="enlace4"><img src="URLIMAGEN4" alt="" width="110" height="90" /></a>
 <div class="descripcion">Esta es una descripción</div>
</div>