Een populaire ontwerptechniek is om een inhoudcontainer te maken die eruitziet als een vel papier en er andere vellen papier onder te stapelen, om een gelaagde of driedimensionale stijl toe te voegen. We kunnen dit effect creëren met gewone CSS, maar er zijn meerdere soorten gestapelde papierontwerpen die we kunnen overwegen. We bieden met name fragmenten voor vier.
Verticale stapel papier op de bodem
Het idee hier is dat onze inhoudscontainer het bovenste vel papier is en dat er meer vellen onder worden gestapeld met de randen onder aan het bovenste vel.
Zie het Pen Stacked Paper Effect - Verticaal door CSS-Tricks (@ css-tricks) op 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; )Verticale stapel papier bovenop
Dit is hetzelfde concept als het vorige, maar met de stapel papieren onthuld boven op de container in plaats van op de bodem. Het enige verschil hier is dat we de box-shadoweigenschap the op het .paperelement hebben verplaatst met behulp van negatieve getallen.
Zie het Pen Stacked Paper Effect - Vertical Top door CSS-Tricks (@ css-tricks) op 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; )Diagonale stapel papier
Dit is een iets andere methode, waarbij we de ::beforeen ::afterpseudo-elementen gebruiken om de extra vellen papier te maken, in plaats van de box-shadowtechniek die in de vorige voorbeelden werd gebruikt.
Zie het Pen Stacked Paper Effect - Diagonal by CSS-Tricks (@ css-tricks) op 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; )Ongeorganiseerde stapel papier
We kunnen de vellen papier verspringen om een opzettelijk rommelige look te creëren met behulp van dezelfde soort techniek met pseudo-elementen als het vorige voorbeeld, maar met de transformeigenschap om de onderliggende vellen papier te roteren. In dit voorbeeld wordt ervan uitgegaan dat Autoprefixer wordt gebruikt of dat er voorvoegsels worden gebruikt voor de transformeigenschap waar de browserondersteuning kan afnemen.
Zie het Pen Stacked Paper Effect - Messy by CSS-Tricks (@ css-tricks) op 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; )