Membuat Efek Bayangan di CSS3

Dengan CSS3, anda dapat membuat efek lengkung pada setiap sudut border, menambahkan bayangan, dan menggunakan gambar sebagai border.

Untuk membuat efek lengkung pada setiap sudut border, silahkan lihat di artikel Efek Lengkung Untuk Border Dengan CSS3.

Bagaimana cara membuat kotak seperti di sebelah kiri tersebut, di sana nampak terlihat ada efek bayangan, efek bayangan itu berwarna silver.

Efek bayangan itu dinamakan SHADOW.

Dengan CSS3 kita dimungkinkan membuat efek bayangan seperti itu. Properti CSS3 yang digunakan membuat efek shadow adalah box-shadow.

Bentuk penulisan:

box-shadow: h-shadow v-shadow blur spread color inset;

Dua nilai yang harus ada dari box-shadow di atas adalah h-shadow dan v-shadow, sisanya opsional. h-shadow digunakan untuk menetapkan posisi horizontal shadow, dan v-shadow digunakan untuk menetapkan posisi vertical shadow.

Contoh berikut menambahkan box-shadow untuk elemen ber-ID 'myDIV':

#myDIV { background-color: yellow; width: 200px; height: 100px; box-shadow: 10px 10px 5px #888888; }

Dimana elemen ber-ID 'myDIV' yang diatur oleh box-shadow mungkin seperti berikut:

<DIV ID="myDIV"></DIV>

Nantinya JavaScript dimungkinkan juga memanipulasinya, bentuk:

Obj.style.boxShadow = "h-shadow v-shadow blur spread color inset";

Umumnya penulisan di atas ditempatkan di dalam fungsi dan fungsi ditempatkan di bagian HEAD, contoh fungsinya:

function oFunc() { var oObject = document.getElementById("myDIV"); oObject.style.boxShadow = "10px 10px 5px #ff0000"; }

Untuk memanggil fungsi bisa dari manapun yang di mau, misalnya akan di panggil ketika suatu tombol di klik:

<BUTTON ONCLICK="oFunc()">Klik</BUTTON>

Tambahan: Jangan lupa menambahkan prefix -moz- untuk Firefox 3.6 dan versi sebelumnya dan prefix -webkit- untuk Chrome dan Safari versi lama.