Népszerű tervezési technika az, ha olyan tartalomtartályt hozunk létre, amely úgy néz ki, mint egy papírlap, és más papírlapokat halmozzunk alá, réteges vagy háromdimenziós stílus hozzáadásával. Ezt a hatást egyenesen felfelé irányuló CSS segítségével hozhatjuk létre, de többféle halmozott papírtervet is figyelembe vehetünk. Különösen négynek adunk részleteket.
Függőleges papírköteg az alján
Az az elképzelés, hogy a tartalomtartályunk a felső papírlap, és több lap van halmozott alatta úgy, hogy széleik a felső lap alján jelennek meg.
Lásd: Tollra rakott papírhatás - függőleges CSS-Tricks (@ css-tricks) a CodePen oldalon.
.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; )Függőleges papírköteg a tetején
Ez ugyanaz a koncepció, mint az utolsó, de a papírköteget az alja helyett a tartály tetején tárják fel. Az egyetlen különbség itt az, hogy negatív számok segítségével áthelyeztük a box-shadowtulajdonságot az .paperelemre.
Lásd: CSS-Tricks (@ css-tricks) tollal halmozott papíreffektus - függőleges teteje a CodePen-en.
.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; )Átlós halom papír
Ez egy kissé eltérő módszer, ahol az ::beforeés ::afterpszeudo-elemeket használjuk a további papírlapok létrehozására box-shadow, az előző példákban alkalmazott technika helyett .
Lásd a Tollra halmozott papírhatás - Átlós CSS-trükkökkel (@ css-tricks) a CodePen-en.
/* 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; )Rendezetlen papírköteg
Fokozhatjuk a papírlapokat, hogy szándékosan rendetlen megjelenést hozzunk létre, ugyanolyan technikával, pszeudoelemekkel, mint az utolsó példa, bár a transformtulajdonságot használjuk az alatta lévő papírlapok forgatásához. Ez a példa feltételezi az Autoprefixer használatát, vagy azt, hogy az előtagokat használják az transformingatlanhoz, ahol a böngésző támogatása csökkenhet.
Lásd a Pen Stacked Paper Effect - Messy by CSS-Tricks (@ css-tricks) a CodePen oldalon.
.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; )