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

Hace unos añitos publiqué una manera decolocar 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 delfotochop 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 conposition: absolute y los socorridostop-bottom-left-right. Un pequeño giro contransform 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 clasescinta 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:

aclass="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 eseuno pordos,tres ocuatro 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;
}