advanced code snippet search

Posted By

a1ias on 02/14/12


Tagged

css greyscale svg


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

lfatr


Convert an image to grayscale in HTML/CSS

 / Published in: CSS
 

URL: http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css

cross-browser solution

Expand | Embed | Plain Text 
  1. /*
  2.  * First create a file filters.svg with the following contents 
  3. <?xml version="1.0" encoding="UTF-8"?>
  4. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  5.    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  6. <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
  7.   <filter id="grayscale">
  8.     <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"/>
  9.   </filter>
  10. </svg>
  11. */
  12.  
  13. img {
  14.     filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
  15.     filter: gray; /* IE5+ */
  16.     -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
  17. }
  18.  
  19. img:hover {
  20.     filter: none;
  21.     -webkit-filter: grayscale(0);
  22. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: karlhorky on September 2, 2012

SVG File can be eliminated with the use of a data-uri. See blog post for more details: http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html

img.grayscale { filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 3.5+ / filter: gray; / IE6-9 / -webkit-filter: grayscale(100%); / Chrome 19+ & Safari 6+ */ }

Posted By: karlhorky on September 2, 2012

The data-uri was stripped from my post. See the full blog post for the correct code: http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html

You need to login to post a comment.