En populær designteknik er at oprette en indholdsbeholder, der ligner et ark papir og at stable andre ark papir under det og tilføje en lagdelt eller tredimensionel stil. Vi kan skabe denne effekt ved hjælp af CSS lige op, men der er flere typer stablede papirdesign, vi kan overveje. Vi leverer især uddrag til fire.
Lodret stak papir nederst
Ideen her er, at vores indholdsbeholder er det øverste ark papir, og flere ark er stablet under det med deres kanter vist i bunden af det øverste ark.
Se Pen Stacked Paper Effect - Vertical af CSS-Tricks (@ css-tricks) på 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; )Lodret stak papir ovenpå
Dette er det samme koncept som det sidste, men med papirstakken afsløret på toppen af containeren i stedet for bunden. Den eneste forskel her er, at vi har omplaceret box-shadowegenskaben på .paperelementet ved hjælp af negative tal.
Se Pen Stacked Paper Effect - Vertical Top af CSS-Tricks (@ css-tricks) på 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; )Diagonal stak papir
Dette er en lidt anden metode, hvor vi bruger ::beforeog ::afterpseudoelementerne til at skabe de ekstra ark papir snarere end den box-shadowteknik, der blev brugt i de tidligere eksempler.
Se Pen Stacked Paper Effect - Diagonal af CSS-Tricks (@ css-tricks) på 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; )Uorganiseret papirstabel
Vi kan forskubbe arkene for at skabe et bevidst rodet udseende ved hjælp af den samme slags teknik med pseudo-elementer som det sidste eksempel, selvom vi bruger transformegenskaben til at rotere de underliggende papirark. Dette eksempel forudsætter brugen af Autoprefixer, eller at præfikser bruges til den transformegenskab, hvor browsersupport kan aftage.
Se Pen Stacked Paper Effect - Messy af CSS-Tricks (@ css-tricks) på 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; )