Properti Bayangan (Shadow Property) di CSS3

HTML5 memang sedang populer, tapi untuk style CSS3 tak kalah populer. CSS3 merupakan versi Cascading Style Sheet terbaru yang bisa digunakan untuk mempercantik tampilan website. Bagi yang belum mengenal CSS, referensinya bisa Anda temukan di wikipedia atau situsnya W3C.

Ada banyak property, selector, dan pseudo-class baru di CSS3, tapi kali ini kita akan coba bermain dengan shadow-property, yaitu efek yang akan memberi bayangan pada objek yang diberi properti bayangan ini.

Text Shadow

Sintak dasarnya adalah seperti ini:

text-shadow:   * *

• 
  yang bertanda * adalah opsional, dapat dipakai atau tidak dipakai.
• 
  offsetx adalah jarak horizontal (mendatar) bayangan terhadap teks. Nilai negatif (-) akan membuat bayangan berada disebelah kiri teks.
• 
  offsety adalah jarak vertikal (menurun) bayangan terhadap teks. Nilai negatif (-) akan membuat bayangan berada di atas teks.
• 
  blur-radius adalah ketajaman dari efek blur.
• 
  color adalah warna dari bayangan yang dihasilkan.

Dari sintak di atas, mari kita mulai coba bermain dengan beberapa contoh berikut:

Contoh berikut akan memberikan efek bayangan yang tajam (blur 0).

text-shadow: 5px 5px 0 #959595;

UT2A MOG MOG

Contoh berikut akan memberikan efek bayangan yang halus (blur 7).

text-shadow: 5px 5px 7px #959595;

UT2A MOG MOG

Contoh berikut akan memberikan efek bayangan 3D.

text-shadow: 1px 1px black, 2px 2px #149c14, 3px 3px #149c14, 4px 4px #149c14, 5px 5px #149c14, 6px 6px #149c14, 7px 7px #149c14, 8px 8px #149c14;

UT2A MOG MOG

Yang ini akan memberikan efek yang menyala.

background:black;
text-shadow: 0 0 5px #FFFFA0, 0 0 10px #FFFF4D, 0 0 15px #FFFF41, 0 0 20px #FFFF2A, 0 0 25px #FFFF2B, 0 0 30px #FEFE00, 0 0 35px #F7F700;

UT2A MOG MOG

Sekarang Anda tahu, menu yang kami pakai dalam website ini merupakan modifikasi dari contoh di atas.

Box Shadow

Box-shadow intinya sama dengan text-shadow, cuma dia di terapkan pada objek selain teks, bisa pada kotak atau gambar. Sintaknya pun sama, cuma untuk text-shadow diganti dengan box-shadow:

box-shadow:   * *

Berikut contoh pada objek kotak.

width:300px; height:50px; padding:5px; background:navy; border: 1px solid black;
box-shadow: 7px 7px 8px #818181;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);

UT2A MOG MOG

 

Kok di baris terakhir ada tambahan filter? Itu dipakai untuk browser Internet Explorer, karena Internet Explorer punya metode sendiri untuk dapat membaca bayangan.