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

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>
Artículo aleatorio
BuySellAds
BuySellAds
BuySellAds
BuySellAds
BuySellAds
Artículos destacados
Marca de agua en las imágenes con CSS # - Marca de agua en las imágenes con CSS
Ocultar entradas con determinada etiqueta en el inicio de Blogger # - Ocultar entradas con determinada etiqueta en el inicio de Blogger
Efecto de desenfoque con CSS # - Efecto de desenfoque con CSS
Cómo obtener la primera imagen del post en Blogger sin Javascript # - Cómo obtener la primera imagen del post en Blogger sin Javascript
Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger # - Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger