Properti filter di CSS menerapkan efek visual pada elemen — blur, kecerahan, kontras, dan penyesuaian warna yang bekerja pada gambar, latar, bahkan video. Berbeda dengan editor gambar, filter berjalan di browser sehingga tetap tajam di resolusi apa pun dan bisa dianimasikan mulus dengan transition.
Seret slider untuk menumpuk beberapa fungsi filter dalam satu rantai. Adegan sampel diperbarui real-time, dan kode yang dihasilkan menggabungkan semuanya menjadi satu deklarasi filter siap untuk stylesheet Anda.
Frequently Asked Questions
Q: Fungsi filter CSS apa saja yang ada?
Fungsi filter CSS apa saja yang ada? blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(), dan drop-shadow(). Anda bisa merangkai berapa pun dalam satu properti filter.
Q: Apakah filter CSS diakselerasi GPU?
Apakah filter CSS diakselerasi GPU? Ya. Sebagian besar fungsi filter berjalan di GPU dan beranimasi 60fps. blur() dan drop-shadow() paling berat; gunakan hemat pada elemen besar.
Q: Apakah filter memengaruhi tata letak?
Apakah filter memengaruhi tata letak? Tidak. Filter murni visual — elemen mempertahankan ukuran dan posisi aslinya dalam alur dokumen. Gunakan transform untuk perubahan ukuran.
Q: Bisakah filter dianimasikan?
Bisakah filter dianimasikan? Ya. Animasikan properti filter dengan transition atau keyframes. Animasi antar rantai filter berbeda dengan panjang sama terinterpolasi mulus.
Q: Bagaimana membuat gambar grayscale lalu berwarna saat hover?
Bagaimana membuat gambar grayscale lalu berwarna saat hover? Gunakan dua kondisi: img { filter: grayscale(100%); transition: filter .4s; } dan img:hover { filter: grayscale(0); }. Pola portofolio klasik.
Warna Batik Indonesia
Dari coklat sogan hingga biru indigo, warna batik Indonesia mewarisi teknik pewarnaan alami dari daun indigo, kulit pohon soga, dan kunyit. Setiap warna menyimpan filosofi Jawa yang dalam.
Coklat Sogan #8B4513Warna khas batik klasik dari kulit pohon soga
Biru Indigo #1A3A5CPewarna alami dari daun indigo (nila)
Merah Batik #C41E3AWarna berani khas batik pesisir
Kuning Kunyit #E3A857Kuning alami dari rimpang kunyit
Hijau Lumut #8A9A5BWarna alami dari campuran indigo dan kunyit
Ungu Terong #614051Warna buah terong khas batik Sidoarjo
Krem Batik #F5F0E1Warna dasar kain mori sebelum dibatik
Hitam Pekat #1B1B1BHitam dari getah pohon tingi untuk batik keraton
Biru Langit #4A90D9Warna langit cerah khas batik pesisir
Oranye Jingga #FF7F00Warna cerah khas batik kontemporer
Q: Apa itu warna sogan?
Apa itu warna sogan? Sogan (#8B4513) adalah warna coklat khas batik klasik yang dihasilkan dari kulit pohon soga. Warna ini identik dengan batik keraton Yogyakarta dan Solo yang elegan.
Q: Bagaimana warna indigo batik dibuat?
Bagaimana warna indigo batik dibuat? Biru indigo (#1A3A5C) dibuat dari daun indigo (Indigofera tinctoria) yang direndam dan difermentasi. Pewarna alami ini telah digunakan sejak zaman kerajaan Jawa.