viernes, 23 de enero de 2015

Tutorial: Cómo dar efecto de fotografías apiladas a tus imágenes con CSS

¡Comparte el tutorial!
Bienvenidos a un nuevo tutorial para Blogger, mi categoría favorita para hacer tutoriales (aunque sea la categoría que menos tutoriales tenga jajaja).


El efecto que les traigo ahora es uno muy bonito con CSS, muy fácil de implementar, y realiza una simulación de imágenes apiladas una sobre otras.

¿Que necesitamos?

* Un blog

Dificultad

Fácil

Paso 1:

Bien, primero veamos el efecto que lograremos con este tutorial:


Si te ha gustado ahora vamos a implementarlo.
Lo primero será ir a la plantilla de nuestro blog y buscaremos la siguiente linea:
]]></b:skin>

Y justo arriba de ella pegamos lo siguiente:
.separator {
margin: 20px;
text-align: center;
clear: both;
}
.separator a {
display: table;
position: relative;
z-index: 10;
max-width: 94% !important;
margin: 10px auto !important;
}
.separator img {
display: table-cell;
max-width: 100% !important;
padding: 10px;
background: #fff;
-webkit-box-shadow: 0 1px 5px #999;
-moz-box-shadow: 0 1px 5px #999;
box-shadow: 0 1px 5px #999;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.separator a:before, .separator a:after {
content: "";
display: block;
position: absolute;
top: -5px;
left: 0;
width: 100%;
height: 100%;
background: white;
-webkit-box-shadow: 0 1px 5px #999;
-moz-box-shadow: 0 1px 5px #999;
box-shadow: 0 1px 5px #999;
-webkit-transition: .3s all;
-moz-transition: .3s all;
transition: .3s all;
}
.separator a:before {
z-index: -2;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
transform: rotate(2deg);
}
.separator a:after {
z-index: -3;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.separator a:hover:before, .separator a:hover:after {
top: -2px;
left: 2px;
bottom: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}

Muy bien, ahora guardamos los cambios y listo, ya podemos subir imágenes a nuestro blog y podremos visualizar este bonito efecto.

¡IMPORTANTE!
Para que el efecto sea visible es muy importante dejar tus imagenes con el enlace que Blogger genera por defecto, o bien, encerrar tu imagen tal como se muestra en el siguiente código:
<div class="separator">
<a href="javascript:void();">
<img src="URL_DE_TU_IMAGEN" />
</a></div>

Espero que este bonito efecto con CSS para tu blog te sea de utilidad :)

Fin del tutorial
Ayúdanos compartiendo esto
WhatsApp

En este momento hay comentario(s) sobre Tutorial: Cómo dar efecto de fotografías apiladas a tus imágenes con CSS.


En este momento hay 2 comentarios sobre Tutorial: Cómo dar efecto de fotografías apiladas a tus imágenes con CSS.

 
Este sitio utiliza cookies propias y de terceros, éstas recogen datos sobre sus hábitos de navegación para mostrarle publicidad personalizada y realizar diversos análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. ACEPTO Más información.