Question 1

Fungsi CSS filter apa saja yang tersedia?

Accepted Answer

CSS filter mendukung: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, dan sepia. Anda dapat menggabungkan beberapa filter dalam satu properti filter dan diterapkan sesuai urutan yang tercantum.

Question 2

Apakah properti CSS filter mempengaruhi performa?

Accepted Answer

Filter CSS dipercepat oleh GPU di browser modern, tetapi blur yang berat atau beberapa filter yang ditumpuk dapat mempengaruhi performa rendering, terutama di perangkat mobile. Untuk animasi, gunakan will-change: filter untuk mengoptimalkan.

Question 3

Bisakah saya menerapkan filter CSS hanya pada latar belakang (bukan elemen anak)?

Accepted Answer

Tidak, properti filter berlaku untuk seluruh elemen termasuk anak-anaknya. Untuk memfilter hanya latar belakang, gunakan backdrop-filter untuk efek glassmorphism, atau isolasi latar belakang dalam pseudo-element terpisah.

Question 4

Apa perbedaan antara filter: opacity() dan properti opacity?

Accepted Answer

Keduanya mengontrol transparansi, tetapi filter: opacity() menggunakan akselerasi hardware dan dapat dikombinasikan dengan fungsi filter lainnya. Properti opacity lebih sederhana dan membuat konteks tumpukan baru. Untuk opacity mandiri, properti opacity biasanya lebih disukai.

Question 5

Bisakah filter CSS digunakan pada elemen SVG?

Accepted Answer

Ya. Filter CSS berlaku untuk elemen SVG seperti elemen HTML. Selain itu, SVG memiliki filter primitif sendiri (feBlur, feColorMatrix, dll.) yang menawarkan kontrol lebih halus dari pintasan filter CSS.

Generator Filter CSS

Filter

Pertanyaan yang Sering Diajukan

Comments & Feedback