Created
June 6, 2012 07:30
-
-
Save rezigned/2880430 to your computer and use it in GitHub Desktop.
Apply greyscale to an image
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* http://snipplr.com/view/63328/ | |
* | |
* First create a file filters.svg with the following contents | |
<?xml version="1.0" encoding="UTF-8"?> | |
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" | |
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> | |
<svg version="1.1" baseProfile="full" 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> | |
*/ | |
img { | |
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */ | |
filter: gray; /* IE5+ */ | |
-webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */ | |
} | |
img:hover { | |
filter: none; | |
-webkit-filter: grayscale(0); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment