Efecto cinta adhesiva en imágenes con CSS (casi automático)

Hace unos añitos publiqué una manera de colocar cinta adhesiva a nuestras imágenes -que funcionaba y sigue haciéndolo correctamente- para el que era necesario utilizar una imagen semitransparente prefabricada. Posteriormente descubrí que se podía sustituir esa imagen por un rectángulo construido con CSS y como usando este lenguaje ya no hace falta ser un manitas del fotochop y además nos quitaremos algo de carga, pues allá vamos con esta variante.

La base de todo será crear un selector para una caja que posicionaremos de manera relativa, para luego situar sobre esa caja un rectángulo con color translúcido. Este rectángulo lo podremos añadir con :before o :after (o con ambos simultáneamente para añadir dos) y ubicarlo dónde queramos con position: absolute y los socorridos top-bottom-left-right. Un pequeño giro con transform nos permitirá darle un aspecto más realista al resultado final.

Al selector en cuestión le he dado el nombre de .cinta (original que es uno) y se puede añadir al posible enlace que pudiera llevar la imagen, a una caja padre preexistente (separator en Blogger, por ejemplo) o bien en una nueva caja que deberíamos añadir en ausencia de las dos anteriores. Estas serían las reglas:
(BPT: para añadir a nuestro CSS, en la plantilla antes de la etiqueta ]]></b:skin>)

.cinta {
position: relative;
text-align: center;
display: inline-block; *display: inline; zoom: 1;
margin: 20px auto 10px;
}
.uno:before,
.dos:before, .dos:after,
.tres:before, .tres:after,
.cuatro:before, .cuatro:after {
content: "";
display: block;
width: 100px;
height: 30px;
position: relative;
top: 20px;
margin: auto;
background: rgba(255,255,200,0.6);
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}
/* Esto es sólo algo de estilo adicional para la imagen */
.cinta img {
display: inline-block; *display: inline; zoom: 1;
border: 1px solid #ddd;
margin: 0 20px;
padding: 8px;
background: #fff;
text-align:center;
vertical-align:top;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

En cuanto todo eso esté en vuestra plantilla, en adelante ya sólo tendréis que añadir las clases cinta uno para que aparezca la cinta adhesiva sobre la imagen así marcada.

Si se trata de una imagen con enlace, la añadís aquí, dónde he marcado en verde:

<a class="cinta uno" href="URL_ENLACE>
<img border="0" src="URL_IMAGEN" />
</a>

Si es una imagen sin enlace, entonces eso mismo deberá ponerse en una caja añadida para este fin, rodeando la imagen:

<div class="cinta uno">
<img border="0" src="URL_IMAGEN" />
</div>

---

A ese código que puse le sobran ciertas cosas, pero no es casual, es para que el que quiera pueda tener hasta cuatro estilos simultánemente trabajando. Para disponer de esta gama de efectos añadid a continuación del anterior CSS este otro y ya podréis cambiar ese uno por dos, tres o cuatro para obtener estas otras variaciones.

.dos:before, .dos:after {
position: absolute;
top: 10px;
}
.dos:before {
left: 0;
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
transform: rotate(-35deg);

}
.dos:after {
right: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
.tres:before, .tres:after {
position: absolute;
top: 10px;
}
.tres:before {
left: 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.tres:after {
top: inherit;
bottom: 10px;
right: 0;
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
transform: rotate(-35deg);
}
.cuatro:before, .cuatro:after {
width: 30px;
height: 100px;
position: absolute;
top: 50%;
margin-top: -50px;
}
.cuatro:before {
left: 10px;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
transform: rotate(3deg);
}
.cuatro:after {
margin-top: -60px;
right: 10px;
}

Otra demo incluyendo todo el código editable en Codepen.

¿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

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

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

• Google
• Facebook
• Twitter