Hojas apiladas sin pseudoelementos. Box shadow hace la magia. 16.3.12
Hojas apiladas sin pseudoelementos. Box shadow hace la magia.
Sencillo y semántico marcado html y mínimo Css
Estos efectos de las puntas de hojas apiladas suelen realizarse con ayuda de los pseudoelementos :before y :after.
Pero hay ocasiones en que los pseudoelementos ya están ocupados. Así que esta es otra forma para que tengas donde elegir.
El marcado html no puede ser más semántico y simple. 1 sóla caja:
<div class="hojas_apiladas"></div>
Y su Css asociado está a su altura. Una pizca de sombras:
.hojas_apiladas {
background: #fff;
box-shadow:
0 1px 1px rgba(0, 0, 0, 0.15),
-15px 15px 0 -5px #f5f5f5,
0 16px 6px -2px rgba(0, 0, 0, 0.2),
25px 30px 0 -8px #f5f5f5,
20px 29px 20px -8px rgba(0, 0, 0, 0.4);
border: 1px solid rgba(200,200,200,.6);
/***********
Lo siguiente sólo a efectos de visualizar las hojas
************/
height: 300px;
width: 75%;
margin: 10px auto;
padding: 3em 2em 0;
}
Explicación del Css
Sencillo, sólo es un efecto óptico producido por el fondo del div (#fff=blanco) y sombras de dos colores alternadas: primero una negra con transparencia (rgba), seguida de una casi blanca (#f5f5f5), a continuación de nuevo la negra. Esas conforman la primera hoja que sobresale y su sombra.
La segunda hoja y más abajo es de nuevo una sombra #f5f5f5 y a continuación su sombra proyectada otra vez negro en rgba.
El borde es a efectos de contraste, pues el efecto depende mucho del fondo sobre el que se sitúe.
El resto de valores numéricos en cada sombra es para desplazarlas unas respecto a otras. Juega con ellos y observa los cambios.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso