Teknik desain yang populer adalah membuat wadah konten yang terlihat seperti selembar kertas dan menumpuk lembaran kertas lain di bawahnya, menambahkan gaya berlapis atau tiga dimensi. Kita dapat membuat efek ini menggunakan CSS lurus, tetapi ada beberapa jenis desain kertas bertumpuk yang dapat kita pertimbangkan. Kami akan memberikan cuplikan khusus untuk empat.
Tumpukan Kertas Vertikal di Bagian Bawah
Idenya di sini adalah bahwa wadah konten kami adalah lembar atas kertas dan lebih banyak lembar ditumpuk di bawahnya dengan tepinya ditampilkan di bagian bawah lembar atas.
Lihat Efek Kertas Bertumpuk Pena - Vertikal oleh CSS-Trik (@ css-trick) 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 Vertikal di Atas
Ini adalah konsep yang sama dengan yang terakhir, tetapi dengan tumpukan kertas yang terlihat di atas wadah, bukan di bagian bawah. Satu-satunya perbedaan di sini adalah kita telah memposisikan ulang box-shadowproperti pada .paperelemen menggunakan bilangan negatif.
Lihat Efek Kertas Bertumpuk Pena - Puncak Vertikal oleh Trik CSS (@ css-trick) 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 metode yang sedikit berbeda, di mana kami menggunakan elemen ::beforedan ::afterpseudo untuk membuat lembaran kertas tambahan, daripada box-shadowteknik yang digunakan dalam contoh sebelumnya.
Lihat Efek Kertas Bertumpuk Pena - Diagonal oleh CSS-Tricks (@ css-trick) 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 membuat lembaran kertas terhuyung-huyung untuk membuat tampilan yang sengaja berantakan menggunakan jenis teknik yang sama dengan elemen semu seperti contoh terakhir, meskipun menggunakan transformproperti untuk memutar lembaran kertas yang mendasarinya. Contoh ini mengasumsikan penggunaan Autoprefixer atau prefiks digunakan untuk transformproperti di mana dukungan browser mungkin berkurang.
Lihat Efek Kertas Bertumpuk Pena - Berantakan oleh CSS-Trik (@ css-trick) 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; )