Gestapelter Papiereffekt

Eine beliebte Desigentechnik besteht darin, einen Inhaltscontainer zu erstellen, der wie ein Blatt Papier aussieht, und andere Blätter Papier darunter zu stapeln, um einen geschichteten oder dreidimensionalen Stil zu erhalten. Wir können diesen Effekt mit reinem CSS erstellen, aber es gibt verschiedene Arten von gestapelten Papierdesigns, die wir berücksichtigen können. Wir werden hier vier konkrete Beispiele liefern.

Vertikaler Papierstapel unten

Die Idee hier ist, dass unser Inhaltscontainer das oberste Blatt Papier ist und weitere Blätter darunter gestapelt sind, deren Kanten am unteren Rand des obersten Blattes sichtbar sind.

Siehe den Pen Gestapelter Papiereffekt – Vertikal von CSS-Tricks (@css-tricks) auf CodePen.

<div class="paper"></div>

.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 dasselbe Konzept wie beim letzten Beispiel, aber der Papierstapel wird oben auf dem Container angezeigt statt unten. Der einzige Unterschied hier ist, dass wir die Eigenschaft box-shadow auf dem Element .paper mit negativen Zahlen neu positioniert haben.

Siehe den Pen Gestapelter Papiereffekt – Vertikal Oben von CSS-Tricks (@css-tricks) auf CodePen.

<div class="paper"></div>

.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 Pseudoelemente ::before und ::after verwenden, um die zusätzlichen Papierblätter zu erstellen, anstatt die box-shadow-Technik, die in den vorherigen Beispielen verwendet wurde.

Siehe den Pen Gestapelter Papiereffekt – Diagonal von CSS-Tricks (@css-tricks) auf CodePen.

<div class="paper"></div>

/* 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;
}

Unorganisierter Papierstapel

Wir können die Papierblätter versetzt anordnen, um einen bewusst unordentlichen Look zu erzeugen, indem wir die gleiche Technik mit Pseudoelementen wie im letzten Beispiel verwenden, jedoch mit der Eigenschaft transform, um die darunter liegenden Papierblätter zu drehen. Dieses Beispiel geht von der Verwendung von Autoprefixer aus oder davon, dass Präfixe für die Eigenschaft transform dort verwendet werden, wo die Browserunterstützung nachlassen könnte.

Siehe den Pen Gestapelter Papiereffekt – Unordentlich von CSS-Tricks (@css-tricks) auf CodePen.

<div class="paper"></div>

.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;
}