Tutorial: Cómo dar efecto de fotografía a imagenes en Blogger con CSS

¡Comparte el tutorial!

Tweet

Volviendo a la categoría de Blogger, que ya estaba un poco olvidada, hoy les traigo un efecto hecho con CSS para que sus imágenes se vean mas llamativas, se trata de generar el efecto de una imagen fijada por las esquinas tal como en los álbumes antiguos de fotografías.


Si te interesa sigue leyendo para que aprendas como dar efecto de fotografía a tus imagenes en Blogger con CSS.

¿Que necesitamos?

* Un blog.

Dificultad:

Fácil

Paso 1:

Lo primero es el código CSS.
Así que lo que debemos hacer primeramente es buscar en nuestra plantilla lo siguiente:

]]></b:skin>

Ahora pegaremos el siguiente código justo antes de esa linea:

.esquinas {
  position: relative;
  display: table;
  max-width: 90%;
  margin: 50px auto;
}
.esquinas img {
  display: table-cell;
  max-width:100%;
  height: auto;
  margin: 0 auto;
  padding: 8px;
  background: #fff;
  box-shadow: 0 0 2px #666;
  box-sizing: border-box;
}
.esquinas:before,
.esquinas:after,
.esquinasbis:before,
.esquinasbis:after {
  position: absolute;
  bottom: -20px;
  right: -40px;
  content: "";
  height: 40px;
  width: 80px;
  background: #ffffff;  /*El mismo color que el fondo de la página*/
  box-shadow: 0 -6px 9px -8px #333;
  -webkit-transform: rotate(-45deg);transform: rotate(-45deg);
}
.esquinas:after,
.esquinasbis:after {
  top: -20px;
  left: -40px;
  box-shadow: 0 6px 9px -8px #333;
}
.esquinasbis:before {
  top: auto;
  left: -40px;
  -webkit-transform: rotate(45deg);transform: rotate(45deg);
}
.esquinasbis:after {
  left: auto;
  right: -40px;
  -webkit-transform: rotate(45deg);transform: rotate(45deg);
}
/* Hack sólo para Blogger*/
.separator a {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

¡OJO! Sustituye #ffffff; por el color de fondo de tus entradas, para que se note el efecto.

Paso 2:

Ahora vamos con el HTML, para que veamos el efecto en alguna imagen debemos utilizar el codigo siguiente:

<div class="esquinas">
<img border="0" src="URL-DE-TU-IMAGEN-AQUI" />
<div class="esquinasbis"></div>
</div>

Sustituyendo URL-DE-TU-IMAGEN-AQUI por la URL de nuestra imagen.

Ahora nuestras imágenes lucirán así:

Paso 3:

Aunque de esa forma tendremos que poner ese código cada que publiquemos una imagen, si lo que queremos es que de forma fija quede ese estilo para todas las imagenes que subamos a partir de ahora lo que tenemos que hacer es pegar este código:

.separator {
  position: relative;
  display: table;
  max-width: 90%;
  margin: 50px auto;
}
.separator img {
  display: table-cell;
  max-width:100%;
  height: auto;
  margin: 0 auto;
  padding: 8px;
  background: #fff;
  box-shadow: 0 0 2px #666;
  box-sizing: border-box;
}
.separator:before,
.separator:after,
.separatorbis:before,
.separatorbis:after {
  position: absolute;
  bottom: -20px;
  right: -40px;
  content: "";
  height: 40px;
  width: 80px;
  background: #ffffff;  /*El mismo color que el fondo de la página*/
  box-shadow: 0 -6px 9px -8px #333;
  -webkit-transform: rotate(-45deg);transform: rotate(-45deg);
}
.separator:after,
.separatorbis:after {
  top: -20px;
  left: -40px;
  box-shadow: 0 6px 9px -8px #333;
}
.separatorbis:before {
  top: auto;
  left: -40px;
  -webkit-transform: rotate(45deg);transform: rotate(45deg);
}
.separatorbis:after {
  left: auto;
  right: -40px;
  -webkit-transform: rotate(45deg);transform: rotate(45deg);
}
/* Hack sólo para Blogger*/
.separator a {
  margin-left: 0 !important;
  margin-right: 0 !important;

Antes de:

]]></b:skin>

Y obvio, en lugar del código del paso 1.

Con esto ya no tenemos que poner el código del paso 2 en cada imagen.
La única limitánte es que de forma fija solo conseguimos que la imagen tenga el efecto solo en 2 de sus esquinas, lo cual hará que las imágenes se vean así:

Pero si quieres que tenga el efecto en las 4 esquinas entonces debes hacer lo siguiente:

Pega este código:

<div class="separatorsbis"></div>

Justo antes del cierre del <div> de tus imágenes, tal que así:

<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="URL-DE-TU-IMAGEN-AQUI" height="380" width="640" />
<div class="separatorbis"></div>
</div>

Con eso conseguirás el efecto de forma permanente, y si alguna vez olvidas poner el segundo código al menos tendrás el efecto de 2 esquinas.

Bonito efecto de fotografía antigua con CSS, verdad? :)

Fin del tutorial