Una tecnica di progettazione popolare consiste nel creare un contenitore di contenuti che assomigli a un foglio di carta e impilare altri fogli di carta sotto di esso, aggiungendo uno stile a strati o tridimensionale. Possiamo creare questo effetto usando CSS diretti, ma ci sono più tipi di disegni di carta impilati che possiamo considerare. Forniremo snippet per quattro in particolare.
Risma di carta verticale in basso
L'idea qui è che il nostro contenitore di contenuti è il foglio di carta superiore e più fogli sono impilati sotto di esso con i bordi visualizzati nella parte inferiore del foglio superiore.
Vedi l'effetto Pen Stacked Paper - Verticale di CSS-Tricks (@ css-tricks) su 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; )Risma di carta verticale in alto
Questo è lo stesso concetto dell'ultimo, ma con la pila di carte rivelata sulla parte superiore del contenitore invece che sul fondo. L'unica differenza qui è che abbiamo riposizionato la box-shadowproprietà .papersull'elemento utilizzando numeri negativi.
Vedi l'effetto Pen Stacked Paper - Vertical Top di CSS-Tricks (@ css-tricks) su 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; )Risma di carta diagonale
Questo è un metodo leggermente differente, in cui si utilizzano i ::beforee ::afterpseudo-elementi per creare ulteriori fogli di carta, piuttosto che la box-shadowtecnica utilizzata negli esempi precedenti.
Vedi l'effetto Pen Stacked Paper - Diagonal di CSS-Tricks (@ css-tricks) su 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; )Risma di carta disorganizzata
Possiamo sfalsare i fogli di carta per creare un aspetto intenzionalmente disordinato utilizzando lo stesso tipo di tecnica con pseudo-elementi dell'ultimo esempio, anche se utilizzando la transformproprietà per ruotare i fogli di carta sottostanti. Questo esempio presuppone l'uso di Autoprefixer o che i prefissi vengano utilizzati per la transformproprietà in cui il supporto del browser potrebbe diminuire.
Guarda l'effetto Pen Stacked Paper - Disordinato di CSS-Tricks (@ css-tricks) su 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; )