Cara Membuat Efek Bayangan (Box Shadow) - Pada kesempatan kali ini saya akan share sebuah tutorial tentang cara membuat efek bayangan (box shadow) menggunakan CSS, tepatnya dengan CSS3. Sebenarnya CSS itu kaya akan keunikan dan keindahan jika kita pelajarai lebih dalam dan lebih detail lagi. Semakin dalam kita belajar CSS, akan semakin besar rasa ingin tahu kita tentang apa saja yang bisa di lakukan oleh CSS ini.
Efek bayangan (box shadow) ini memang sangat menarik dan pastinya memiliki daya pikat tersendiri bagi mata. Oke, langsung saja bagi anda yang ingin mencoba untuk membuat efek bayangan (box shadow) ini silahkan bisa anda simak dan perhatikan tutorial cara membuat efek bayangan (box shadow) berikut ini!
Syntax dasar untuk membuat efek bayangan (box shadow) dengan CSS3 :
1
| box-shadow: x-point y-point blur spread color inset; |
Keterangan :
1. x-point merupakan bayangan yang mengarah pada offset horizontal (horizontal shadow). Jika bernilai negatif, maka bayangan yang di hasilkan akan mengarah ke samping kiri dan sebaliknya, jika bernilai positif maka akan mengarah ke samping kanan.
2. y-point merupakan bayangan yang mengarah pada offset vertical (vertical shadow). Jika bernilai negatif, maka bayangan yang di hasilkan akan mengarah ke atas dan sebaliknya, jika bernilai positif maka akan mengarah ke bawah.
3. blur untuk mengatur jarak blur dari bayangan (menetukan besar kecilnya efek blur pada bayangan).
4. spread merupakan ukuran dari bayangan itu sendiri.
5. color untuk menetukan warna bayangan yang akan di hasilkan.
6. inset untuk menaruh bayangan di dalam box dan bersifat optional, artinya boleh ada dan boleh tidak.
Perhatikan gambar di bawah ini!
Dan berikut adalah script CSS untuk membuat efek bayangan (box shadow) seperti gambar di atas, mulai dari yang A-F.
Kotak A (tanpa menggunakan efek blur) :
1
2
3
4
5
| #kotak_A{-moz-box-shadow: -5px -5px #888;-webkit-box-shadow: -5px -5px #888;box-shadow: -5px -5px #888;} |
Kotak B (ada tambahan efek blur sebesar 5px) :
1
2
3
4
5
| #kotak_B{-moz-box-shadow: -5px -5px 5px #888;-webkit-box-shadow: -5px -5px 5px #888;box-shadow: -5px -5px 5px #888;} |
Kotak C (ada tambahan spread sebesar 5px) :
1
2
3
4
5
| #kotak_C{-moz-box-shadow: -5px -5px 0 5px #888;-webkit-box-shadow: -5px -5px 0 5px#888;box-shadow: -5px -5px 0 5px #888;} |
Kotak D (ada tambahan efek blur dan spread sebesar 5px) :
1
2
3
4
5
| #kotak_D{-moz-box-shadow: -5px -5px 5px 5px #888;-webkit-box-shadow: -5px -5px 5px 5px#888;box-shadow: -5px -5px 5px 5px #888;} |
Kotak E (tanpa x-point dan y-point dengan efek blur sebesar 5px) :
1
2
3
4
5
| #kotak_E{-moz-box-shadow: 0 0 5px #888;-webkit-box-shadow: 0 0 5px#888;box-shadow: 0 0 5px #888;} |
Kotak F (sama dengan kotak E dengan tambahan spread sebesar 5px) :
1
2
3
4
5
| #kotak_F {-moz-box-shadow: 0 0 5px 5px #888;-webkit-box-shadow: 0 0 5px 5px #888;box-shadow: 0 0 5px 5px #888;} |
