CSS Box Shadow adalah suatu deklarasi bagaimana menciptakan efek bayangan suatu area sama seperti hal-nya dengan CSS Border Radius, CSS Box Shadow memiliki Properti disetiap Pramban yang dipergunakan dan memiliki fungsi menciptakan efek bayangan keluar dan kedalam dari objek area, yaitu :
- -webkit-box-shadow (Properti Safari dan Chrome)
- -moz-box-shadow (Properti Modzilla Firefox)
- box-shadow (Properti W3C)
-webkit-box-shadow: 7px 7px 5px #cccccc; -moz-box-shadow: 7px 7px 5px #cccccc; box-shadow: 7px 7px 5px #cccccc;Deklarasi Css Box Shadow Inset
-webkit-box-shadow: inset 7px 7px 5px #cccccc; -moz-box-shadow: inset 7px 7px 5px #cccccc; box-shadow: inset 7px 7px 5px #cccccc;
Dalam penulisan nilai deklarasi tidak harus selalu bernilai Positif namun nilai Negatif pun bisa dipergunakan untuk menciptakan efek bayangan kebalikan-nya.
Penerapan Secara Langsung
CSS-nya
#box { -webkit-box-shadow: 7px 7px 5px #cccccc; -moz-box-shadow: 7px 7px 5px #cccccc; box-shadow: 7px 7px 5px #cccccc; }HTML-nya
<div id='box'>.......</div>
Penerapan Secara Tidak Langsung
HTML-nya
<div style='-webkit-box-shadow: 7px 7px 5px #cccccc;-moz-box-shadow: 7px 7px 5px #cccccc;box-shadow: 7px 7px 5px #cccccc;'>.......</div>
Beberapa Contoh Deklarasi CSS Box Shadow serta Penerapan-nya terhadap Objek Area :
| box-shadow: 10px 10px 7px #222; -moz-box-shadow: 10px 10px 7px #222; -webkit-box-shadow: 10px 10px 7px #222; | Efek Shadow-1 |
| box-shadow: inset 10px 10px 7px #222; -moz-box-shadow: inset 10px 10px 7px #222; -webkit-box-shadow: inset 10px 10px 7px #222; | Efek Shadow-2 |
| box-shadow: 10px 5px 7px #222; -moz-box-shadow: 10px 5px 7px #222; -webkit-box-shadow: 10px 5px 7px #222; | Efek Shadow-3 |
| box-shadow: 0px 10px 7px #222; -moz-box-shadow: 0px 10px 7px #222; -webkit-box-shadow: 0px 10px 7px #222; | Efek Shadow-4 |
| box-shadow: 10px 0px 7px #222; -moz-box-shadow: 10px 0px 7px #222; -webkit-box-shadow: 10px 0px 7px #222; | Efek Shadow-5 | box-shadow: 0px 0px 7px #222; -moz-box-shadow: 0px 0px 7px #222; -webkit-box-shadow: 0px 0px 7px #222; | Efek Shadow-6 | box-shadow: 0px 0px 20px #222; -moz-box-shadow: 0px 0px 20px #222; -webkit-box-shadow: 0px 0px 20px #222; | Efek Shadow-7 | box-shadow: 10px 5px 0px #222; -moz-box-shadow: 10px 5px 0px #222; -webkit-box-shadow: 10px 5px 0px #222; | Efek Shadow-8 | box-shadow: -10px -5px 0px #222; -moz-box-shadow: -10px -5px 0px #222; -webkit-box-shadow: -10px -5px 0px #222; | Efek Shadow-9 | box-shadow: inset 10px 5px 7px #222; -moz-box-shadow: inset 10px 5px 7px #222; -webkit-box-shadow: inset 10px 5px 7px #222; | Efek Shadow-10 | box-shadow: inset 0px 10px 7px #222; -moz-box-shadow: inset 0px 10px 7px #222; -webkit-box-shadow: inset 0px 10px 7px #222; | Efek Shadow-11 | box-shadow: inset 10px 0px 7px #222; -moz-box-shadow: inset 10px 0px 7px #222; -webkit-box-shadow: inset 10px 0px 7px #222; | Efek Shadow-12 | box-shadow: inset 0px 0px 7px #222; -moz-box-shadow: inset 0px 0px 7px #222; -webkit-box-shadow: inset 0px 0px 7px #222; | Efek Shadow-13 | box-shadow: inset 0px 0px 20px #222; -moz-box-shadow: inset 0px 0px 20px #222; -webkit-box-shadow: inset 0px 0px 20px #222; | Efek Shadow-14 | box-shadow: inset 10px 5px 0px #222; -moz-box-shadow: inset 10px 5px 0px #222; -webkit-box-shadow: inset 10px 5px 0px #222; | Efek Shadow-15 | box-shadow: inset -10px -5px 0px #222; -moz-box-shadow: inset -10px -5px 0px #222; -webkit-box-shadow: inset -10px -5px 0px #222; | Efek Shadow-16 | box-shadow: 5px 5px 0px red, 10px 10px 0px green, 15px 15px 0px blue, 20px 20px 0px yellow, 20px 20px 3px black; -moz-box-shadow: 5px 5px 0px red, 10px 10px 0px green, 15px 15px 0px blue, 20px 20px 0px yellow, 20px 20px 3px black; -webkit-box-shadow: 5px 5px 0px red, 10px 10px 0px green, 15px 15px 0px blue, 20px 20px 0px yellow, 20px 20px 3px black; | Efek Shadow-17 |
Efek Shadow-1 Kanan Bawah Tebal
Efek Shadow-2 Inside
Efek Shadow-3 Tipis Ke Bawah Tebal Ke Kanan
Efek Shadow-4 Tebal Ke Bawah
Efek Shadow-5 Tebal Ke Sebelah Kanan
Efek Shadow-6 Tipis Merata
Efek Shadow-7 Tebal Merata
Efek Shadow-8 Blok Tipis Ke Bawah Tebal Ke Kanan
Efek Shadow-9 Blok Tipis Ke atas Tebal Ke Kiri
Efek Shadow-10 Kedalam Kiri dan Kiri Atas
Efek Shadow-11 Kedalam Atas
'
Efek Shadow-12 Kedalam Sebelah Kiri
Efek Shadow-13 Kedalam Tipis Merata
Efek Shadow-14 Kedalam Tebal Merata
Efek Shadow-15 Kedalam Sebelah Kiri dan Atas Block
Efek Shadow-16 Kedalam Sebelah Kanan dan Bawah Block
Efek Shadow-17 Bertumpuk (Pelangi)
Semoga bermanfaat untuk mojang dan bujang. Go Blog Go...!!! Amiin
Wassalam,
0 comments:
Post a Comment
Catatan :
1.Untuk menyisipkan Kode, gunakan Tag <i rel="code">Kode Anda Di-Sini...</i>
2.Untuk menyisipkan Kode Panjang, gunakan Tag <i rel="pre">Kode Anda Di-Sini...</i>
3.Untuk menyisipkan Kode Gambar, gunakan Tag <i rel="image">URL Gambar Anda Di-Sini...</i>
4.Untuk menyisipkan Catatan, gunakan Tag <b rel="quote">Catatan Anda Di-Sini...</i>
NB: Sebelum menyisipkan Kode, konversi terlebih dulu Kode-nya agar bisa tampil di Kolom Komentar