Filters

Properti filter menerapkan efek grafis — pemburaman, penggelapan, pengubahan warna — pada elemen sebelum hasilnya digambar ke layar. Berbeda dengan bayangan yang hanya menggambar di belakang kotak, filter memproses seluruh render elemen: latar, border, teks, dan gambar di dalamnya ikut terpengaruh. Efek ditulis sebagai daftar fungsi seperti blur() dan grayscale() dalam satu deklarasi. Pada Chapter ini kita mengenal fungsi-fungsi utama, aturan penggabungannya, serta perbedaan drop-shadow() dengan box-shadow.

Fungsi Filter Utama #

Setiap fungsi menerima satu set parameter dan mengubah tampilan elemen:

Angka desimal di fungsi di atas dapat juga ditulis sebagai persen — grayscale(1) setara dengan grayscale(100%). Dua contoh pemakaian:

.pratinjau {
  filter: blur(4px);
}
.gelap {
  filter: brightness(0.6);
}

Aturan pertama memburamkan pratinjau 4 piksel — pola yang sering dipakai untuk menandai konten yang belum siap ditampilkan. Aturan kedua menggelapkan elemen menjadi 60 persen dari kecerahan normalnya.

Fungsi contrast() dan saturate() melengkapi kelompok warna; keduanya bekerja dengan angka seperti brightness(), dengan 1 sebagai nilai netral. Kombinasi yang populer pada galeri foto adalah kartu pratinjau yang tampil hitam-putih lalu kembali berwarna saat diarahkan kursor:

.thumbnail {
  filter: grayscale(100%) contrast(1.1);
  transition: filter 150ms ease;
}
.thumbnail:hover {
  filter: none;
}

Pola ini hemat: satu deklarasi menangani seluruh perubahan warna, tanpa menyimpan dua versi gambar dan tanpa mengedit berkas apa pun.

Menggabungkan Fungsi dan Urutannya #

Beberapa fungsi dapat ditulis berurutan dalam satu deklarasi, dipisahkan spasi:

.gabungan {
  filter: blur(2px) grayscale(100%);
}

Fungsi diproses dari kiri ke kanan: elemen diburamkan terlebih dahulu, lalu hasilnya dihapus warnanya. Menukar urutan dapat menghasilkan piksel yang berbeda karena setiap fungsi memproses keluaran fungsi sebelumnya — pemburaman setelah penghapusan warna dan pemburaman sebelum penghapusan warna tidak selalu identik. Untuk melepas seluruh filter, tetapkan filter: none.

drop-shadow() vs box-shadow #

Fungsi drop-shadow() menerima pola nilai yang mirip box-shadow — offset-x, offset-y, blur, warna — tetapi tanpa komponen spread. Perbedaan perilakunya lebih penting daripada sintaksnya: box-shadow menggambar persegi di belakang kotak elemen, sedangkan drop-shadow() digambar setelah bentuk final elemen dipotong, sehingga mengikuti tepi yang tampak — sudut melengkung, bentuk clip-path, hingga area transparan pada gambar PNG.

.bintang {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
                     50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
}

Pada bintang di atas, bayangan dari box-shadow tidak akan terlihat sama sekali karena ikut terpotong oleh clip-path, sementara drop-shadow() tetap muncul dengan bentuk yang meniru bintang. Demo di akhir chapter menampilkan perbandingan keduanya berdampingan.

Hasil di Browser:

Panel buram tercatat computed "blur(4px)", panel gelap "brightness(0.6)",
panel hitam-putih "grayscale(1)" (dinormalisasi dari 100%), panel sepia
"sepia(0.6)", panel gabungan "blur(2px) grayscale(1)", dan bintang
drop-shadow tercatat "drop-shadow(rgba(0, 0, 0, 0.5) 4px 4px 6px)" —
warna ditulis di posisi terdepan oleh Chromium.

Demo lengkap chapter ini menampilkan enam panel filter dan perbandingan bintang box-shadow versus drop-shadow(). Setiap panel membawa atribut data-expected yang membandingkan nilai computed filter secara utuh, sehingga pembahasan di atas dapat diverifikasi otomatis oleh harness uji Course ini.