본문 바로가기

Creation/Design

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.




Another Solution


 


  Notice the another plugin named 'Black and White'.