BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Efecto fotos apiladas únicamente con CSS3

07/NOV/2013 4.997 visitas Ver comentarios
Efecto fotos apiladas únicamente con CSS3

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

Esto que traigo es un minitutorial para crear un bonito efecto de fotos apiladas utilizando exclusivamente CSS3 sin plugins ni agregados externos ni nada que te complique la vida para aplicarlo.

El efecto, se puede ver en la captura que aparece aquí arriba o en la demo (pulsando en el botón azul) y, básicamente, lo que hace es crear capas similares a la que muestra la imagen utilizándolas como sombras de la capa principal.

Es decir, mostraremos nuestra foto como siempre y con dos líneas de CSS crearemos este (según mi opinión) bonito efecto visual, dando la sensación de que cada foto tiene muchas otras colocadas por debajo.

Para ello nos hace falta tener en cuenta un par de aspectos de nuestro código CSS, tal cual lo comento a continuación:

  • El div de la foto principal debe tener POSICIÓN RELATIVA. Muy importante para poder posicionar de forma absoluta las capas que se crearán antes y después y poder ubicarlas por debajo mediante z-index.
  • Indicar el tamaño del DIV principal ya que las capas de sombras creadas usarán el 100% de ancho y alto (me ha pasado que lo tome del body y no del div que corresponde).
  • Personalizar nuestras sombras con los colores que más nos interesa.

Cabe destacar que este efecto funciona en Chrome, en Firefox, en Safari, en Opera y en Internet Explorer pero desde la versión 9 en adelante, ya que la 8 y anteriores no pueden mostrar sombras, no pueden rotar objetos, en fin, no pueden tener nada exclusivo de CSS3.

El único defectillo no tratado en la demo es que en Firefox las sombras se hacen más grandes que en el resto de los navegadores y se ven demasiado... no es un defecto que me moleste en sí mismo, pero si la foto se ve grande (mira la primer demo en Firefox y entenderás lo que digo), tal vez sí haya que reajustar el tamaño de las capas correspondientes.

En fin, nada más, aquí debajo tienes el CSS que hace la magia, espero que te guste, que comentes lo que veas que se puede mejorar y que si te parece interesante, lo compartas a tus contactos en tus redes sociales. Estaré agradecido.

Código 1 - HTML
<div class="div_1"><img src="darth_vader.jpg"></div>
<div class="div_2"><img src="vader.png"></div>
Código 2 - CSS
.div_1{margin:60px auto;position: relative;width:600px}
		.div_2{margin:60px auto;position: relative;width:300px}
		
		.div_1:before,.div_2:before {content: "";height: 100%; width: 100%;background: #888;border: 5px solid #fff;position: absolute;z-index: -1;top: 0px;left: -5px;box-shadow:  1px 1px 5px 0px rgba(0, 0, 0, 0.25);border-radius: 3px;-webkit-transform: rotate(-2deg);-moz-transform: rotate(-2deg);-o-transform: rotate(-2deg);-ms-transform: rotate(-2deg);transform: rotate(-2deg);box-sizing: border-box;}
		
		.div_1:after,.div_2:after {content: "";height: 100%; width: 100%;background: #888;border: 5px solid #fff;position: absolute;z-index: -1;top: 3px;left: 0px;box-shadow:  1px 1px 5px 0px rgba(0, 0, 0, 0.25);border-radius: 3px;-webkit-transform: rotate(3deg);-moz-transform: rotate(3deg);-o-transform: rotate(3deg);-ms-transform: rotate(3deg);transform: rotate(3deg);box-sizing: border-box;}
			
		.div_1 img{width:590px;height:auto;display:block;border-style: solid;box-shadow:  1px 1px 5px 0px rgba(0, 0, 0, 0.25);border-color: #fff;border-top-width: 5px;border-left-width: 5px;border-right-width: 5px;border-bottom-width: 5px;position: relative;z-index: 1;}
		
		.div_2 img{width:290px;height:auto;display:block;border-style: solid;box-shadow:  1px 1px 5px 0px rgba(0, 0, 0, 0.25);border-color: #fff;border-top-width: 5px;border-left-width: 5px;border-right-width: 5px;border-bottom-width: 5px;position: relative;z-index: 1;}

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 21 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018