Teknik reka bentuk yang popular adalah membuat bekas kandungan yang kelihatan seperti selembar kertas dan menyusun helaian kertas lain di bawahnya, menambah gaya berlapis atau tiga dimensi. Kita boleh mencipta kesan ini dengan menggunakan CSS tegak lurus, tetapi terdapat pelbagai jenis reka bentuk kertas bertumpuk yang boleh kita pertimbangkan. Kami akan memberikan potongan untuk empat.
Tumpukan Kertas menegak di Bawah
Idea di sini adalah bahawa bekas kandungan kami adalah helaian kertas atas dan lebih banyak helai ditumpuk di bawahnya dengan pinggirnya dipaparkan di bahagian bawah helaian atas.
Lihat Kesan Penumpukan Kertas Pen - Vertical by CSS-Tricks (@ css-tricks) di 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; )Tumpukan Kertas menegak di Atas
Ini adalah konsep yang sama dengan yang terakhir, tetapi dengan timbunan kertas yang terdapat di bahagian atas bekas dan bukannya di bawah. Satu-satunya perbezaan di sini ialah kita telah meletakkan semula box-shadowsifat pada .paperelemen menggunakan nombor negatif.
Lihat Kesan Penumpukan Kertas Pen - Bahagian Atas Vertikal oleh CSS-Tricks (@ css-tricks) di 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; )Tumpukan Kertas Diagonal
Ini adalah kaedah yang sedikit berbeza, di mana kita menggunakan elemen pseudo ::beforedan ::afteruntuk membuat helaian kertas tambahan, dan bukannya box-shadowteknik yang digunakan dalam contoh sebelumnya.
Lihat Kesan Penumpukan Kertas Pen - Diagonal oleh CSS-Tricks (@ css-tricks) di 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; )Tumpukan Kertas Tidak Teratur
Kita dapat menggegarkan kepingan kertas untuk membuat tampilan yang sengaja tidak kemas menggunakan teknik yang sama dengan elemen pseudo sebagai contoh terakhir, walaupun menggunakan transformharta benda untuk memutar helaian kertas yang mendasari. Contoh ini menganggap penggunaan Autoprefixer atau awalan digunakan untuk transformharta di mana sokongan penyemak imbas mungkin berkurang.
Lihat Kesan Penumpukan Kertas Pen - Messy by CSS-Tricks (@ css-tricks) di 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; )