Css3 (Foto: Text Formatting: Text-Align, Text-Decoration, Text-Transform, Letter-Spacing.)

Filter CSS: Manipulasi Gambar Instan dengan Kode

Properti filter memungkinkan Anda mengubah rendering grafis elemen. Efek ini sering digunakan untuk memperbaiki keterbacaan teks di atas gambar atau memberikan umpan balik visual saat pengguna berinteraksi dengan elemen.

1. Filter: Blur

Fungsi ini memberikan efek buram pada gambar. Semakin besar nilai pixel-nya, semakin buram gambarnya.

• Kegunaan: Membuat latar belakang menjadi tidak fokus agar teks di depannya lebih mudah dibaca.

• Contoh: filter: blur(5px);

2. Filter: Brightness

Mengatur tingkat kecerahan elemen.

• Nilai: 1 (atau 100%) adalah normal. Nilai di bawah 1 akan menggelapkan, dan di atas 1 akan menerangkan.

• Contoh: filter: brightness(0.5); (Menggelapkan gambar sebesar 50%).

3. Filter: Contrast

Mengatur perbedaan antara bagian gelap dan terang pada gambar.

• Nilai: Sama seperti brightness, 1 adalah normal. Nilai tinggi membuat warna lebih "berani" dan tajam.

• Contoh: filter: contrast(150%);

4. Filter: Grayscale

Mengubah gambar berwarna menjadi hitam-putih.

• Nilai: 0% (berwarna) hingga 100% (hitam-putih total).

• Contoh: filter: grayscale(100%);

Tutorial: Efek Hover Galeri Berita

Mar i kita terapkan pada kartu berita di portal SatuMedia. Kita ingin gambar tampil hitam-putih, namun berubah menjadi berwarna dan tajam saat diarahkan kursor.

Struktur HTML

<div class="news-item"> <img src="tech-news.jpg" alt="Laravel 11" class="news-img"> <div class="info"> <h3>Update Laravel 11h3> div>
div>

Kode CSS

.news-img { width: 100%; height: auto; border-radius: 8px; /* Keadaan Awal: Hitam putih dan sedikit gelap */ filter: grayscale(100%) brightness(0.8); /* Transisi agar perubahan filter terasa halus */ transition: filter 0.4s ease-in-out;
} .news-item:hover .news-img { /* Saat Hover: Berwarna penuh dan cerah */ filter: grayscale(0%) brightness(1); cursor: pointer;
}

Tips Pro untuk Developer

1. Gabungkan Filter: Anda bisa menggunakan beberapa filter sekaligus dalam satu baris. Cukup pisahkan dengan spasi.

   • filter: blur(2px) grayscale(50%);

2. Performa: Filter diproses oleh GPU browser. Penggunaan blur yang berlebihan pada gambar yang sangat besar atau elemen yang banyak dapat sedikit memengaruhi performa scroll pada perangkat lama.

3. Menciptakan Glassmorphism: Untuk membuat efek kaca buram yang modern, gunakan backdrop-filter: blur(10px);. Perbedaannya, filter memburamkan elemen itu sendiri, sedangkan backdrop-filter memburamkan apa yang ada di belakang elemen tersebut.