Shadow Effects CSS: Menambahkan Dimensi dengan Bayangan

Apa Itu Shadow dalam CSS?

Shadow atau bayangan adalah efek visual yang memberikan kesan kedalaman pada elemen HTML. Dengan shadow, kita bisa membuat tombol, kartu (card), form, dan elemen lain terlihat lebih hidup dan profesional.

CSS mendukung dua jenis utama shadow:

1. Text Shadow (text-shadow)
2. Box Shadow (box-shadow)

Keduanya memungkinkan kita menambahkan bayangan pada teks maupun elemen blok untuk meningkatkan estetika dan pengalaman pengguna.

---

1. Membuat Bayangan Teks dengan text-shadow

Properti text-shadow digunakan untuk menambahkan efek bayangan pada teks.

Sintaks:

text-shadow: horizontal-offset vertical-offset blur-radius color;

Contoh:

.teks-bayangan {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

Anda juga bisa menambahkan beberapa bayangan sekaligus dengan dipisahkan koma:

.teks-ganda {
    text-shadow: 
        1px 1px 2px red,
        -1px -1px 2px blue;
}

Contoh Penggunaan:

<h1 class="judul">Selamat Datang</h1>

.judul {
    font-size: 2rem;
    text-align: center;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}

Bayangan teks ini sangat berguna untuk teks judul di latar belakang gambar agar tetap mudah dibaca.

---

2. Membuat Bayangan Elemen dengan box-shadow

Properti box-shadow digunakan untuk menambahkan bayangan pada elemen seperti kotak, kartu, tombol, dan lainnya.

Sintaks:

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

Hanya horizontal-offset dan vertical-offset yang wajib, sisanya opsional.

Contoh Dasar:

.kotak {
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
}

Bayangan Internal dengan inset

Gunakan inset untuk membuat bayangan dari dalam elemen.

.box-inset {
    box-shadow: inset 0 0 10px #999;
}

Banyak Bayangan

Anda bisa menambahkan beberapa efek bayangan dalam satu properti:

.box-multi {
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.1),
        4px 4px 8px rgba(255, 0, 0, 0.2);
}

---

3. Mengatur Radius Bayangan (border-radius + box-shadow)

Jika elemen memiliki sudut melengkung menggunakan border-radius, maka bayangan juga akan mengikuti bentuk tersebut.

Contoh:

.card {
    width: 200px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

Dengan kombinasi ini, kita bisa membuat kartu UI yang modern dan rapi.

---

4. Menggunakan Shadow untuk Respons Visual

Shadow sering digunakan untuk efek interaksi seperti hover pada tombol atau card.

Contoh Hover Effect:

HTML

<button class="btn">Klik Saya</button>

CSS

.btn {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
}

.btn:hover {
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
}

Efek ini memberikan respons visual yang halus saat pengguna berinteraksi dengan tombol.

---

5. Kombinasi Shadow dan Border

Anda bisa menggabungkan box-shadow dan border untuk menciptakan efek yang lebih kompleks.

Contoh:

.card {
    border: 1px solid #ddd;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

---

6. Tips Aksesibilitas dan Performa

• Gunakan warna transparan seperti rgba() atau hsla() untuk bayangan agar tidak terlalu kuat.
• Hindari shadow berlebihan karena bisa memperberat rendering halaman.
• Pastikan konten tetap jelas meskipun tanpa efek shadow.
• Gunakan transition untuk animasi bayangan yang halus.

---

Contoh Praktis

HTML

<div class="card">
    <h2>Kartu Informasi</h2>
    <p>Ini adalah contoh elemen dengan efek bayangan.</p>
</div>

CSS

.card {
    max-width: 300px;
    margin: 40px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

Dengan kode ini, kita berhasil membuat kartu sederhana dengan efek bayangan yang menarik dan responsif saat di-hover.

---

Kesimpulan

Shadow effects adalah alat yang sangat bermanfaat dalam desain web modern. Dengan text-shadow dan box-shadow, Anda bisa menambahkan dimensi, kedalaman, dan interaktivitas pada elemen-elemen penting seperti teks, tombol, dan kartu.

Selanjutnya, kita akan membahas Positioning CSS, yaitu cara mengatur posisi elemen secara tepat dan presisi.

---

💡 Tips Praktis

• Gunakan box-shadow untuk efek kartu dan tombol yang modern.
• Gunakan text-shadow untuk judul di atas gambar atau latar belakang terang/gelap.
• Gabungkan box-shadow dengan transition untuk efek hover yang halus.
• Simpan shadow dalam kelas terpisah agar mudah digunakan ulang.