CSS3 : Efek Bayangan Box dengan property box-shadow

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
About the Author
T. Prihartanto
Saya Tanto Prihartanto, Pemilik Bestariweb Hosting yang sudah mulai menjalankan bisnis hosting sejak tahun 2012. Saya juga aktif berbagi artikel di beberapa blog seperti Tutorial Linux, Tutorial Wordpress, Tutorial Web Design. Semoga artikel dan tutorial yang saya tulis di web ini dan blog saya yang lain bisa bermanfaat bagi Anda.

Leave a Reply