En este tutorial aprenderemos hacer una galeria de imagenes con Html y Css.Esta es una simple para adaptar nuestras imagenes y presentarlas a nuestros visitantes de una forma integral en area del nuestros articulos o anadirlas en un gadget en la seccion de Html/Javascript.Para ver ejemplo en vivo da clic en boton de abajo.
Pasos a seguir para intergrar esta Galeria de Imagenes en Blog de Blogger.
1.Entra en tu cuenta de Blogger.
2.Ir a Diseno>>Anadir un Gadget
3.Selecciona Html/Javascript y pega el siguiente codigo.
<style>4.Guarde la Html/Jascript y listo.
bc{
float: left;
width: 150px;
height: 150px;
position: relative;
border: 1px solid #333;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
bc img{
display: block;
width: 100%;
height: 100%;
-webkit-transition-property: width, height; /* we specify, what properties we need to change*/
-webkit-transition-duration: 300ms; /* we specify, with what speed it is necessary to return an image in its initial look*/
-moz-transition-property: width, height;
-moz-transition-duration: 300ms;
-o-transition-property: width, height;
-o-transition-duration: 300ms;
position: absolute;
opacity: 0.3; /* add opacity*/
cursor: pointer;
}
bc:after {
display: block;
position: absolute;
width: 100%;
height: 100%;
content: "Studio.com";
color: #eaeaea;
font-family: "Trebuchet MS";
font-size: 16px;
opacity: 0.5;
}
bc:focus img{
width: 250%; /* we increased an image to this size */
height: 250%;
position: absolute;
opacity: 1; /* transparency is not needed */
z-index: 1; /* for a photo to enlarge over all images */
-moz-box-shadow: 0 0 15px 2px #000;
-webkit-box-shadow: 0 0 15px 2px #000;
box-shadow: 0 0 15px 2px #000; /* we add some beauty */
-webkit-transition-property: width, height; /* we decrease the image */
-webkit-transition-duration: 2s; /* we specify, with what speed it is necessary to increase an image */
-webkit-transition-delay: 0.3s; /* as a browser will process it, before enlarging a photo */
-moz-transition-property: width, height;
-moz-transition-duration: 2s;
-moz-transition-delay: 0.3s;
-o-transition-property:width, height;
-o-transition-duration: 2s;
-o-transition-delay: 0.3s;
cursor: default;
}
bc:nth-child(4n+4) img, a:nth-child(4n+3) img{
right: 0;
} /* every fourth element starting with 3th and 4th will be enlarged from the right border of browser window */
bc:nth-child(n+9) img{
bottom: 0;
} /* all elements, starting with the ninth will begin to enlarge upwards */
-webkit-text-shadow: 0px 0px 5px #222;
-moz-text-shadow: 0px 0px 5px #222;
text-shadow: 0px 0px 5px #222;
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
cursor: pointer;
.closed{
display: none;
}
bc:focus~.closed{
display: block;
}
</style>
<div align='center' class="gallery">
<bc tabindex="1"><img src="http://backgroundhdwallpaper.com/wp-content/uploads/2013/04/Dory-Finding-Nemo-3D-Background-HD-Wallpaper-150x150.jpg" /></bc>
<bc tabindex="1"><img src="http://backgroundhdwallpaper.com/wp-content/uploads/2013/04/Finding-Nemo-Dory-Disney-Background-HD-Wallpaper-150x150.jpg" /></bc>
<bc tabindex="1"><img src="http://backgroundhdwallpaper.com/wp-content/uploads/2013/04/Finding-Nemo-Dory-Marlin-Background-HD-Wallpaper-150x150.jpg" /></bc>
<bc tabindex="1"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRavtWqKxMxvTm9ZxKj3NjRTJoktTA-80dMs4O9_KOAE4zH9Gw7" /></bc>
<bc tabindex="1"><img src="http://www.queremospeliculas.com/wp/wp-content/uploads/2012/11/buscandonemo-peli-150x150.jpg" /></bc>
<bc tabindex="1"><img src="http://lookwallpaper.com/wp-content/uploads/2013/04/megamind-movie-wallpaper-hd-150x150.jpg" /></bc>
<bc tabindex="1"><img src="http://lookwallpaper.com/wp-content/uploads/2013/04/green-lantern-movie-wallpaper-hd-150x150.jpg" /></bc>
<bc tabindex="1"><img src="http://174050363.r.dediservecdn.com/wp-content/uploads/2013/06/nemo-150x150.jpg" /></bc>
<bc tabindex="1"><img src="http://hdwallpapersbase.com/wp-content/uploads/2013/01/Finding-Nemo-Wallpaper-150x150.jpg" /></bc>
<bc tabindex="1"><img src="http://hotwallpaper2013.com/wp-content/uploads/2013/05/Nemo-Fish-Cartoon-Pictures-HD-Wallpaper-150x150.jpg" /></bc>
<span class="closed">+</span>
<span class="closed-layer"></span>
</div>
Nota: Cambia la direccion de imagenes o URL con la de tus imagenes a tu gusto.
Para cambiar las dimensiones de ancho y alto de las imagenes solo cambie el valor :
width: 150px;
height: 150px;
0 comentarios:
Publicar un comentario