cssshadowdesainPemula4 mnt baca

Box Shadow

Bayangan elemen: offset, blur, spread, inset, dan beberapa lapis bayangan sekaligus.

Anatomi box-shadow

css

.kartu {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  /*             x y blur warna */
}

Urutan nilainya: offset-x, offset-y, blur-radius, (spread-radius), warna. Dua nilai pertama wajib, sisanya opsional.

offset: posisi bayangan (x = horizontal, y = vertikal).
blur: semakin besar semakin lembut.
spread: memperbesar/memperkecil ukuran bayangan.
inset: bayangan di dalam elemen, bukan di luar.

Beberapa lapis sekaligus

Pisahkan dengan koma untuk efek berlapis:

css

.kartu {
  box-shadow:
    0 1px 2px rgba(0,0,0,0.1),
    0 8px 24px rgba(0,0,0,0.12);
}

Teknik ini dipakai sistem desain modern (misal Tailwind) untuk bayangan yang terlihat natural: satu lapis tajam dekat, satu lapis lembut jauh.

Bayangan dalam (inset)

css

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

Efek "cekung", cocok untuk input form agar terlihat seperti area yang bisa diisi.

Catatan teknis: bayangan yang besar dan blur tinggi bisa membebani performa rendering, terutama saat dianimasikan. Untuk animasi, lebih baik menganimasikan transform dan opacity daripada box-shadow.

Analogi: bayangan matahari

Box-shadow seperti bayangan benda di bawah matahari: offset-x/y adalah arah datang cahaya, blur adalah seberapa mendung (bayangan tajam vs baur), spread adalah seberapa besar bayangan dibanding benda. Desainer memakai bayangan untuk memberi tahu otak: "benda ini melayang di atas permukaan".

Kenapa bayangan penting?

Otak manusia memakai bayangan untuk memahami kedalaman. Kartu tanpa bayangan terlihat "nempel" dan datar; dengan bayangan halus ia terlihat terangkat dan bisa diklik. Inilah kenapa hampir semua kartu, modal, dan tombol modern punya bayangan.

Contoh bertahap: dari datar ke melayang

Tanpa bayangan (datar):

css

.kartu {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
}

Dengan bayangan halus (terangkat):

css

.kartu {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

Catatan: dengan bayangan yang cukup, border bisa dihapus karena bayangan sudah memberi definisi tepi.

Bayangan bertingkat untuk hover (efek terangkat):

css

.kartu {
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
  transition: box-shadow 0.3s, transform 0.3s;
}

.kartu:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}

Bayangan dalam (inset) untuk efek cekung:

css

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

Kesalahan umum pemula

Salah: bayangan terlalu hitam dan tajam. box-shadow: 5px 5px 0 black terlihat seperti desain 2010. Bayangan modern: offset kecil, blur besar, warna hitam transparan (rgba dengan alpha 0.06-0.15).

Salah: banyak bayangan menumpuk tanpa sistem. Tetapkan 2-3 level bayangan sebagai variabel dan pakai konsisten:

css

:root {
  --bayangan-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
  --bayangan-md: 0 4px 12px rgba(15, 23, 42, 0.1);
  --bayangan-lg: 0 12px 32px rgba(15, 23, 42, 0.16);
}

Salah: bayangan pada teks. Untuk teks pakai text-shadow (modul tersendiri), bukan box-shadow.

Latihan kilat

Tulis bayangan modern untuk kartu: geser bawah 4px, blur 12px, hitam 10% transparan.
Kartu dengan bayangan kecil; saat hover ia "terangkat" (naik 4px + bayangan lebih besar). Tulis kedua state + transition.
Kenapa box-shadow: 5px 5px 0 black terlihat kuno? Sebutkan tiga ciri bayangan modern.

Kunci: (1) box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);. (2) Normal: 0 2px 6px rgba(0,0,0,0.06); hover: transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.14); + transition. (3) Offset besar, blur nol, warna solid; modern: offset kecil, blur besar, warna transparan.

Istilah kunci

offset-x / offset-y: arah datang "cahaya" (arah bayangan).
blur-radius: seberapa baur bayangan (makin besar makin halus).
spread-radius: seberapa besar bayangan dibanding elemen.
rgba: warna dengan transparansi; standar untuk bayangan modern.
inset: bayangan ke DALAM (efek cekung).

Rangkuman

box-shadow: x y blur warna. Tambah spread untuk memperbesar, inset untuk bayangan dalam, koma untuk multi-lapis. Pakai warna hitam transparan agar bayangan menyatu dengan background apa pun.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Kartu Melayang

Di playground:

Buat class .melayang: bayangan lembut besar (y 16px, blur 40px, alpha 0.2) sehingga kartu terlihat melayang.
Tambahkan efek hover: saat di-hover, bayangan membesar dan kartu naik 4px (transform: translateY(-4px)) dengan transisi 0.3s.
Di komentar, jelaskan kenapa warna bayangan memakai rgba hitam, bukan warna solid abu-abu.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Halo CSS</h1>
<p>Edit styles.css dan lihat hasilnya.</p>
</body>
</html>

Open Sandbox

Kuis Bab

Uji pemahamanmu: Box Model

Jawab 5 soal berikut, lalu tekan "Periksa Jawaban".

1.Dengan box-sizing: content-box (default), berapa lebar total elemen ber-width 200px + padding 20px kiri-kanan?

2.Apa yang terjadi pada margin vertikal dua elemen block yang bertetangga?

3.Apa beda utama outline dengan border?

4.Bagaimana membuat lingkaran sempurna dari div persegi?

5.Urutan nilai box-shadow yang benar adalah?