box-shadow

Beri kedalaman pada kartu, tombol, dan fokus input.

Pahami konsepnya

box-shadow menggambar bayangan di luar (atau di dalam) kotak elemen dengan empat nilai inti: geser-x, geser-y, blur, dan warna — box-shadow: 0 4px 12px rgba(0,0,0,0.15). Geser nol dengan blur besar menghasilkan "mengambang" lembut ala kartu modern; geser tajam tanpa blur memberi kesan retro flat dengan tepi tegas (2px 2px 0 #000).

Kata kunci inset membalik bayangan ke dalam membentuk cekungan — cocok untuk input yang tertekan dan track scrollbar. Bayangan juga bisa ditumpuk koma: kombinasi satu bayangan tipis dekat plus satu lebar jauh menghasilkan kedalaman realistis yang sulit dicapai satu lapis.

Kebiasaan praktis: pakai warna rgba alih-alih hitam pekat (bayangan di dunia nyata jarang benar-benar hitam), satukan arah cahaya untuk semua elemen — konsistensi lebih penting daripada keindahan satu kartu — dan pasangkan transisi pada hover (box-shadow termasuk properti yang paling enak dianimasikan untuk efek "mengangkat").

Coba contoh kode

.kartu {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),    /* lapis dekat tajam */
    0 8px 24px rgba(0, 0, 0, 0.12);   /* lapis jauh lembut */
}

.kartu:hover {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.08),
    0 14px 32px rgba(0, 0, 0, 0.16);
}

.input-cekung {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

Dua lapis bayangan kartu bekerja seperti cahaya sungguhan: satu garis kontak tipis di dasar plus kabut lebar di belakangnya. Saat hover, keduanya diperbesar sedikit — kartu seolah terangkat. Versi inset memberi kesan tertekan pada input. Perhatikan rgba ber-alpha rendah: bayangan halus, bukan blok hitam.

Latihan singkat

Buat kartu dengan bayangan dua lapis yang "terangkat" saat hover (tambahkan transition), lalu input berbayangan inset.