Efecto cinta adhesiva en imágenes con CSS (casi automático) | Oloblogger Hace unos añitos publiqué una manera de colocar cinta adhesiva a nuestras imágenes -que funcionaba y sigue haciéndolo correctamente- para e...

12 de abril de 2014

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
Copy URL

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

follow us in feedly

7 comentarios :

  1. Muy bonito :D !! me ha encantado y quisiera usarlo pero... tendria que hacer esto para cada una de TODAS las imagenes que tenga en el blog verdad?? añadirle la clase a todas las imagenes :S ... no se puede hacer más "automatico"?, para que se aplique a todas las imagenes del blog la clase? Gracias :3

    ResponderEliminar
    Respuestas
    1. No hay forma de añadir un :before o :after a una imagen directamente. La única posibilidad para hacerlo del todo "automático" sería que usaras Blogger y que todas tus imágenes estuvieran subidas con el editor y que por ese motivo incluyeran una caja con clase SEPARATOR.

      En ese caso sería suficiente con que añadieras el CSS, pero previamente tendrías que cambiar donde pone CINTA por SEPARATOR y donde pone UNO (o DOS, TRES o CUATRO) también por SEPARATOR. De esa manera todas las imágenes de los posts incluirían el efecto, pero sólo uno de ellos, el que escojas.

      Eliminar
  2. muchas gracias me gusta mucho.

    ResponderEliminar
  3. Buenas amigo se ve de lujo este efecto con css.. Te queria hacer una pregunta... Mira Tengo una pagina de videos pero quiero que en la parte que se muestran las entradas se vea una imagen y cuando se ingrese a la entrada solo se vea el video si me hago comprender utilizo videos de Vk me puedes ayudar con un script o algo para que se muestre una imagen y al ingresar se vea solo el video saludos

    ResponderEliminar
    Respuestas
    1. Sí claro, pero va a ser sin JavaScript... que es mucho mejor :)
      http://www.oloblogger.com/2013/03/sumarios-rapidos-blogger-resumenes.html

      Eliminar
  4. Hola oloman, muchas gracias por tus aportes. Tengo un par de preguntas: añadí tu slider con entradas recientes, y me preguntaba si se podría hacer algo así en el slider,
    Y la segunda, si se puede sustituír la "cinta" por una imagen, es decir, una cinta ya creada con texturas colores etc

    ResponderEliminar
    Respuestas
    1. Hola. Sí que se podría hacer. Para ello, en lugar de usar por ejemplo uno:before, ese estilo que puse ahí se lo deberías poner a #slider-wrapper:before. Una vez que pruebes verás que tienes que hacer algunos ajustes, pero la idea va por ahí.

      Y para lo segundo este post no sirve, ya que precisamente está pensado para NO utilizar imágenes. Hay un enlace al principio del todo que lleva a otro sistema con imágenes.

      Eliminar