En populär designteknik är att skapa en innehållsbehållare som ser ut som ett pappersark och att stapla andra pappersark under det och lägga till en skiktad eller tredimensionell stil. Vi kan skapa den här effekten med hjälp av rakt upp CSS, men det finns flera typer av staplade pappersdesigner vi kan överväga. Vi kommer att tillhandahålla utdrag för i synnerhet fyra.
Vertikal pappersbunt på botten
Tanken här är att vår innehållsbehållare är det övre pappersarket och fler ark staplas under det med sina kanter som visas längst ner på det övre arket.
Se Penna staplade papperseffekt - vertikala 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 pappersbunt överst
Detta är samma koncept som det sista, men med pappersbunten avslöjad på toppen av behållaren istället för botten. Den enda skillnaden här är att vi har omplacerat box-shadowegenskapen på .paperelementet med negativa tal.
Se Penna staplade papperseffekt - vertikal topp 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 pappersbunt
Detta är en något annorlunda metod, där vi använder ::beforeoch ::afterpseudoelementen för att skapa ytterligare pappersark snarare än den box-shadowteknik som användes i de föregående exemplen.
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; )Oorganiserat pappersbunt
Vi kan skjuta pappersarken för att skapa ett medvetet rörigt utseende med samma typ av teknik med pseudoelement som det sista exemplet, men med hjälp av transformegenskapen för att rotera de underliggande pappersarken. Det här exemplet förutsätter att Autoprefixer används eller att prefix används för transformegenskapen där webbläsarsupport 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; )