CSS Grayfilter with crossbrowsing

  Grayfilter makes image gray. With CSS, any images are turned into gray simply. It's easy to apply, and cool. Many websites have already apply this filter.

Here is the trick:

	
img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
} 
	

Source: http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html

  It's a cross-browsing code, except IE10 and IE11. Every problem is occurred with IEs. Fortunately, they support the SVGs, so it's possible to make them work. The github project named 'gray' has been distributed with full cross-browsing.

Gray: https://github.com/kununu/gray

Another Solution

 

  Notice the another plugin named 'Black and White'.

http://gianlucaguarini.com/canvas-experiments/jQuery.BlackAndWhite/demo.html