CSS3 : Efek Bayangan Box dengan property box-shadow

Free Prestashop Theme – Fortunelucky
November 10, 2013
Menambahkan meta keyword di halaman HOME OpenCart
December 10, 2013

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

Leave a Reply

Your email address will not be published. Required fields are marked *