Efecto cinta adhesiva en imágenes

En alguna ocasión he intentado hacer esto de una manera más simple, pero lo cierto es que no lo he logrado. Unas veces no funcionaba en un navegador, otras en el otro, otras requería un ancho de imagen fijo... De momento es una chapucilla, pero puede que a alguien en la que estoy pensando, le sea suficiente ;)

La cosa va de colocar una cinta adhesiva (fixo, celo, scoth tape o como quiera que le llameis vosotros) en la parte superior de las imágenes que queramos. Evidentemente será con una clase CSS, para que podamos variar o incluso suprimir el efecto masivamente, con sólo cambiar las propiedades de la correspondiente clase. La principal ventaja es evitar tener que estar usando programas de edición para cada imagen que publicamos.

El truco principal consiste en la creación de una capa con un alto y ancho igual al de la imagen (cinta adhesiva) que solaparemos gracias a un z-index y que generaremos con un span. Para que quede dónde nos interesa, metemos todo dentro de otra capa (efectoimg) con posicionamiento relativo y que nos servirá para poder dar propiedades independientes a dicho span y a la propia imagen.

Pero más fácil es verlo que explicarlo, así que comenzamos con el estilo, insertándolo en la plantilla. En Blogger, como es habitual, habrá que ponerlo antes de ]]></b:skin>. En las líneas más importantes se incluyen comentarios que podeis borrar sin problemas.

/* IMAGENES SUPERPUESTAS */
.efectoimg {
margin: 20px 10px auto; /* separación entre imágenes */
position: relative;
float:left; /* para poder colocar varias imágenes inline */
}
.efectoimg img {
/* simulando marco fotografía */
background: #fff;
border: solid 1px #ccc;
padding: 4px;
}
.efectoimg span {
/* capa con la imagen superpuesta */
width: 77px; /* dimensiones de la imagen del background */
height: 27px;
display: block;
position: absolute;
top:-12px; /* desplazamiento vertical */
left:50%; /* centrado horizontal */
margin-left:-38px; /* la mitad del width para centrar del todo */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXogXD8KQXe_0D_bge6hE1SdUKOFQaHgSUTPpmFjnp0xSY7ZM6ay_BxrcOOkIETzIauhKuNwl15VEcTrZeztVPJmWRDAc2u1KttXDYJtX0f4RxGIv7eLLKzqA-2wox-D5ADNId-TZ2RrA/s1600/cinta.png) no-repeat;
z-index:1;
}
.efectoimg a {
text-decoration: none; /* eliminando subrayado enlaces */
}

Todo lo marcado en verde es configurable, aunque la parte de .efectoimg span tiene que ajustarse necesariamente al tamaño de la imagen que pongamos en el background.

Una vez que todo esto está en nuestra plantilla, ya sólo falta aplicarlo a la imagen correspondiente:

<div class="efectoimg">
<a href="url_enlace"><span></span><img alt="Imagen" src="url_imagen" /></a>
</div>

Como podeis ver, al codigo normal de una imagen con enlace, sólo le hemos añadido para poder conseguir el efecto, un div con la clase efectoimg y un span sin contenido. Las propiedades de ese span con ancho y alto determinado, así como la imagen de su fondo, serán la que conviertan ese span en lo que queremos.

Os recuerdo que esta imagen de cinta adhesiva puede ser cambiada por otra cualquiera que vuestra imaginación decida. Si como en este caso, tiene que tener transparencia, el formato siempre será PNG. Para cualquier otro tipo de motivo, dará igual usar un GIF o un JPG.

Truco conseguido gracias a la idea de Webdesignerwall.

¿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