box-shadow
Properti CSS box-shadow digunakan untuk memberikan satu atau lebih drop shadow ke suatu elemen.
Secara praktis, elemen apa pun bisa mendapatkan drop shadow menggunakan properti ini.
Setiap bayangan didefinisikan oleh satu hingga lima komponen: nilai offset horizontal, nilai offset vertikal, pilihan radius blur, pilihan radius penyebaran, dan pilihan warna.
box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color];
Drop shadow dapat diimbangi ke kiri atau kanan, dan ke atas atau bawah elemen, sehingga memungkinkan untuk memalsukan keberadaan “sumber cahaya” pada halaman di posisi yang berbeda.
Drop shadow juga dapat dibuat di dalam elemen (bayangan dalam) menciptakan ilusi kedalaman di dalam elemen.
Caranya dengan menambahkan kata kunci inset dalam deklarasi.
box-shadow: inset [horizontal offset] [vertical offset] [blur radius] [spread radius] [color];
Jika elemen memiliki sudut bulat, maka bentuk bayangan dibulatkan dengan cara yang sama. Border image tidak memengaruhi bentuk bayangan kotak.
Ketika beberapa box shadow diterapkan ke elemen, mereka dinyatakan sebagai daftar bayangan yang dipisahkan koma.
Urutan yang digunakan untuk menampilkan banyak bayangan sama dengan urutan bayangan yang dibuat di belakang teks
menggunakan properti text-shadow.
Bayangan diterapkan dari depan ke belakang: bayangan pertama ada di atas dan yang lainnya diletakkan di belakang.
Bayangan tidak memengaruhi tata letak dan mungkin tumpang tindih dengan kotak lain atau bayangannya.
CSS Syntax
box-shadow: none | h-offset v-offset blur spread color | inset | initial | inherit;
Javascript Syntax
object.style.boxShadow="10px 20px 30px blue"
default
box-shadow: none;
box-shadow: 2px 6px;
Kamu membutuhkan setidaknya dua nilai:
- yang pertama adalah offset horizontal
- yang kedua adalah offset vertikal
Warna bayangan akan diwarisi dari warna teks.
box-shadow: 2px 6px red;
Kamu dapat mendefinisikan warna sebagai nilai terakhir.
Seperti dalam warna, kamu bisa menggunakan nama warna, hexadecimal,
rgb, hsl…
box-shadow: 2px 4px 10px red;
Nilai ketiga opsional mendefinisikan blur bayangan.
Warna akan tersebar di 10px dalam contoh ini, dari buram ke transparan.
box-shadow: 2px 4px 10px 4px red;
Nilai keempat opsional menetapkan spread bayangan.
Spread menentukan seberapa banyak bayangan harus tumbuh: itu meningkatkan bayangan.
See the Pen Contoh #1 box-shadow by Codingku (@codingku) on CodePen.