soy Kseso y esto EsCSS

Hojas apiladas sin pseudoelementos. Box shadow hace la magia.

Hojas apiladas sin pseudoelementos. Box shadow hace la magia.

·Por Kseso ✎ 0
Jugando con Css en KsesoCss

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.

avatar del Editor del blog

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 Don Kseso Kseso