Pemrograman

Bahasa

Framework

Peralatan

Info

Properti box-shadow dan text-shadow di CSS3

– 01 November 2015
Kedua properti ini, sama-sama berfungsi untuk membuat bayangan. Namun, bayangan yang dihasilkan berbeda. Properti box-shadow digunakan untuk membuat bayangan untuk kotak atau elemen. Sementara itu, properti text-shadow digunakan untuk membuat bayangan text.
ilustrasi box-shadow dan text-shadow
Nilai dari kedua properti ini juga sama. Formatnya x y z warna, contohnya
box-shadow: 10px 2px 4px black;
Nilai x adalah 10px, artinya panjang bayangan ke arah x (horizontal) adalah 10px. Sedangkan nilai y adalah 2px. Arah bayangan y merukan arah vertikal. Sementara itu, z digunakan sebagai nilai pudar (blur). Arah z biasanya menentukan jarak cahaya ke elemen. Semakin besar nilai z, maka semakin pudar bayangan yang dihasilkan. Bila z bernilai 0 (nol), maka bayangan akan terlihat jelas.
Warna bayangan dapat kita isi dengan nama warna, kode heksa, fungsi rgb(), dan rgba(). Contoh:
/* dengan nama warna */
box-shadow: 3px 3px 2px grey;

/* dengan kode heksa */
box-shadow: 3px 3px 2px #fff;

/* dengan fungsi rgb() */
box-shadow: 3px 3px 2px rgb(0,0,21);

/* dengan fungsi rgba() */
box-shadow: 3px 3px 2px rgba(0,0,0,0.5);
Bayangan normal arahnya menuju ke x (kanan) dan ke y (bawah), karena diumpamakan cahaya berada di atas. Nah, bila ingin arah bayangannya menuju ke atas atau arah sebaliknya dari bayangan normal, berikan nilai negatif pada x dan y. Contoh:
text-shadow: -4px -3px 2px rgba(0,0,0,0.8);
hasilnya:
Bayangan ke atas!
Bayangan normal juga letaknya di luar elemen. Namun, bila kita ingin meletakkan bayangan ke dalam elemen, maka kita hanya perlu menambahkan kata inset. Contoh:
box-shadow: 0px 0px 10px rgba(0,0,0,0.8) inset;
Hasilnya:

Bayangan ke dalam elemen!

Cukup sekian pembahasan tentang properti box-shadow dan text-shadow ini. Saya harap anda dapat memahami dan semoga bermanfaat.