Eine beliebte Designtechnik besteht darin, einen Inhaltscontainer zu erstellen, der wie ein Blatt Papier aussieht, und andere Blätter darunter zu stapeln, wobei ein geschichteter oder dreidimensionaler Stil hinzugefügt wird. Wir können diesen Effekt mit direktem CSS erzielen, es gibt jedoch mehrere Arten von gestapelten Papierdesigns, die wir berücksichtigen können. Wir werden Snippets für vier Personen bereitstellen.
Vertikaler Papierstapel unten
Die Idee dabei ist, dass unser Inhaltscontainer das obere Blatt Papier ist und weitere Blätter darunter gestapelt werden, wobei die Kanten unten auf dem oberen Blatt angezeigt werden.
Siehe den Stift gestapelten Papiereffekt - Vertikal durch CSS-Tricks (@ css-Tricks) auf 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; )Vertikaler Papierstapel oben
Dies ist das gleiche Konzept wie beim letzten, jedoch wird der Papierstapel oben auf dem Behälter und nicht unten aufgedeckt. Der einzige Unterschied besteht darin, dass wir die box-shadowEigenschaft auf dem .paperElement mit negativen Zahlen neu positioniert haben .
Siehe den Stift gestapelten Papiereffekt - Vertikales Oberteil mit CSS-Tricks (@ css-Tricks) auf 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; )Diagonaler Papierstapel
Dies ist eine etwas andere Methode, bei der wir die ::beforeund ::afterPseudoelemente verwenden, um die zusätzlichen Papierblätter zu erstellen, anstatt die box-shadowin den vorherigen Beispielen verwendete Technik.
Siehe den Stift gestapelten Papiereffekt - Diagonale durch CSS-Tricks (@ css-Tricks) auf 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; )Desorganisierter Papierstapel
Wir können die Papierbögen versetzen, um ein absichtlich unordentliches Aussehen zu erzielen, indem wir dieselbe Technik mit Pseudoelementen wie im letzten Beispiel verwenden, obwohl wir die transformEigenschaft verwenden, um die darunter liegenden Papierbögen zu drehen. In diesem Beispiel wird die Verwendung von Autoprefixer oder die Verwendung von Präfixen für die transformEigenschaft vorausgesetzt, bei der die Browserunterstützung möglicherweise nachlässt.
Sehen Sie den Pen Stacked Paper-Effekt - Durch CSS-Tricks (@ css-Tricks) auf CodePen chaotisch.
.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; )