#activar ~ .desplegable {display: none;overflow: hidden;} #activar:checked ~ .desplegable {display: block;} -->
Plantilla Abigail
Gadget de entradas populares en dos columnas
Plantilla New Pro Blogger Template
Revista Pro template blogger
Galeria imágenes CSS
Crear un marcador de código para nuestro blog.
Cajas con animaciones usando jQuery
Más Tooptip
Catalogspot plantilla blogger
Como se creó Google
Menú Material Desing
 Menú JQuery con iconos

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