Efecto Páginas detrás con box-shadow
Utilizando la propiedad box-shadow del CSS, lograremos un efecto de sombras múltiples detrás de una imagen o un contenedor.
Habrás visto en algunos sitios algo parecido a esto que te voy a mostrar. Puedes aplicar este efecto a cualquier cosa y en realidad le dejará un buen toque de originalidad. Se trata de simular sombras que están detrás del elemento, que parecen ser páginas.
Esto lo podés aplicar tanto en imágenes
como en contenedores, como el cuerpo de entradas de tu plantilla.
Lo principal para aplicar el efecto es aplicar una clase al elemento, como las imágenes o contenedores, o buscar el ID del contenedor de tu plantilla que quieras aplicar el efecto, como Blog1, que es el contenedor principal de las entradas.
Y en el HTML utilizamos (para una imagen)
Por último puedes también experimentar con los colores, ¿quién dice que las sombras son sólo negras?
Imágenes encontradas en El espejo lúdico, captura de pantalla obtenida a través de la plantilla de Ayuda Bloggers.
Esto lo podés aplicar tanto en imágenes
Lo principal para aplicar el efecto es aplicar una clase al elemento, como las imágenes o contenedores, o buscar el ID del contenedor de tu plantilla que quieras aplicar el efecto, como Blog1, que es el contenedor principal de las entradas.
.imagen-sombra {
box-shadow: 0 10px 0 -5px #E4E4E4,
0 20px 0 -10px #D5D5D5;
margin-bottom:15px;
padding:0;
}Debes reemplazar .imagen-sombra con un # seguido del ID del contenedor.Y en el HTML utilizamos (para una imagen)
<img class='imagen-sombra' src='url-imagen'/>Y ya lo obtenemos, pero si la imagen es más oscura, quisiéramos que las sombras también lo sean, entonces cambiamos los colores, que deberán ir de más oscuro a más claro..imagen-sombra {
box-shadow: 0 10px 0 -5px #D5D5D5, /* Primera sombra */
0 20px 0 -10px #E4E4E4; /* Segunda sombra */
margin-bottom:15px;
padding:0;
}Y si quisieras agregar más sombras, basta con agregar otra línea modificando tres cosas, el número indicado en azul indicará la posición de la sombra, por lo que deberás aumentarlo luego de cada línea. El número indicado en rojo, indica el tamaño de la sombra, deberás ir disminuyendo este valor, ya que como está en negativo la sombra cada vez disminuye de tamaño. Y por supuesto deberás cambiar el color, de modo que la escala aumente o disminuya..imagen-sombra {
box-shadow: 0 10px 0 -5px #D5D5D5, /* Primera sombra */
0 20px 0 -10px #E4E4E4, /* Segunda sombra */
0 30px 0 -15px #F6F6F6; /* Tercera sombra */
margin-bottom:20px;
padding:0;
}
Imágenes encontradas en El espejo lúdico, captura de pantalla obtenida a través de la plantilla de Ayuda Bloggers.
Me ha gustado el efecto que se obtiene en el pie de las entradas del ejemplo que haces con mi blog, la verdad ya había experimentado usar box-shadow en varios niveles pero de esta manera únicamente en imágenes, se vé increíble en el footer del post (Revisaré.
ResponderEliminarEnhorabuena por el artículo, voy a ponerle atención a tu blog y twittearé tus artículos ya que son bastante buenos :)
Gracias Víctor, que bueno que te gustó :D Tus artículos también son geniales! Me encanta tu blog, seguí así :) Muchos saludos!
EliminarSabía como colocar múltiples sombras pero nunca se me ocurrió hacer tan buen efecto con ellas ¡excelente!
ResponderEliminarGracias, Carlos. Por cierto, he visto tu blog y me gusta mucho lo que publicas :) Saludos.
EliminarHola Lucas, yo tengo una duda, ¿Es posible también colocar esa sombra a la derecha? Para que quede a la derecha y abajo.
ResponderEliminarSaludos, me encanta tu blog :D