HTML CSS Indonesia Web Desain

CSS3 : Efek Bayangan Box dengan property box-shadow

CSS3 : Efek Bayangan Box dengan property box-shadow November 13, 2013Leave a comment

HUMAYRAA merupakan salah satu bagian dari web Bestariweb Studio. HUMAYRAA.COM kami khususkan untuk berbagi pengalaman dan tutorial kepada seluruh pembaca yang berminat menggeluti dunia IT dan desain. Kunjungi pula web kami yang lainnya: Bestariweb Studio | BestariwebHost

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

HUMAYRAA merupakan salah satu bagian dari web Bestariweb Studio. HUMAYRAA.COM kami khususkan untuk berbagi pengalaman dan tutorial kepada seluruh pembaca yang berminat menggeluti dunia IT dan desain. Kunjungi pula web kami yang lainnya: Bestariweb Studio | BestariwebHost

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *