Dalam tutorial kali ini bestariweb Studio akan berbagi tentang cara membuat efek bayangan dengan menggunakan property box-shadow di CSS3.
Format penggunaan property ini adalah sebagai berikut:

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

Variabel Penjelasan
h-shadow Harus di isi. Posisi atau jarak bayangan horisontal. Nilai positif = arah kanan, Nilai negatif = arah kiri
v-shadow Harus di isi. Posisi atau jarak bayangan vertikal. Nilai positif = arah bawah, Nilai negatif = arah atas
blur Boleh diisi atau tidak (Opsional). Jarak blur
spread Opsional. Ukuran bayangan
color Opsional. Warna Bayangan. Bisa Anda isi dengan konstanta warna seperti red atau dengan bilangan heksadesimal 3 digit seperti #F00 atau dengan fungsi rgba seperti rgba(255,0,0,1)
inset Opsional. Jika ditulis berarti inner shadow

Contoh


<div style="box-shadow:3px 3px 4px #000;padding:5px;border:1px solid #000;text-align:center">kotak</div>

Akan menghasilkan :

kotak

Contoh Lain :

<div style="box-shadow:3px 3px 4px #000 inset;padding:5px;border:1px solid #000;text-align:center">kotak</div>

Akan menghasilkan :

kotak

Contoh Lain :

<div style="box-shadow:3px 3px 4px red ;padding:5px;border:1px solid #000;text-align:center">kotak</div>

Akan menghasilkan :

kotak

Contoh Lain :

<div style="box-shadow:2px 2px 3px rgba(0,0,0,0.5) ;padding:5px;border:1px solid #000;text-align:center">kotak</div>

Akan menghasilkan :

kotak
(Visited 37 times, 1 visits today)