Monotona un'immagine con CSS - Trucchi CSS

Anonim

Puoi sempre applicare un filtro a un elemento per renderlo monotono nel senso della scala di grigi:

Guarda la penna Monotone-ing an Image di Chris Coyier (@chriscoyier) su CodePen.

Se lo metti in un contenitore con un colore di sfondo e abbassi l'opacità, puoi ottenere un tipo di effetto monotono colorato:

Guarda la penna Monotone-ing an Image di Chris Coyier (@chriscoyier) su CodePen.

Maarten van der Velde ha scritto per dire che invece di abbassare l'opacità, possiamo combinarla mix-blend-modee soffocare il contrasto:

Guarda la penna Monotone-ing an Image di Chris Coyier (@chriscoyier) su CodePen.

Amelia Bellamy-Royds ha anche parlato dell'uso di filtri colorati SVG per fare questo, che ha una quantità incredibile di controllo:

Vedi i filtri SVG della penna Grigio -> Inverti colore monocromatico di Amelia Bellamy-Royds (@AmeliaBR) su CodePen.