Css3 - box Shadow

Css3 - box Shadow

Box Shadow ini adalah properti css3 yang berguna untuk memberikan bayangan kepada Element yang Kita buat

Urutan properti box-shadow

<x-offset><y-offset><blur><color>

X-offset untuk Mengatur bayangan secara horizontal ini nilainya numerik kalau saya kasih 10px maka dia akan bergersk kekanan sebagai 10px ,kalau saya kasih mines(-) maka bayangan nya akan bergersk ke sebelah kirinya.

Y-offset juga untuk Mengatur bayangan secara vertikal jika diberi Nilai mines(-) maka bayangan akan ke atas

Lalu blur untuk membuat seberapa blur bayangan tersebut

Lalu color untuk memilih warna Dari bayangan nya

Contoh penggunaan 

box {

box-shadow:20px 20px 30px black;

}

Kita akan Mempelajari properti yang opsional yaitu spred

<x-offset><y-offset><blur><spred><color>

Spreed untuk menentukan ketebalan Dan besar nya bayangan

Cara pemakaian 

box {

box-shadow:20px 20px 30px 10xp black;

}

Lalu properti yang opsion kedua yaitu inset 

inset digunakan jiga kalau kalian ingin membuat bayangan nya di dalam kotak bukan diluar kotak seperti yang sudah dicoba 

Contoh penggunaan {

box-shadow: inset 20px 30px 10px 40px black;

}

<Inset> <x-offset> <y-offset> <blur> <spred> <color>

Multiple Shadow

Jadi Kita bisa menumpukan bayangan nya Cara nya yaitu dengan menggunakan ,(koma)

Contoh {

box-shadow: inset 20px 20px 20px 20px black, inset -20px -20px -20px -20px skyblue;

}