-->

Añadir cinta adhesiva a nuestras imágenes

Hoy vamos a mostrar como podemos poner a nuestras imágenes una tira de cinta adhesiva.
Para ello nos tenemos que ir a editar nuestra plantilla.
Tema > Editar HTML.
Justo antes de  ]]></b:skin> ponemos este 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);
}
/* 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);
}


 Guardamos la plantilla
Ahora cuando queremos añadir este marco a nuestras fotos, ponemos en la edicción de HTMl este codigo.
<a class="cinta uno" href="URL_ENLACE>
<img border="0" src="URL_IMAGEN" />
</a>

Cambiamos lo marcado en rojo por la URl del enlace y lo marcado en azul por la url de la imagen.


Publicar un comentario

0 Comentarios