← CSS39 / 62
box-shadow yang tidak norak
Sintaksnya: box-shadow: x y blur warna. Kunci bayangan yang terlihat profesional: offset kecil, blur agak besar, warna sangat transparan. Bayangan hitam pekat (box-shadow: 5px 5px black) langsung terasa amatir. Gunakan rgba(0,0,0,0.1) — cahaya nyata menghasilkan bayangan lembut, bukan blok hitam.
👀 Contoh dulu
/* NORAK: pekat dan kaku */
.buruk { box-shadow: 6px 6px 0 black; }
/* PROFESIONAL: offset kecil, blur besar, sangat transparan */
.baik { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }Hasilnya: .buruk terlihat seperti stiker tahun 2005; .baik terlihat seperti kartu yang sedikit terangkat dari kertas.
💡 Pola: box-shadow: x y blur rgba(0,0,0,opacity). Nilai opacity 0.05–0.15 biasanya cukup.
📝 Sekarang giliranmu
Beri .kartu bayangan halus: box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) dan border-radius: 8px.
Preview