Suosittu suunnittelutekniikka on luoda paperiarkille näyttävä sisältösäiliö ja pinota muut paperiarkit sen alle lisäämällä kerrostettu tai kolmiulotteinen tyyli. Voimme luoda tämän vaikutuksen käyttämällä suoraan ylöspäin CSS: ää, mutta voimme harkita useita pinottuja paperimalleja. Toimitamme katkelmia erityisesti neljälle.
Pystysuora paperipino pohjassa
Ajatuksena on, että sisältösäiliömme on ylin paperiarkki ja sen alle pinotaan lisää arkkia siten, että niiden reunat näkyvät ylemmän arkin alaosassa.
Katso Code Pen -kynän pinotun paperitehosteen - pystysuora CSS-Tricks (@ css-tricks) avulla.
.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; )Pystysuora paperipino päälle
Tämä on sama käsite kuin viimeinen, mutta paperipino paljastuu astian yläosassa pohjan sijasta. Ainoa ero tässä on, että olemme sijoittaneet box-shadowominaisuuden uudelleen .paperelementille negatiivisten numeroiden avulla.
Katso CSS-Tricksin (@ css-tricks) kynän pinottu paperitehoste - pystysuora yläosa CodePenistä.
.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; )Diagonaalinen paperipino
Tämä on hiukan erilainen menetelmä, jossa käytämme ::beforeja ::afterpseudoelementtejä ylimääräisten paperiarkkien luomiseen box-shadowaikaisemmissa esimerkeissä käytetyn tekniikan sijaan .
Katso Code Pen -kynän pinotun paperitehosteen - diagonaali CSS-Tricks (@ 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; )Järjestämätön paperipino
Voimme porrastaa paperiarvot tarkoituksellisen sotkuisen ilmeen luomiseksi käyttämällä samanlaista tekniikkaa pseudoelementeillä kuin viimeinen esimerkki, vaikka transformominaisuutta käytettäisiin kiertämään alla olevia paperiarkkia. Tässä esimerkissä oletetaan, että käytetään Autoprefixer-sovellusta tai että etuliitteitä käytetään transformominaisuudelle, jossa selaintuki voi heikentyä.
Katso Kynän pinottu paperitehoste - Messy by CSS-Tricks (@ css-tricks) CodePenissä.
.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; )