Μονοτονική εικόνα με CSS - CSS-Κόλπα

Anonim

Μπορείτε πάντα να εφαρμόσετε ένα φίλτρο σε ένα στοιχείο για να το κάνετε μονότονο με την έννοια της κλίμακας του γκρι:

Δείτε το στυλό Monotone-μια εικόνα του Chris Coyier (@chriscoyier) στο CodePen.

Εάν το τοποθετήσετε σε ένα δοχείο με χρώμα φόντου και μειώσετε την αδιαφάνεια, μπορείτε να πάρετε ένα έγχρωμο μονότονο εφέ:

Δείτε το στυλό Monotone-μια εικόνα του Chris Coyier (@chriscoyier) στο CodePen.

Ο Maarten van der Velde έγραψε για να πει ότι αντί να μειώσουμε την αδιαφάνεια, μπορούμε να το συνδυάσουμε mix-blend-modeκαι να σβήσουμε την αντίθεση:

Δείτε το στυλό Monotone-μια εικόνα του Chris Coyier (@chriscoyier) στο CodePen.

Η Amelia Bellamy-Royds κάλυψε επίσης τη χρήση φίλτρων χρώματος SVG για να το κάνει αυτό, το οποίο έχει έναν καταπληκτικό έλεγχο:

Δείτε το Pen SVG Filters Gray -> Invert Monochrome Color από την Amelia Bellamy-Royds (@ AmeliaBR) στο CodePen.