Efecto CSS para simular fotografías con esquinas insertadas | Oloblogger Lo de hoy será un sencillo código CSS con el que podremos realzar nuestras fotografías para que pare...

3 de diciembre de 2014

Efecto CSS para simular fotografías con esquinas insertadas

Lo de hoy será un sencillo código CSS con el que podremos realzar nuestras fotografías para que parezca que están insertadas por sus esquinas en el fondo, al modo en que se fijan -más bien, fijaban- en algunos álbumes antiguos.

Para conseguirlo simplemente tendremos que añadir después una caja auxiliar con determinada clase al código de la imagen. Eso en el caso genérico, porque si lo usamos en Blogger, ni siquiera eso. Para Blogger bastará con que añadamos el CSS a nuestra plantilla.

No será necesario utilizar imágenes añadidas y además, como es lo que se lleva, todo será adaptable a las distintas resoluciones que la pantalla desde dónde se visualiza pueda tener.

El que lo quiera ver funcionando ya, antes de la explicación, o quiera pasar directamente a la acción, aquí tiene este Codepen con todo lo necesario. Para los demás, comenzamos tras esta cabecera.

Esquinas insertadas en el fondo de la página


El siguiente es el CSS que comentaba al principio y que hará todo el trabajo de manera rutinaria, que para eso se inventó ese lenguaje.

En el caso de Blogger, una vez más diré (y van muchísimas) que hay que añadirlo antes de ]]></b:skin> o bien en el apartado del Diseñador de Plantillas > Avanzado > Añadir CSS.

.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 {
  position: absolute;
  content: "";
  height: 40px;
  width: 80px;
  background: #ccc; /*El mismo color que el fondo de la página*/
  -webkit-transform: rotate(-45deg);transform: rotate(-45deg);
}
.esquinas:before { 
  bottom: -20px;
  right: -40px;
  box-shadow: 0 -6px 9px -8px #333;
}
.esquinas:after {
  top: -20px;
  left: -40px;
  box-shadow: 0 6px 9px -8px #333;
}
/* Hack sólo para Blogger*/
.separator a {
  margin-left: 0 !important;
  margin-right: 0 !important;
}


La primera regla (.esquinas) lo único que hace es prepararnos el terreno para después poder posicionar adecuadamente nuestras esquinas. Esto se consigue con position: relative; y display: table;.

La siguiente (.esquinas img) simplemente hace que la imagen sea adaptable a todos los anchos (max-width: 100%;), además de añadirle un marco y una sombra.

A continuación ya viene la regla que da sentido a este código y que es la que añade dos rectángulos del mismo color que el fondo mediante :before y :after y los muestran girados 45 grados. Todo tiene su utilidad, pero es especialmente importante que el background de esos selectores sea del mismo color que el fondo sobre el que se colocarán las imágenes y para el que se pretende este efecto.

Y por fin las dos últimas, que colocan esos rectángulos en el punto exacto que necesitamos, añadiendo además una sombra que realza el efecto.



¿Qué hacemos una vez todo lo anterior en la plantilla? Pues simplemente añadir una caja auxiliar que rodee al código de la imagen con el selector esquinas y ¡voilá!

<div class="esquinas">
<img border="0" src="http://www.imagenes.com/satiric21.jpg" />
</div>

Ejemplo con dos esquinas


Para Blogger y siempre que queramos este efecto para TODAS las imágenes, podemos aprovechar eso de que automáticamente nos meten una clase llamada separator cuando subimos fotos, para utilizarla a nuestro favor. En ese caso sólo tenemos que cambiar en el código anterior el nombre del selector esquinas por separator y ya no sería necesario añadir ninguna caja manualmente.




¿Vemos ahora como hacer lo mismo pero para cubrir las cuatro esquinas?

Pues como para cada caja sólo podemos añadir dos pseudoelementos (:before y :after), ya tendremos que echar mano de una caja adicional cuyo selector he bautizado en el ejemplo como esquinasbis.

El CSS para esta segunda opción sería este otro e incluiría el código suficiente para que se pueda usar indistintamente la opción de dos o de cuatro esquinas. Una vez hecha la anterior parte didáctica, este está un poco más optimizado.

.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: #ccc;  /*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;
}


El código HTML necesitaría en este segundo supuesto de dos cajas añadidas, las marcadas con distinto color:

<div class="esquinas">
<img border="0" src="http://www.imagenes.com/satiric21.jpg" />
<div class="esquinasbis"></div>
</div>

Y este sería el resultado:

Ejemplo con cuatro esquinas


¿Qué tal? ¿Os gusta? :)

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

11 comentarios :

  1. Muchas gracias por tus enseñanzas..poco a poco vamos perdiendo el miedo a enredar en el blog.

    ResponderEliminar
  2. Muy Bueno Gracias Ooman :D

    ResponderEliminar
  3. hacerlo automático para cualquier imagen que se suba?
    Saludos

    ResponderEliminar
  4. Gracias. Esta es una solucion perfecta a lo que busco. Pero en vez de imagenes. Yo lo busco en capas con texto. ¿Se podria aplicar esta idea?

    ResponderEliminar
    Respuestas
    1. Sí, perfectamente. Como cosa rápida sustituye en la parte HTML cada imagen (img) por una caja (div) con un texto. Luego en el CSS cambias el selector .esquinas img por un .esquinas div.

      Seguramente tendrás que hacer el padding mayor para este último selector para que las esquinas no se coman parte del texto.

      Eliminar
  5. :F vendeme tu plantilla :3 eres genial gracias por los tutoriales

    ResponderEliminar
  6. Muchisimas Gracias Oloman !! que grande, no hago mas que cambiar y añadir cositas en mi blog por tu culpa !!! ajjaja.
    Muy bueno tu blog, me esta sirviendo mucho para mejorar el mio.
    Sigue asi, y si te apetece pasate por el mio ! alvaronocturno.blogspot.com.es
    P.D: Gracias de nuevo !!!!!!

    ResponderEliminar
  7. Es un truco maravilloso me encanta, muchas gracias, aunque tengo un problema:
    el efecto en lugar de cubrirme las cuatro esquinas solo se lo aplica a tres, cualquier fotografía que colocó queda sin la esquina inferior derecha cubierta. No se porque, sigo al pie de la letra el post "yo se que soy medio torpe pero no tanto", por eso si es posible me digas que hice mal te lo agradeceré mucho.

    ResponderEliminar
    Respuestas
    1. Hola Montse. Tendrías que pasarme una dirección dónde estés aplicando esto para ver qué ocurre y poder contestarte. Un saludo.

      Eliminar