Una técnica de diseño popular es crear un contenedor de contenido que parezca una hoja de papel y apilar otras hojas de papel debajo, agregando un estilo en capas o tridimensional. Podemos crear este efecto usando CSS directo, pero hay varios tipos de diseños de papel apilado que podemos considerar. Proporcionaremos fragmentos de cuatro en particular.
Pila vertical de papel en la parte inferior
La idea aquí es que nuestro contenedor de contenido es la hoja de papel superior y más hojas se apilan debajo con sus bordes mostrados en la parte inferior de la hoja superior.
Vea el Efecto de papel apilado con bolígrafo - Vertical por CSS-Tricks (@ css-tricks) en CodePen.
.paper ( background: #fff; box-shadow: /* The top layer shadow */ 0 1px 1px rgba(0,0,0,0.15), /* The second layer */ 0 10px 0 -5px #eee, /* The second layer shadow */ 0 10px 1px -4px rgba(0,0,0,0.15), /* The third layer */ 0 20px 0 -10px #eee, /* The third layer shadow */ 0 20px 1px -9px rgba(0,0,0,0.15); /* Padding for demo purposes */ padding: 30px; )Pila vertical de papel en la parte superior
Este es el mismo concepto que el anterior, pero con la pila de papeles revelada en la parte superior del contenedor en lugar de en la parte inferior. La única diferencia aquí es que hemos reposicionado la box-shadowpropiedad en el .paperelemento usando números negativos.
Vea el Efecto de papel apilado con lápiz: parte superior vertical de CSS-Tricks (@ css-tricks) en CodePen.
.paper ( background: #fff; box-shadow: /* The top layer shadow */ 0 -1px 1px rgba(0,0,0,0.15), /* The second layer */ 0 -10px 0 -5px #eee, /* The second layer shadow */ 0 -10px 1px -4px rgba(0,0,0,0.15), /* The third layer */ 0 -20px 0 -10px #eee, /* The third layer shadow */ 0 -20px 1px -9px rgba(0,0,0,0.15); /* Padding for demo purposes */ padding: 30px; )Pila de papel diagonal
Este es un método ligeramente diferente, en la que usamos los ::beforey ::afterpseudo-elementos para crear las hojas de papel adicionales, en lugar de la box-shadowtécnica utilizada en los ejemplos anteriores.
Vea el Efecto de papel apilado con bolígrafo - Diagonal por CSS-Tricks (@ css-tricks) en CodePen.
/* Diagonal stacked paper effect */ .paper ( background-color: #fff; /* Need position to allow stacking of pseudo-elements */ position: relative; /* Padding for demo purposes */ padding: 30px; ) .paper, .paper::before, .paper::after ( /* Add shadow to distinguish sheets from one another */ box-shadow: 2px 1px 1px rgba(0,0,0,0.15); ) .paper::before, .paper::after ( content: ""; position: absolute; width: 100%; height: 100%; background-color: #eee; ) /* Second sheet of paper */ .paper::before ( left: 7px; top: 5px; z-index: -1; ) /* Third sheet of paper */ .paper::after ( left: 12px; top: 10px; z-index: -2; )Pila de papel desorganizada
Podemos escalonar las hojas de papel para crear una apariencia desordenada intencionalmente usando el mismo tipo de técnica con pseudoelementos como el último ejemplo, aunque usando la transformpropiedad para rotar las hojas de papel subyacentes. Este ejemplo asume el uso de Autoprefixer o que se usan prefijos para la transformpropiedad donde la compatibilidad del navegador puede disminuir.
Vea el efecto de papel apilado con lápiz: desordenado por CSS-Tricks (@ css-tricks) en CodePen.
.paper ( background: #fff; padding: 30px; position: relative; ) .paper, .paper::before, .paper::after ( /* Styles to distinguish sheets from one another */ box-shadow: 1px 1px 1px rgba(0,0,0,0.25); border: 1px solid #bbb; ) .paper::before, .paper::after ( content: ""; position: absolute; height: 95%; width: 99%; background-color: #eee; ) .paper::before ( right: 15px; top: 0; transform: rotate(-1deg); z-index: -1; ) .paper::after ( top: 5px; right: -5px; transform: rotate(1deg); z-index: -2; )