Box Shadow

Properti box-shadow dalam CSS memungkinkan Anda untuk menambahkan bayangan ke elemen HTML. Ini memberikan dimensi dan kedalaman visual kepada elemen, memberikan kesan bahwa elemen tersebut melayang di atas latar belakang. Berikut adalah sintaks umum untuk menggunakan box-shadow:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color];

• Horizontal Offset: Menentukan pergeseran bayangan secara horizontal.

• Vertical Offset: Menentukan pergeseran bayangan secara vertikal.

• Blur Radius: Menentukan seberapa kabur bayangan akan terlihat. Semakin besar nilai, semakin kabur bayangan.

• Spread Radius: Menentukan seberapa jauh bayangan akan "menyebar". Nilai positif akan membuat bayangan lebih besar, sementara nilai negatif akan membuatnya lebih kecil.

• Color: Menentukan warna bayangan.

Contoh penggunaan box-shadow:

box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);

Penjelasan:

• Bayangan akan bergeser 5 piksel ke kanan dan 5 piksel ke bawah.

• Bayangan akan memiliki blur radius sebesar 10 piksel.

• Tidak ada spread radius yang ditentukan.

• Warna bayangan adalah hitam dengan opasitas 50%.

Dengan properti box-shadow, Anda dapat menambahkan dimensi visual yang menarik dan menarik perhatian pada elemen HTML Anda, meningkatkan tampilan keseluruhan halaman web Anda.