Visual Effects Best Practices

Border, radius, bayangan, dan filter adalah bumbu: takaran yang pas mengangkat desain, takaran berlebihan membuat antarmuka terasa ramai. Chapter ini merangkum praktik terbaik yang memisahkan efek yang membantu dari efek yang mengganggu: menakar penggunaan, menjaga performa, menyeragamkan nilai lewat token, serta menjaga aksesibilitas. Materi ini menutup section Borders dan Effects, sehingga panduan ringkasnya berlaku untuk seluruh efek yang telah kita pelajari.

Menakar Efek: Checklist Sebelum Rilis #

Efek visual paling efektif ketika setiap efek punya tugas yang jelas: bayangan menandai kedalaman — elemen mana yang terangkat dan bisa disentuh; radius menandai kelompok — kartu, input, dan tombol yang sejenis tampil sejenis; filter menandai keadaan — konten yang belum siap diburamkan. Bila sebuah efek tidak menjelaskan apa pun tentang hierarki atau keadaan, efek itu kemungkinan besar hanya menambah kebisingan visual.

Gunakan daftar periksa berikut sebelum merilis halaman:

Performa: Bayangan Besar dan Animasi #

Menggambar bayangan statis dengan blur besar tergolong murah, tetapi menganimasikannya tidak. Setiap perubahan pada box-shadow atau filter memaksa browser menghitung ulang dan melukis ulang area piksel bayangan di setiap frame — dan area itu membengkak seiring blur dan spread yang besar. Animasi yang hanya mengubah transform dan opacity jauh lebih ringan karena keduanya dikerjakan komposisi tanpa melukis ulang.

Pengguna juga berhak meminta pengurangan gerakan. Hormati preferensi tersebut dengan membungkus animasi efek dalam media query:

@media (prefers-reduced-motion: reduce) {
  .kartu {
    transition: none;
  }
}

Selain animasi, sifat efek yang memengaruhi rendering perlu diwaspadai: filter membentuk stacking context baru dan mengubah acuan position: fixed bagi elemen di dalamnya, sehingga efek pada komponen besar dapat berdampak ke perilaku anak-anaknya. Terapkan filter pada elemen terkecil yang membutuhkan, bukan pada wadah yang membungkus separuh halaman.

Token Radius, Bayangan, dan Focus Ring #

Nilai efek yang ditulis manual di belasan tempat pasti berakhir tidak seragam. Kumpulkan nilai-nilai tersebut sebagai custom properties pada :root — seperti yang dibahas pada Chapter Custom Properties — lalu rujuk dari setiap komponen. File berikut memuat token yang dipakai demo di akhir chapter:

Pola di atas membatasi diri pada tiga tingkat radius dan dua tingkat bayangan: --radius-kecil untuk input, --radius-sedang untuk kartu, --radius-penuh untuk tombol pil, lalu --bayangan-ringan dan --bayangan-sedang sebagai satu-satunya dua kedalaman yang boleh muncul. Ketika desain perlu berubah — misalnya semua kartu menjadi lebih tumpul — cukup satu baris token yang diedit.

Hasil di Browser:

Kartu memakai token --radius-sedang sehingga computed
border-top-left-radius 12px dengan bayangan ringan
"rgba(15, 23, 42, 0.08) 0px 1px 2px 0px". Tombol pil memakai token
--radius-penuh yang tercatat 9999px. Tombol utama berlatar
rgb(2, 132, 199) dengan teks rgb(255, 255, 255) — kontrasnya tinggi
dan tetap terbaca.

Demo lengkap chapter ini menampilkan kartu, tombol sekunder, dan tombol utama yang seluruhnya menyusun nilai efeknya dari token. Setiap elemen membawa atribut data-expected yang memeriksa radius, bayangan, serta pasangan warna kontras, sehingga panduan di atas dapat diverifikasi otomatis oleh harness uji Course ini.

/* Token efek visual — Course CSS (Visual Effects Best Practices) */

:root {
  --radius-kecil: 6px;
  --radius-sedang: 12px;
  --radius-penuh: 9999px;
  --bayangan-ringan: 0px 1px 2px rgba(15, 23, 42, 0.08);
  --bayangan-sedang: 0px 4px 12px rgba(15, 23, 42, 0.12);
}

/* Kartu memakai token radius dan bayangan yang sama dengan komponen lain */
.kartu-token {
  border-radius: var(--radius-sedang);
  box-shadow: var(--bayangan-ringan);
}

/* Tombol sekunder dan utama sama-sama berbentuk pil */
.tombol-token {
  border-radius: var(--radius-penuh);
}