Membuat Efek Tumpukan Kertas Dengan CSS3 mempunyai banyak kegunaan, tidak salah untuk dipelajari karena teknik ini cukup terpakai di dunia web desain, contoh beberapa bulan yang lalu saya pernah mendapatkan project untuk membuat website untuk sebuah kontes menulis artikel singkat, dan yang meminta ingin layout nya itu seperti kertas, bagaimana pun designer harus mencari akal agar sebisa mungkin mirip kertas, ada banyak cara, tapi yang sederhana ini menjadi pilihan mereka karena dianggap lebih simpel dan enak untuk membaca.
Waktu itu project tersebut saya buat juga dengan trik Membatasi Input Text Dengan Jquery agar artikel hanya bisa ditulis sebanyak 500 karakter saja, dari situ banyak hal yang bisa dipelajari dan bisa ditulis dalam beberapa trik. Salah satunya tampilan efek kerta dengan css3 ini.
Struktur HTML
Oke kita langsung saja mulai dengan struktur HTML yang diperlukan, buat sebuah file HTML dan beri nama efek-kertas.html.
Buat struktur html seperti biasanya, dan di body kita cukup membuat sebuah div
dengan class
kertas.
CSS
Untuk mempercantik kita menggunakan CSS, disini yang perlu dipelajari adalah CSS Box Shadow karena untuk membuat efek tumpukan itu sebenarnya menggunakan beberapa kali efek shadow dengan jarak yang berbeda-beda, disini kita buat demo bayangan nya semakin jauh, dan jauh lagi, sehingga terbentuk seperti kertas yang bertumpuk.
format penulisan box shadow css itu seperti berikut ini
box-shadow: 1px 2px 3px 4px #555;
1px = Horizontal Offset
2px = Vertical Offset
3px = Blur Radius (optional)
4px = Spread Radius (optional)
#555 = Color
Dan berikut ini adalah kode css selengkapnya dari demo yang kita buat.
Terlihat disitu nilai 1 sampai dengan 10 pada bagian horizontal dan vertical, dan warna hitam hitam dan putih yang tertulis di rgba(0,0,0,..)
dan rgba(255,255,255,..)
disitu menggunakan rgba
agar bisa ditentukan ketebalan warnanya, atau bisa kita bilang opacity warnanya.
Untuk lebar dan panjang nya bisa ditentukan sendiri sesuai kebutuhan kamu.
Support Browser
Efek ini bisa dijalankan disemua browser terbaru, tapi tidak berfungsi di Opera Mini.
Hasil
Berikut hasil yang telah dibuat
Demo | Download Code
Sekian
Sekian tutorial kali ini, semoga bermanfaat untuk anda semua,
Salam web design indonesia.
Image by: rmkoske
ijin share atas infonya gan
senggol