CSS3 Filter - Invert support in Internet Explorer 10+
CSS3 introduced one of the very fancy features to do some creative things – “Filters”. Now we can make our images grayscale, blur it, change hues etc – everyone is happy about it.
Here is a list of the browsers that support this feature:
- Chrome (prefixed)
- Firefox
- Safari
- Opera
and then we have Internet Explorer which still hasn’t put it on the shipping list yet. At the time I am typing this – Internet Explorer 11 also doesn’t support CSS3 Filters.
Statements from IE:
- https://msdn.microsoft.com/en-us/library/ms530752(v=vs.85).aspx
- https://developer.microsoft.com/en-us/microsoft-edge/platform/catalog/?q=specName%3Afilter-effects-1
Update: Microsoft Edge has shipped this feature as of Build 10586+
I had a requirement to invert white images into black. This was when the user switches themes on the website. Hence created this small useful plugin that takes the current image and uses an SVG filter solution to invert it into black.
InvertImages
Usage is pretty simple.
Let us say you have a white image:
<img src="images/icon-home.png" alt="Home Page" class="icon-home">And you wish to change this image into black, all you have to do is:
$("img.icon-home").invertImages();For more options, please read this Wiki: InvertImages jQuery Plugin Wiki