Efek Visual Lanjutan: filter, backdrop-filter, Gradien Kompleks, dan clip-path

1. `filter` vs `backdrop-filter`: Kapan Menggunakan Masing-Masing?

CSS menyediakan fungsi pengolah piksel grafis langsung di peramban (filter berstatus Baseline Widely Available, sedangkan backdrop-filter Baseline Newly Available sejak September 2024):

filter: Menerapkan efek grafis (seperti blur(), brightness(), contrast(), grayscale(), drop-shadow()) pada elemen itu sendiri beserta seluruh anak di dalamnya.
backdrop-filter: Menerapkan efek grafis hanya pada area latar belakang yang berada di balik elemen transparan tersebut, sementara teks di dalam elemen tetap tajam 100%! Inilah kunci untuk membuat bilah navigasi kaca buram (frosted glass / glassmorphism).

/* Bilah navigasi atas dengan efek kaca buram yang tetap terbaca jelas */
.header-kaca {
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  /* Wajib menggunakan warna latar semi-transparan (mis. opasitas 0.75)
     agar area di belakangnya tampak menembus dan diburamkan oleh backdrop-filter! */
  background-color: oklch(100% 0 0 / 0.75);
  backdrop-filter: blur(12px) saturate(150%);
  border-block-end: 1px solid oklch(85% 0.01 250 / 0.6);
}

Perbedaan Kritis: `box-shadow` vs `filter: drop-shadow()`

box-shadow selalu memberi bayangan pada kotak persegi panjang elemen, meskipun gambar di dalamnya adalah logo PNG/SVG dengan latar transparan!
filter: drop-shadow(0 8px 16px rgb(0 0 0 / 0.2)) memeriksa saluran transparansi (alpha channel) gambar dan memberi bayangan yang mengikuti lekuk bentuk asli gambar PNG/SVG transparan tersebut!

/* Bayangan mengikuti lekuk bentuk ikon SVG atau gambar PNG transparan */
.ikon-ilustrasi {
  filter: drop-shadow(0 6px 12px rgb(15 23 42 / 0.18));
}

2. Tiga Jenis Gradien CSS dan Diagram Lingkaran dengan `conic-gradient()`

Di CSS, gradien (linear-gradient, radial-gradient, dan conic-gradient) diperlakukan sebagai gambar (background-image) yang dibuat secara matematis oleh peramban dengan ukuran 0 byte jaringan:

linear-gradient(arah, warna1, warna2): Transisi warna sepanjang garis lurus (tips: gunakan in oklch seperti linear-gradient(in oklch to right, #2563eb, #10b981) agar gradasi warna di tengahnya tampak cerah dan tidak berubah kusam keabu-abuan!).
radial-gradient(...): Pancaran warna melingkar/elips dari titik pusat (sangat bagus untuk efek cahaya latar lembut di bagian hero).
conic-gradient(...): Putaran warna mengelilingi titik pusat layaknya jarum jam! Dengan menetapkan titik henti warna secara tajam, Anda dapat membuat **diagram lingkaran (pie/donut chart) murni dengan CSS**:

/* Membuat diagram cincin (Donut Chart) progres 75% murni dengan CSS! */
.diagram-cincin {
  --persen: 75%;
  inline-size: 8rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: conic-gradient(
    oklch(58% 0.2 255) var(--persen),
    oklch(90% 0.01 250) 0
  );
  display: grid;
  place-items: center;

  /* Membuat lubang di tengah cincin */
  &::before {
    content: attr(data-label);
    inline-size: 68%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: #ffffff;
    display: grid;
    place-items: center;
    font-weight: 700;
  }
}

3. Memotong Bentuk Geometris dengan `clip-path`

Properti clip-path bekerja seperti pisau pemotong kue: bagian elemen yang berada di dalam jalur bentuk akan ditampilkan, sementara bagian di luarnya disembunyikan secara tajam:

clip-path: circle(50%)
clip-path: inset(10px 20px round 12px)
clip-path: polygon(x1 y1, x2 y2, x3 y3, ...)

/* Memotong bagian bawah spanduk hero secara miring dinamis */
.spanduk-miring {
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
  padding-block: 4rem 6rem;
}

⚠️ Peringatan Performa pada backdrop-filter: blur() dan filter: blur()

Efek pemburaman (blur) dengan radius sangat besar (misalnya blur(60px)) pada area layar yang luas memakan daya GPU yang signifikan, terutama saat halaman digulir pada laptop hemat daya atau ponsel. Gunakan radius moderat (8px–16px) dan jangan menganimasikan nilai blur() secara terus-menerus!

Latihan Praktik: Membuat Kartu Metrik dengan Diagram Cincin `conic-gradient`

Buatlah berkas efek-visual.html dan visual.css:

Buat <header> dengan efek kaca buram backdrop-filter: blur(10px) di atas latar gradien linear-gradient(in oklch ...).
Buat 3 komponen .diagram-cincin yang menampilkan penggunaan CPU (45%), RAM (72%), dan Diska (90%) cukup dengan mengubah variabel --persen pada gaya inline masing-masing elemen.
Gunakan filter: drop-shadow(...) pada sebuah ikon <svg> transparan.

📚 Rujukan

1. filter vs backdrop-filter: Kapan Menggunakan Masing-Masing?

Perbedaan Kritis: box-shadow vs filter: drop-shadow()

2. Tiga Jenis Gradien CSS dan Diagram Lingkaran dengan conic-gradient()

3. Memotong Bentuk Geometris dengan clip-path

Latihan Praktik: Membuat Kartu Metrik dengan Diagram Cincin conic-gradient