Halo, ketemu lagi dengan saya 🙂 , apa kabar nya ? semoga baik yah, amin.
Pada kesempatan kali ini saya akan berbagi tutorial mengenai Cara Membuat Efek Tumpukan kertas Dengan HTML-CSS3, nah bagi kalian yang belum tau cara membuat nya, yuk simak langkah-langkah nya berikut ini.
Pertama silahkan buka teks editor nya terlebih dahulu, kemudian coba ketikan struktur HTML berikut.
<div class="kertas"> <p><strong>Demo: Tumpukan Kertas</strong></p> </div>
Nah untuk membuat efek kertas nya coba ketika kode CSS3 berikut ini.
body{background:#555;}
.kertas {
background-color:#FFF;
height:280px;
width:200px;
padding:20px;
margin:20px auto;
-webkit-box-shadow:
1px 1px 0 rgba(0,0,0,0.100),
3px 3px 0 rgba(255,255,255,1.0),
4px 4px 0 rgba(0,0,0,0.125),
6px 6px 0 rgba(255,255,255,1.0),
7px 7px 0 rgba(0,0,0,0.150),
9px 9px 0 rgba(255,255,255,1.0),
10px 10px 0 rgba(0,0,0,0.175);
box-shadow:
1px 1px 0 rgba(0,0,0,0.100),
3px 3px 0 rgba(255,255,255,1.0),
4px 4px 0 rgba(0,0,0,0.125),
6px 6px 0 rgba(255,255,255,1.0),
7px 7px 0 rgba(0,0,0,0.150),
9px 9px 0 rgba(255,255,255,1.0),
10px 10px 0 rgba(0,0,0,0.175);
}
Kalo sudah, jangan lupa disimpan kemudian jalankan di browser masing-masing dan lihat hasilnya.
Cukup mudah yah ? silahkan kalian modofikasi lagi sesuai keinginan. Sekian tutorial mengenai Cara Membuat Efek Tumpukan kertas Dengan HTML-CSS3, semoga bermanfaat, amin.
Selamat mencoba.