En populær designteknikk er å lage en innholdsbeholder som ser ut som et ark og å stable andre ark under den, og legge til en lagdelt eller tredimensjonal stil. Vi kan lage denne effekten ved hjelp av rett opp CSS, men det er flere typer stablet papirdesign vi kan vurdere. Vi gir spesielt utdrag for fire.
Vertikal papirbunke på bunnen
Tanken her er at innholdsbeholderen vår er det øverste arket, og flere ark er stablet under det med kantene vist nederst på det øverste arket.
Se Pen Stacked Paper Effect - Vertical av 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; )Vertikal papirbunke på toppen
Dette er det samme konseptet som det siste, men med papirbunken avslørt på toppen av containeren i stedet for bunnen. Den eneste forskjellen her er at vi har plassert box-shadoweiendommen på .paperelementet ved hjelp av negative tall.
Se Pen Stacked Paper Effect - Vertical Top av 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 papirbunke
Dette er en litt annen metode, der vi bruker ::beforeog ::afterpseudoelementene til å lage de ekstra arkene, i stedet for box-shadowteknikken som ble brukt i de foregående eksemplene.
Se Pen Stacked Paper Effect - Diagonal av 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; )Uorganisert papirstabel
Vi kan forskyve arkene for å skape et bevisst rotete utseende ved å bruke samme slags teknikk med pseudo-elementer som det siste eksemplet, selv om vi bruker transformegenskapen til å rotere de underliggende papirarkene. Dette eksemplet forutsetter bruken av Autoprefixer eller at prefikser brukes for transformeiendommen der nettleserstøtten kan avta.
Se Pen Stacked Paper Effect - Messy av 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; )