Apa sih Box Shadow itu

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.

Berikut ini adalah contoh penggunaan Box Shadow

.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

Jenis – jenis Box Shadow didalam CSS

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.

Kapan kita harus menggunakan Box Shadow dalam CSS

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:

• Menekankan elemen penting: Bayangan dapat membantu menyoroti elemen penting pada halaman web, seperti tombol aksi atau elemen navigasi.
• Memberikan dimensi pada elemen: Dengan memberikan bayangan pada elemen, Anda dapat memberikan dimensi visual dan membuatnya lebih menonjol.
• Memberikan efek kedalaman: Bayangan dapat memberikan efek kedalaman pada elemen dan membuat desain website terlihat lebih kompleks.
• Meningkatkan kesan profesional: Bayangan dapat membuat desain website terlihat lebih profesional dan modern.

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.

Kapan kita tidak harus menggunakan Box Shadow didalam CSS

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:

• Terlalu banyak bayangan: terlalu banyak bayangan pada elemen dapat membuat desain website terlihat berantakan dan sulit untuk dibaca
• Warna bayangan yang tidak sesuai: warna bayangan yang tidak cocok dengan warna latar belakang atau elemen lain pada halaman web dapat membuat desain website terlihat tidak seimbang.
• Ukuran bayangan yang tidak sesuai: bayangan yang terlalu besar atau kecil dapat membuat elemen tidak proposional.
• Jarak bayangan yang salah: jarak antara elemen dan bayangan yang salah dapat membaut desain website terlihat tidak seimbang atau tidak teratur.
• Tidak konsisten dengan gaya desain keseluruhan: box shadow yang tidak konsisten dengan gaya desain keseluruhan pada halaman web dapat membuat desain website terlihat tidak proporsional.

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