De nuevo estamos aquí para presentar les una fenomenal galería con el estilo archiconocido de la cámara de fotos Polaroid. La galería tiene un aspecto equivalente o parecido a la famosa foto de Polaroid. En dicha galería, se muestran las fotos de una forma desordenada e informal, pero dentro de un cierto orden. Y en mencionada galería, lleva consigo, un efecto zoom que al hacer clic en cualquier fotografía, cambian de tamaño para verse en un primer plano, en la pantalla de tu ordenador, con una animación lograda en cada foto con CSS3.
Demostración Galería Polaroid!
Puedes cambiar de fotografía, con tú teclado, con la tecla de tabulación o TAB, aquella tecla que tiene dos flechitas que indican diferentes direcciones, izquierda y derecha. Cómo he hablado antes, está realizado puramente con CSS3 y CSS. Con puras propiedades cómo estás: box-sizing, transition, user-select, box-shadow, transform, sin usar ningún código Javascript.
Bueno, después de está pequeña introducción, vamos a implantar el código en en un blog o también en una web. A continuación, podrás ver el código, sólo debes de copiarlo y pegarlo, allí dónde quieres que se vea, está galería, lo ideal, es añadirlo en una página estática en Blogger, por ejemplo. También cabe recordar, que debes de añadir las URL de las imágenes, en el código HTML, en él, está resaltado en modo de texto lo que debes de cambiar, eso es lo único que debes de configurar. Espero que os guste y que lo insertéis en vuestro blog o web. Enjoy!
<center><div class="polaroidgal">
<a tabindex="1"><img src="URL_DE_LA_IMAGEN"></a>
<a tabindex="2"><img src="URL_DE_LA_IMAGEN"></a>
<a tabindex="3"><img src="URL_DE_LA_IMAGEN"></a>
<a tabindex="4"><img src="URL_DE_LA_IMAGEN"></a>
<a tabindex="5"><img src="URL_DE_LA_IMAGEN"></a>
<a tabindex="6"><img src="URL_DE_LA_IMAGEN"></a>
<a tabindex="7"><img src="URL_DE_LA_IMAGEN"></a>
<a tabindex="8"><img src="URL_DE_LA_IMAGEN"></a>
<a tabindex="9"><img src="URL_DE_LA_IMAGEN"></a>
<a tabindex="10"><img src="URL_DE_LA_IMAGEN"></a>
<a tabindex="11"><img src="URL_DE_LA_IMAGEN"></a>
<a tabindex="12"><img src="URL_DE_LA_IMAGEN"></a>
</div></center>
<style>
.polaroidgal{
margin: 0px auto 0;
width: 600px;
}
.polaroidgal a {
display: inline-block;
height: 135px;
position: relative;
width: 180px;
-moz-user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.polaroidgal a img {
border: 8px solid #fff;
border-bottom: 20px solid #fff;
cursor: pointer;
display: block;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
z-index: 1;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 1.0s ease;
-moz-transition: all 1.0s ease;
-o-transition: all 1.0s ease;
transition: all 1.0s ease;
-moz-box-shadow: 2px 2px 4px #444;
-webkit-box-shadow: 2px 2px 4px #444;
-o-box-shadow: 2px 2px 4px #444;
box-shadow: 2px 2px 4px #444;
}
.polaroidgal a:nth-child(1) img {
-moz-transform: rotate(-25deg);
-webkit-transform: rotate(-25deg);
transform: rotate(-25deg);
}
.polaroidgal a:nth-child(2) img {
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.galeriapol a:nth-child(3) img {
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
.polaroidgal a:nth-child(4) img {
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.galeriapol a:nth-child(5) img {
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.polaroidgal a:nth-child(6) img {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.polaroidgal a:nth-child(7) img {
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
.polaroidgal a:nth-child(8) img {
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
.polaroidgal a:nth-child(9) img {
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
.polaroidgal a:nth-child(10) img {
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
.polaroidgal a:nth-child(11) img {
-moz-transform: rotate(25deg);
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
.polaroidgal a:nth-child(12) img {
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.polaroidgal a:focus img {
cursor: default;
height: 250%;
left: -150px;
top: -100px;
position: absolute;
width: 250%;
z-index: 25;
-webkit-transition: all 1.0s ease;
-moz-transition: all 1.0s ease;
-o-transition: all 1.0s ease;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
</style>
Get free premium widgets for your blog and website.