Monoton Gambar dengan CSS - Trik CSS

Anonim

Anda selalu dapat menerapkan filter ke sebuah elemen untuk membuatnya monoton dalam arti grayscale:

Lihat Pena Monoton-ing Gambar oleh Chris Coyier (@chriscoyier) di CodePen.

Jika Anda meletakkannya dalam wadah dengan warna latar belakang dan menurunkan opasitas, Anda bisa mendapatkan jenis efek monoton berwarna:

Lihat Pena Monoton-ing Gambar oleh Chris Coyier (@chriscoyier) di CodePen.

Maarten van der Velde menulis untuk mengatakan bahwa alih-alih menurunkan opasitas, kita dapat menggabungkannya dengan mix-blend-modedan menghilangkan kontras:

Lihat Pena Monoton-ing Gambar oleh Chris Coyier (@chriscoyier) di CodePen.

Amelia Bellamy-Royds juga menggunakan filter warna SVG untuk melakukan ini, yang memiliki jumlah kontrol yang luar biasa:

Lihat Filter Pena SVG Abu-abu -> Balikkan Warna Monokrom oleh Amelia Bellamy-Royds (@AmeliaBR) di CodePen.