Depth, Shadow & Lighting — UI/UX

Shadow dan Depth dalam UI Four elevation levels from flat to high elevation, each with progressively deeper shadow.flatlowmediumhighShadow yang konsisten…

Depth (kedalaman) adalah kesan bahwa sebuah elemen terangkat dari halaman, dan di layar kesan itu dibuat dengan shadow (bayangan) yang digambar CSS lewat box-shadow. Bayangin cangkir kopi di meja teras Bu Sri, siang hari, matahari di atas. Tepat di bawah cangkir ada bayangan kecil yang gelap dan tajam, tempat cangkir menyentuh meja. Di sekelilingnya ada bayangan lebar yang samar, dari cahaya langit yang datang dari mana-mana. Semua benda di meja bayangannya jatuh ke arah yang sama, karena mataharinya cuma satu. Dan kalau cangkirnya kamu angkat, bayangan tajamnya hilang dan bayangan samarnya melebar. Tiga hal itu yang kita tiru di CSS: dua lapis bayangan, satu sumber cahaya, dan makin tinggi makin lebar.

🧪 Tebakan cepat: Kartu Kamar Teras dikasih satu shadow saja, 0 6px 16px rgba(0, 0, 0, 0.08). Dibanding shadow tajam 0 1px 3px rgba(0, 0, 0, 0.12), tepat di bawah tepi kartu dia lebih gelap atau lebih terang? Jawabannya ada di bagian "Dua lapis: kontak dan ambient".

Cara membaca box-shadow

.kabut {
  /*          x    y    blur  warna */
  box-shadow: 0    6px  16px  rgba(0, 0, 0, 0.08);
}

Satu sumber cahaya, dari atas

Di dunia nyata cahaya biasanya datang dari atas (matahari, lampu di langit-langit), jadi bayangan jatuh ke bawah. Karena itu offset y lebih besar dari x: y positif, x nol atau kecil. Itu jawaban kuis "kenapa offset Y lebih besar dari X": cahaya datang dari atas.

Aturan kedua: satu halaman, satu matahari. Semua shadow memakai arah yang sama. Kalau kartu kamar pakai 4px 6px (bayangan ke kanan bawah) dan menu tamu di atasnya pakai -4px 6px (ke kiri bawah), mata menangkap dua sumber cahaya, dan halamannya terasa salah walaupun orang gak bisa bilang kenapa. Cara paling aman: x selalu 0.

Dua lapis: kontak dan ambient

Satu shadow gak bisa meniru dua bayangan cangkir sekaligus, jadi kita tulis dua, dipisah koma, di satu deklarasi box-shadow:

.kabut {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),   /* kontak: dekat, tajam */
    0 6px 16px rgba(0, 0, 0, 0.08);  /* ambient: jauh, samar */
}

Ini nilai merah (0 sampai 255) piksel di bawah kartu putih di atas latar putih, diukur dari tepi bawah kartu ke bawah. Angkanya dihitung dari rumus Gaussian blur, dan Chrome, Safari, serta Firefox menggambarnya dalam selisih 3 tingkat:

Jarak dari tepi kartu 0px 1px 2px 4px 8px 12px 16px 20px 24px
Kontak saja 236 244 250 255 255 255 255 255 255
Ambient saja 240 240 241 243 247 251 253 254 255
Dua lapis 221 230 237 243 247 251 253 254 255

Jadi jawaban tebakannya: lebih terang. Di tepi kartu, ambient cuma #f0f0f0, sedangkan kontak #ececec. Tapi kontak sudah hilang di 4px, sedangkan ambient masih terlihat sampai sekitar 22px. Itu jawaban tebakannya. Masing-masing cuma separuh cerita: kontak memberi garis tegas tempat kartu "menyentuh" halaman, ambient memberi kesan tinggi. Digabung, piksel tergelapnya #dddddd (1,36:1 terhadap putih) dan bayangannya memudar halus. Trik ini disebut layered shadows (shadow berlapis).

Elevasi sebagai token

Elevasi (elevation) adalah seberapa "tinggi" sebuah permukaan dari halaman. Makin tinggi, offset dan blur lapis ambient makin besar, jadi bayangannya makin jauh. Simpan tiap tingkat sebagai token yang namanya menyebut tugasnya, seperti token warna --action:

:root {
  --shadow-raised:   0 1px 3px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(0, 0, 0, 0.08);
  --shadow-floating: 0 2px 4px rgba(0, 0, 0, 0.12), 0 12px 24px rgba(0, 0, 0, 0.12);
  --shadow-overlay:  0 4px 8px rgba(0, 0, 0, 0.12), 0 24px 48px rgba(0, 0, 0, 0.16);
}
.kabut   { box-shadow: var(--shadow-raised); }    /* kartu kamar */
.menu    { box-shadow: var(--shadow-floating); }  /* pilihan jumlah tamu */
.dialog  { box-shadow: var(--shadow-overlay); }   /* konfirmasi pesanan */
Token Dipakai untuk Piksel tergelap Hilang di
tanpa shadow latar halaman, tombol malam di dalam kartu
--shadow-raised kartu Kamar Teras, Loteng, Kebun #dddddd (1,36:1) 22px
--shadow-floating menu "2 tamu" yang terbuka di atas kartu #d0d0d0 (1,54:1) 38px
--shadow-overlay dialog "Konfirmasi pesanan" #c7c7c7 (1,69:1) 78px

Komponen di tingkat yang sama memakai token yang sama: tiga kartu kamar semuanya --shadow-raised. Kalau kartu bisa diklik, saat hover dia boleh naik satu tingkat ke --shadow-floating.

Shadow di permukaan gelap

Di mode gelap halaman Bu Sri (latar #111827, seperti di pelajaran dark UI), --shadow-raised yang sama menghasilkan piksel tergelap #0f1522. Bedanya dengan latar cuma 1,03:1, dan bayangannya sudah gak terbedakan dari latar di 14px. Menggelapkan sesuatu yang sudah gelap gak menghasilkan beda.

Di permukaan gelap, elevasi ditunjukkan dengan permukaan yang lebih terang: kartu #1f2937 di atas latar #111827 (1,21:1), dan menu di atas kartu #374151 (1,42:1 terhadap kartu). Shadow boleh tetap ada, tapi jangan jadi satu-satunya pemisah.

⚠️ Jebakan yang sering ketemu

TL;DR: box-shadow: x y blur warna. Cahaya datang dari atas, jadi offset y lebih besar dari x (paling aman x = 0), dan semua shadow di halaman memakai arah yang sama: satu sumber cahaya. Shadow yang natural punya dua lapis (layered shadows) di satu deklarasi, dipisah koma: kontak yang tajam (0 1px 3px rgba(0, 0, 0, 0.12), hilang di 4px) dan ambient yang samar (0 6px 16px rgba(0, 0, 0, 0.08), terlihat sampai sekitar 22px). Simpan tingkat elevasi sebagai token (--shadow-raised untuk kartu, --shadow-floating untuk menu, --shadow-overlay untuk dialog); makin tinggi, makin jauh bayangannya. Di permukaan gelap shadow hampir gak terlihat (1,03:1), jadi elevasi ditunjukkan dengan permukaan yang lebih terang (#1f2937 di atas #111827).

Yang akan kamu pelajari