Monotonizează o imagine cu CSS - CSS-Tricks

Anonim

Puteți aplica întotdeauna un filtru unui element pentru a-l face monoton în sensul tonurilor de gri:

Vedeți Pen Monotone-ing o imagine de Chris Coyier (@chriscoyier) pe CodePen.

Dacă puneți acest lucru într-un recipient cu o culoare de fundal și reduceți opacitatea, puteți obține un tip de efect monoton colorat:

Vedeți Pen Monotone-ing o imagine de Chris Coyier (@chriscoyier) pe CodePen.

Maarten van der Velde a scris pentru a spune că, mai degrabă decât să reducem opacitatea, îl putem combina cu mix-blend-modeși contrasta contrastul:

Vedeți Pen Monotone-ing o imagine de Chris Coyier (@chriscoyier) pe CodePen.

Amelia Bellamy-Royds a acoperit, de asemenea, folosind filtre de culoare SVG pentru a face acest lucru, care are o cantitate uimitoare de control:

Vedeți Filtrele SVG Pen Gri -> Inversați culoarea monocromă de Amelia Bellamy-Royds (@AmeliaBR) pe CodePen.