Efecto Css3: Cinta (Tag) etiqueta de imágenes

junio 10, 2013 | Html5 & Css3

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)

Relacionados