Efecto de cinta adhesiva en imágenes con CSS

El dia de hoy he estado visitando algunos blogs que antes solía visitar bastante a menudo, y me he topado con un buen aporte por parte de +Oloman Oloman que sin duda le gustará a más de uno de los seguidores de este blog, se trata de colocar el efecto de cinta adhesiva a tus imagenes, sin hacer uso de ningún programa o software adicional, simplemente haciendo uso de CSS.

El demo de los efectos se puede ver directamente en: Pruebas FocoBlogger

Para añadir el efecto de cinta adhesiva en imágenes con CSS lo que debes hacer son los siguientes pasos:

• Entrar en el panel de blogger
• Acceder al apartado Plantilla > Editar HTML
• Ubicar la parte de estilos de tu plantilla y antes de ]]> pega el siguiente código:

.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);
}
/*http://www.focoblogger.com*/
.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);
}
.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;
}

Ya que has pegado el código anterior en tu plantilla podrás hacer el uso del efecto, llamandolo desde un div con su clase, de la siguiente forma:

Código para imagen sola.

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

Código para imagen con enlace.

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

Debes sustiruir la palabra CLASE por el efecto que quieras siendo estos los siguientes (En orden de aparición en el DEMO:

• cinta uno
• cinta dos
• cinta tres
• cinta cuatro

Si por ejemplo yo quiero utilizar el efecto del demo 3, tendría que utilizar este código:

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

Dando así el siguiente resultado:

Y eso sería todo para colocar el Efecto de cinta adhesiva en imágenes con CSS, como ven no tiene mucha complejidad, pero es bastante llamativo el efecto, espero le haya sido de ayuda, y hay que dar los créditos a OloBlogger por ello, si tienen alguna duda pueden visitar el artículo original en donde se explica más detalladamente todo el proceso OloBlogger

Una vez más digo, si este artículo ha sido de utilidad para ti, puedes colaborar haciendo alguna de las acciones sociales que están debajo de este párrafo.