To use those filters, download the colofilter.css
file, add it to the head
of your document :
<link href="path/to/colofilter.css" rel="stylesheet" type="text/css">
Then to use the filters, use the proper classes on your elements, and that's it!
<div class="blend-blue">
<img src="image.png"/>
<span>lorem</span>
</div>
Examples (click the images to copy the classes):
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
lorem
Unfortunately, it will not work with IE & Edge browsers, as well as Opera Mini, and Safari (desktop & IOS ) is not supporting the hue, saturation, color, and luminosity blend modes.
See compatibility for : mixblendmode filters
A polyfill is on it's way!