Poner Etiqueta a Imagenes con CSS3

Hay muchos sitios como tiendas y sitios de informacion de peliculas que agregan una etiqueta a la imagen alegorica al tema, es un proceso facil por medio de CSS3.

Para poner etiqueta a tus imagenes sigue los siguientes pasos.

•  Ve a Plantilla, luego a edicion de HTML y busca la etiqueta ]]></b:skin>, y justo encima de ella pega lo siguiente:

.side-corner-tag {
position: relative;
color: #fff; /* color de texto de etiqueta */
display: inline-block;
padding: 5px;
overflow: hidden;
font-family: Arial, sans-serif; /* fuente de texto de etiqueta */
font-weight: 900;
}

.side-corner-tag p {
display: inline;   
}

.side-corner-tag p span {
position: absolute;
display: inline-block;
right: -25px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2), inset 0px 5px 30px rgba(255,255,255,0.2);
text-align: center;
text-transform: uppercase;
top: 22px;
background: #d93131; /* color de fondo de etiqueta */
width: 100px;
padding: 3px 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}

.side-corner-tag p:before {
content: "";
width: 0;
height: 0;
position: absolute;
top: -17px;
right: 69px;
z-index: -1;
border: 17px solid;
border-color: transparent transparent #662121 transparent;
}

.side-corner-tag p:after {
content: "";
width: 0;
height: 0;
position: absolute;
top: 74px;
z-index: -1;
right: -10px;
border: 17px solid;
border-color: #662121 transparent transparent transparent; /* borde */
}

• Luego guardas los cambios.
• Ahora cuando vallas a poner un gadget o crees un diseño para esto o crees una entrada, cuando agregues una imagen la forma de poner una etiqueta es la siguiente.

Usa el siguiente codigo facil para agregar a la imagen.

<div class="side-corner-tag">
<img src="URL de la imagen" alt="" />
<p><span>TEXTO</span></p>
</div>

Ejemplos:

Trigun

Prometeo

Dificultad: Baja
Fuente: InsertHTML.com