Membuat background efek kertas bertumpuk menggunakan css

Ifan Irfansyah 0 min read
Assalamu'alaikum

Kali ini saya akan mencoba share cara membuat background efek kertas bertumpuk menggunakan css. Mungkin diantara sobat merasa ini hanyalah trik jadul, karena memanfaatkan CSS2 dan CSS3.

Namun mungkin ada juga yang belum tahu, atau malah baru melihatnya? Nah, bagi yang belum tahu, bagaimanakan contoh background efek bertumpuk?
Inilah gambarannya.

kertas bertumpuk

Bagaimana? kerenkan kalau di pasang di blog kita.

Mungkin sobat juga mau membaca Cara membuat sudut melengkung / rounded corner dengan css

Ini kode Css yang digunakan untuk membuat background efek bertumpuk

#content {
background : #d6d5d5;
width : 90%;
margin : 0px auto 40px;
position : relative;
padding-top : 20px;
}

#content:before,#content:after {
content : "";
position : absolute;
top : 6px;
left : 6px;
width : 100%;
height : 100%;
background : #989898;
z-index : -1
}

#content:before {
top : 12px;
left : 12px;
background : #6c6666
}

Teks yang berwarna biru silahkan di ubah menjadi nama selector yang akan kita beri efek background bertumpuk.
Valuenya juga bisa disesuaikan sendiri.

Ternyata sangat mudah sekali kan sobat?
Silahkan dikreasikan lagi agar lebih menarik.

3 komentar