A menudo me encontro con sitios web como: tiendas online, y otros sitios que tienen imágenes usan una cinta para señalar o identificar que su producto es nuevo, o esta en promoción. Ahora vamos a hacer un pequeño tutorial para agregar esa cinta a las imágenes que deseemos y solo con css3, normalmente lo hacen en formato PNG, pero esta ver solo usaremos CSS3 y de echo con mucho menos peso de carga que una imagen, comencemos!
Solo se trata de meter nuestra imagen dentro del div con la clase «cinta» y poner dentro de
el texto deseado, ejemplo nuevo.
</pre>
<div class="cinta">
<img alt="" src="1.jpg" />
<span>newest</span></div>
<pre>
Ahora solo vamos a dar las propiedades css3 a la clase, parrafo y span para lograr el diseño de la cinta al lado lateral derecho, si deseas puede modificar el color de tu cinta, por lo general es rojo como este ejemplo.
}
.cinta {
position: relative;
color: #fff;
display: inline-block;
padding: 5px;
overflow: hidden;
font-family: Arial, sans-serif;
font-weight: 900;
}
.cinta p {
display: inline;
}
.cinta 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;
width: 100px;
padding: 3px 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
.cinta 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;
}
.cinta 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;
}
con esto hemos logrado el efecto de la cinta en la ezquina derecha superior, dejo
la demo mas la
descarga de los anchivos dentro de un .Zip (Contraseña: antocas.com)
