Une technique de conception populaire consiste à créer un conteneur de contenu qui ressemble à une feuille de papier et à empiler d'autres feuilles de papier en dessous, en ajoutant un style en couches ou en trois dimensions. Nous pouvons créer cet effet en utilisant directement du CSS, mais il existe plusieurs types de modèles de papier empilés que nous pouvons envisager. Nous fournirons des extraits pour quatre en particulier.
Pile verticale de papier en bas
L'idée ici est que notre conteneur de contenu est la feuille de papier supérieure et plus de feuilles sont empilées en dessous avec leurs bords affichés en bas de la feuille supérieure.
Voir l'effet de papier empilé Pen - Vertical par CSS-Tricks (@ css-tricks) sur 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; )Pile verticale de papier sur le dessus
C'est le même concept que le dernier, mais avec la pile de papiers révélée sur le dessus du conteneur au lieu du bas. La seule différence ici est que nous avons repositionné la box-shadowpropriété the sur l' .paperélément en utilisant des nombres négatifs.
Voir le Pen Stacked Paper Effect - Vertical Top par CSS-Tricks (@ css-tricks) sur 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; )Pile diagonale de papier
Ceci est une méthode légèrement différente, où nous utilisons les ::beforeet ::afterpseudo-éléments pour créer les feuilles de papier supplémentaires, plutôt que la box-shadowtechnique utilisée dans les exemples précédents.
Voir le Pen Stacked Paper Effect - Diagonal par CSS-Tricks (@ css-tricks) sur 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; )Pile de papier désorganisée
Nous pouvons décaler les feuilles de papier pour créer un aspect intentionnellement désordonné en utilisant le même type de technique avec des pseudo-éléments que le dernier exemple, tout en utilisant la transformpropriété de faire pivoter les feuilles de papier sous-jacentes. Cet exemple suppose l'utilisation de Autoprefixer ou que des préfixes sont utilisés pour la transformpropriété où la prise en charge du navigateur peut diminuer.
Voir le Pen Stacked Paper Effect - Messy par CSS-Tricks (@ css-tricks) sur 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; )