Penyesuaian Gambar dengan Efek Filter CSS

Menyesuaikan gambar Kecerahan dan Kontras, atau mengubah gambar menjadi Skala abu-abu atau Sephia adalah fitur umum yang mungkin Anda temukan di aplikasi pengeditan gambar Photoshop. Tapi, sekarang mungkin untuk menambahkan efek yang sama ke gambar web menggunakan CSS.

Kemampuan ini berasal dari Efek Filter yang sebenarnya masih dalam tahap Draft Kerja. Namun, browser Webkit tampaknya menjadi langkah maju dalam mengimplementasikan fitur ini.

Jadi, mari kita coba dan kita akan menggunakan gambar ini dari Mehdi Kh untuk menunjukkan efeknya.

Efeknya

Menerapkan efeknya sangat mudah. Lihatlah potongan di bawah ini, untuk mengubah gambar menjadi skala abu-abu;

 img -webkit-filter: grayscale (100%);  

... dan ini untuk warna coklat tua ala Instagram.

 img -webkit-filter: sepia (100%);  

Keduanya warna coklat tua dan skala abu-abu nilai dinyatakan dalam persentase di mana 100% adalah maksimum dan berlaku 0% akan menjaga gambar tidak berubah, tetapi ketika nilainya tidak ditentukan secara eksplisit 100% akan dianggap sebagai default.

Mencerahkan gambar juga dimungkinkan, dan kita bisa melakukannya dengan menggunakan kecerahan fungsi, sebagai berikut;

 img -webkit-filter: brightness (50%);  

Efek kecerahan berfungsi seperti efek kontras dan sepia di atas di mana nilainya 0% akan menjaga gambar seperti apa adanya dan menerapkannya 100% akan benar-benar mencerahkan gambar, yang mungkin hanya akan menampilkan halaman putih kosong daripada gambar.

Efek kecerahan juga memungkinkan untuk nilai negatif, di mana itu akan terjadi menggelapkan gambar.

 img -webkit-filter: brightness (-50%);  

... dan kita dapat mengatur kontras gambar dengan cara ini.

 img -webkit-filter: contrast (200%);  

Ada sedikit perbedaan pada bagaimana nilai bekerja juga, seperti yang Anda lihat di atas, kita atur kontras() oleh 200%, ini karena nilai 100% adalah titik awal di mana gambar akan tetap tidak berubah. Ketika nilainya di bawah 100%, katakanlah 50%, gambar akan menjadi kurang kontras.

Selain itu, kami juga dapat menggabungkan efek dalam satu blok deklarasi, seperti pada contoh di bawah ini. Kami mengubah gambar menjadi skala abu-abu dan meningkatkan kontras 50% pada saat bersamaan.

 img -webkit-filter: grayscale (100%) kontras (150%);  

Dengan menggabungkan filter dengan transisi CSS3 kita dapat menjadikannya anggun melayang efek.

 img: hover -webkit-filter: grayscale (0%);  img: hover -webkit-filter: sepia (0%);  img: hover -webkit-filter: brightness (0%);  img: hover -webkit-filter: contrast (100%);  

Terakhir, ada satu efek lagi yang bisa kita coba; itu Gaussian Blur, yang akan mengaburkan elemen yang ditargetkan.

 img: hover -webkit-filter: blur (5px);  

Seperti di Photoshop, nilai blur dinyatakan dalam jari-jari piksel dan jika nilainya tidak dinyatakan secara eksplisit, angka 0 akan diambil sebagai default dan gambar dibiarkan apa adanya..

Pemikiran Akhir

Sebenarnya ada lebih banyak efek dalam spesifikasi. seperti rona-putar, membalikkan dan jenuh, tapi saya pikir mereka kurang diterapkan dalam kasus-kasus Web nyata. Dengan demikian, diskusi terbatas hanya pada empat efek.

Dan, meskipun diskusi sedang diterapkan pada gambar dalam tutorial ini, properti sebenarnya juga dapat diterapkan pada elemen apa pun di DOM.

Terakhir, Anda dapat melihat demo langsung dari tautan di bawah ini. Harap perhatikan bahwa Filter saat ini hanya didukung di Chrome 19 dan di atas.

• Demo
• Sumber Unduhan