Populaarne disainitehnik on luua sisukonteiner, mis näeb välja nagu paberileht, ja laduda selle alla teised paberilehed, lisades kihilise või kolmemõõtmelise stiili. Selle efekti saame luua otse ülespoole suunatud CSS-i abil, kuid me võime kaaluda mitut tüüpi virnastatud paberi kujundusi. Pakume juppe eriti neljale.
Vertikaalne paberivirn põhjas
Siin on idee, et meie sisukonteiner on ülemine paberileht ja selle alla on virnastatud rohkem lehti, mille servad on ülemise lehe allosas.
Vaadake CodePenilt pliiatsiga virnastatud paberi efekti - vertikaalne CSS-Tricks (@ css-tricks).
.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; )Vertikaalne paberivirn peal
See on sama kontseptsioon nagu viimane, kuid paberivirn paljastati põhja asemel konteineri ülaosas. Ainus erinevus on selles, et oleme box-shadowomaduse .paperelemendile negatiivsete arvude abil ümber paigutanud .
Vaadake CodePenist CSS-Tricksi (@ css-tricks) pliiatsiga virnastatud paberi efekti - vertikaalset ülaosa.
.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; )Diagonaalne paberivirn
See on veidi erinev meetod, kus täiendavate paberilehtede loomiseks kasutame ::beforeja ::afterpseudoelemente, mitte box-shadoweelmistes näidetes kasutatud tehnikat.
Vaadake CodePenilt pliiatsiga virnastatud paberi efekti - diagonaal CSS-Tricks poolt (@ css-tricks).
/* 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; )Korrastamata paberivirn
Me võime paberilehti järk-järgult segamini ajada, et luua tahtlikult räpane välimus, kasutades samasugust pseudoelementidega tehnikat nagu viimane näide, ehkki kasutame transformomadust aluseks olevate paberilehtede pööramiseks. Selles näites eeldatakse Autoprefixeri kasutamist või et atribuudi jaoks kasutatakse prefikse, transformkus brauseri tugi võib väheneda.
Vaadake CodePenist pliiatsiga virnastatud paberi efekti - CSS-Tricks (@ css-tricks) räpane.
.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; )