Pelarasan Imej dengan Kesan Penapis CSS

Melaraskan imej Kecerahan dan Sebaliknya, atau mengubah imej ke dalam Skala kelabu atau Sephia adalah ciri umum yang mungkin anda dapati dalam aplikasi pengeditan imej, seperti Photoshop. Tetapi, kini mungkin untuk menambahkan kesan yang sama kepada imej web menggunakan CSS.

Keupayaan ini datang dari Effects Filter yang sebenarnya masih dalam peringkat Draf Kerja. Walau bagaimanapun, penyemak imbas Webkit seolah-olah menjadi langkah utama dalam melaksanakan ciri ini.

Jadi, mari kita cuba dan kami akan menggunakan imej ini dari Mehdi Kh untuk menunjukkan kesannya.

Kesan

Memohon kesannya sangat mudah. Lihat potongan di bawah, untuk menukar imej ke dalam kelabu;

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

... dan ini adalah untuk sepia ala Instagram.

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

Kedua sepia dan juga kelabu nilai dinyatakan dalam peratusan di mana 100% adalah maksimum dan memohon 0% akan menyimpan imej tidak berubah, tetapi apabila nilai tidak dinyatakan dengan jelas 100% akan diambil sebagai lalai.

Mencerahkan imej juga mungkin, dan kita boleh melakukannya dengan menggunakan kecerahan fungsi, seperti berikut;

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

Kesan kecerahan berfungsi seperti kesan kontras dan sepia di atas di mana nilai 0% akan memelihara imej seperti itu dan memohon 100% akan benar-benar mencerahkan imej, yang mungkin hanya menunjukkan halaman putih kosong dan bukan imej.

Kesan kecerahan juga membolehkan nilai negatif, di mana ia akan gelap imej.

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

... dan kami boleh melaraskan kontras imej dengan cara ini.

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

Terdapat sedikit perbezaan mengenai bagaimana nilai berfungsi juga, seperti yang anda lihat di atas, kami menetapkan kontras () oleh 200%, ini kerana nilai 100% adalah titik permulaan di mana imej itu akan kekal tidak berubah. Apabila nilai di bawah 100%, katakan 50%, imej akan menjadi kurang bertentangan.

Selain itu, kita juga boleh menggabungkan kesan dalam satu blok pengisytiharan, seperti dalam contoh di bawah. Kami menghidupkan imej itu kelabu dan menambah kontras sebanyak 50% pada masa yang sama.

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

Dengan menggabungkan penapis dengan peralihan CSS3 kita boleh membuat anggun berlegar kesan.

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

Akhir sekali, terdapat satu lagi kesan yang boleh kita cuba; yang Kabur Gaussian, yang akan mengaburkan unsur sasaran.

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

Seperti di Photoshop, nilai blur dinyatakan dalam radius piksel dan jika nilai tidak dinyatakan dengan jelas, 0 akan diambil sebagai lalai dan imej dibiarkan kerana ia.

Pemikiran Akhir

Sebenarnya ada kesan yang lebih banyak dalam spec itu. seperti hue-rotate, terbalik dan tepu, tetapi saya fikir mereka kurang digunakan dalam kes-kes Web sebenar. Oleh itu, perbincangan terhad kepada hanya empat kesan.

Dan, walaupun perbincangan diterapkan pada imej dalam tutorial ini, harta itu sebenarnya juga boleh digunakan untuk mana-mana elemen dalam DOM.

Akhirnya, anda boleh melihat demo langsung dari pautan berikut. Harap maklum bahawa Penapis pada masa ini hanya disokong dalam Chrome 19 dan ke atas.

• Demo
• Muat turun Sumber