[Tutorial] CSS3 Box Shadow untuk Tampilkan Efek Bayangan Object

[caption id="" align="alignleft" width="150" caption=" "][/caption]

CSS3 merupakan versi terbaru dari CSS (Cascading Style Sheet), yaitu salah satu bahasa kode dalam dokumen halaman web (web page) di situs/blog untuk mengatur tampilan visualnya agar halaman web tersebut terlihat lebih cantik (waduh bahasanya :mrgreen:).

Salah satu property atau elemen pengaturan baru pada CSS versi 3 ini yang (menurut saya) paling keren adalah property box-shadow, yang gunanya adalah untuk memberikan efek bayangan pada sebuah elemen tag HTML. Dengan property ini, kita bisa memberi efek bayangan tanpa perlu menggunakan bantuan image atau gambar, sehingga bisa mempercepat loading halaman.

Bagaimana bentuk kode dan pengunaannya? Yuk mareee....

*

Box Shadow Property Syntax

---

Sebenarnya CSS3 belum menjadi standar baku kode styling elemen HTML, baru berupa draft saja di W3C (lembaga internasional yang salah satunya mengatur standarisasi bahasa kode dokumen web). Walau pun begitu, browser modern yang mendukung teknologi open web yang ada sekarang sudah mengadopsi teknologi ini, seperti browser Mozilla Firefox (versi 3.5+), Google Chrome, Safari (4+), Opera (10.5). Kalo IE (Internet Explorer)? Wah nggak bisa jawab deh, suka pengen beda sendiri sih bahasanya browser yang satu ini :lol:

Box-shadow di CSS3 ini pun belum ada standar bakunya. Tapi bisa dipakai kode syntax berikut ini yang sama-sama dipakai oleh sebagian besar browser, yaitu sesuai urutan:

*

(property-name): (offset-x) (offset-y) (blur-radius) (color);

*

Keterangan:

• (property-name) (wajib)
  Nama untuk property box-shadow, standarnya adalah: box-shadow. Tapi berhubung setiap aplikasi browser berbeda penamaannya, kita perlu menambahkan kode style box-shadow ini dengan property yang sesuai untuk tiap browser. Maka tambahkan juga atribut box shadow dengan nama property lain, lengkapnya:
  box-shadow
-webkit-box-shadow (untuk browser Safari),
  -moz-box-shadow (Firefox), serta
  -ms-filter (IE 8+) dan
  filter (IE 6 & 7).


• (offset-x) (wajib)
  Jarak pergeseran horizontal efek bayangan terhadap object utama, bisa bernilai positif (ke arah kanan) atau negatif (ke kiri).


• (offset-y) (wajib)
  Jarak vertikal bayangan, bisa positif (ke bawah) atau negatif (ke atas).


• (blur-radius) (opsional)
  Jarak efek blur bayangan. Bila dimasukkan nilai nol (0) atau tidak ditentukan/dihilangkan maka tidak ada efek blur pada bayangan, hanya berupa bayangan solid.


• (color) (opsional)
  Warna bayangan. Bila tidak ditentukan berarti warna bayangan terserah aplikasi browser.

Tambahan:

• inset (opsional)
  Ini untuk menampilkan bayangan di dalam elemen, seperti Layer Style Inner Shadow kalau di program Adobe Photoshop. Penempatan kodenya di bagian depan setelah nama property.


• (spread-radius) (opsional)
  Menyetel ukuran bayangan, bisa lebih besar dari elemen utama (bila nilainya positif) atau lebih kecil (negatif). Penempatan kodenya di bagian belakang sebelum color.


• Bila semua atribut dipakai, maka urutan syntax lengkapnya seperti ini:
  (property-name): inset (offset-x) (offset-y) (blur-radius) (spread-radius) (color);

Catatan:

Penggunaan kode efek bayangan pada browser Internet Explorer (IE) urutan/formatnya berbeda, tidak dengan urut-urutan (property): (horizontal) (vertical) (blur) (color); seperti di atas. Dan juga tidak bisa ada efek blur.

Untuk lebih jelasnya silahkan lihat pada live demo di bawah ini.

*

Live Demo

---

Kotak kuning ini dan kotak putih di bawah adalah contoh elemen tag <div> dan <pre> dengan efek bayangan menggunakan CSS3 box-shadow property, dengan value:
bayangan di luar: horizontal 2px, vertical 5px, blur 15px, color #999999
bayangan di dalam: inset horizontal 2px, vertical 5px, blur 15px, color #bbbbbb

Kode lengkapnya adalah:

<style type="text/css">
.berbayang-luar {
 box-shadow: 2px 5px 15px #999999;
 -webkit-box-shadow: 2px 5px 15px #999999;
 -moz-box-shadow: 2px 5px 15px #999999;
 -ms-filter: "progid:DXImageTransform.Microsoft.dropShadow(color=#999999, offX=2, offY=5, positive=true)";
 filter: progid:DXImageTransform.Microsoft.dropShadow(color=#999999, offX=2, offY=5, positive=true);
}
.berbayang-dalam {
 box-shadow: inset 2px 5px 13px #bbbbbb;
 -webkit-box-shadow: inset 2px 5px 13px #bbbbbb;
 -moz-box-shadow: inset 2px 5px 13px #bbbbbb;
</style>

<div class="berbayang-luar">Bla bla bla...</div>
<pre class="berbayang-dalam">Bla bla bla...</pre>

*

Gimana, keren kan? Lebih bagus lagi kalau pada sudut bordernya dikasih efek border-radius. Tapi nanti deh pembahasannya menyusul :D. Salah satu contoh halaman web yang menampilkan efek box-shadow adalah halaman login WordPress.com.

*

Terbayang-bayang :lol:

.