Een afbeelding monotoon maken met CSS - CSS-trucs

Anonim

U kunt altijd een filter op een element toepassen om het monotoon in grijstinten te maken:

Zie de Pen Monotoon maken van een afbeelding door Chris Coyier (@chriscoyier) op CodePen.

Als je dat in een container met een achtergrondkleur plaatst en de dekking verlaagt, kun je een gekleurd monotoon effect krijgen:

Zie de Pen Monotoon maken van een afbeelding door Chris Coyier (@chriscoyier) op CodePen.

Maarten van der Velde schreef in om te zeggen dat in plaats van de ondoorzichtigheid te verlagen, we het kunnen combineren met mix-blend-modeen het contrast kunnen uitblazen:

Zie de Pen Monotoon maken van een afbeelding door Chris Coyier (@chriscoyier) op CodePen.

Amelia Bellamy-Royds behandelde ook het gebruik van SVG-kleurenfilters om dit te doen, wat een verbazingwekkende hoeveelheid controle heeft:

Zie de Pen SVG-filters Grijs -> Monochrome kleur omkeren door Amelia Bellamy-Royds (@AmeliaBR) op CodePen.