Box Shadow adalah property CSS yang memungkinkan untuk menambahkan bayangan pada sebuah elemen HTML, seperti kotak atau teks. Property ini dapat digunakan untuk memberikan efek visual yang menarik pada desain website kalian.
Box shadow CSS memiliki beberapa nilai yang dapat diatur, termasuk warna bayangan, ukuran, jarak dari elemen, dan jenis bayangan. Dengan mengatur nilai-nilai ini, Anda dapat menciptakan efek bayangan yang bervariasi, seperti bayangan yang halus dan tipis atau bayangan yang tebal dan kasar.
.box {
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
Kode diatas akan memberikan bayangan dengan ukuran 2px di sebelah kanan dan bawah elemen, jarak bayangan 5px dari elemen, dan warna bayangan hitam transparan dengan opasitas sebesar 0,3
1. Single box shadow: Bayangan tunggal pada elemen dengan nilai horizontal offset, vertical offset, blur radius, dan warna bayangan yang didefinisikan.
.box {
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
2. Multiple box shadow: Beberapa bayangan pada elemen dengan menambahkan nilai offset, blur radius, dan warna bayangan menggunakan koma.
.box {
box-shadow: 2px 2px 5px rgba(0,0,0,0.3), -2px -2px 5px rgba(255,255,255,0.3);
}
3. Inner box shadow: Bayangan pada dalam elemen,bukan di sekitar elemen.
.box {
box-shadow: inset 2px 2px 5px rgba(0,0,0,0.3);
}
4. Outset box shadow: Bayangan yang ditempatkan di sekitar elemen.
.box {
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
5. Text Shadow: Bayangan pada teks di dalam elemen.
.text {
text-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
6. Multiple text shadow: Beberapa bayangan pada teks dengan menambahkan nilai offset, blur radius, dan warna bayangan menggunakan koma.
.text {
text-shadow: 2px 2px 5px rgba(0,0,0,0.3), -2px -2px 5px rgba(255,255,255,0.3);
}
Dengan memahami jenis-jenis box shadow di CSS, Anda dapat memilih dan mengatur jenis bayangan yang sesuai untuk mengatakan tampilan desain website kalian.
Anda dapat menggunakan box shadow CCS ketika ingin memberikan efek visual pada elemen HTML kalian. Box shadow dapat memberikan tampilan yang lebih menarik dan profesional pada desain website kalian: Beberapa alasan mengapa kalian mungkin ingin menggunakan box shadow CSS:
Namun, penting untuk diingat bahwa menggunakan box shadow CCS harus dibuat dengan hati-hati dan tidak berlebihan. Terlalu banyak bayangan atau bayangan yang tidak diatur dengan baik dapat menggangu tampilan desain website Anda. Selain itu, pastikan bahwa box shadow CSS kalian konsisten dengan gaya desain keseluruan pada halaman web kalian.
Box shadow dapat terlihat jelek atau menggunakan tampilan desain website ketika digunakan dengan tidak benar atau berlebihan. Berikut adalah beberapa hal yang dapat membaut box shadow menjadi terlihat jelek:
Oleh karna itu, penting untuk menggunakan box shadow dengan hati-hati dan memperhatikan detail seperti ukuran, jarak, dan warna bayangan. Pastikan bahwa box shadow yang kalian