Skip to content

Instantly share code, notes, and snippets.

@yangg

yangg/demo.html

Last active December 16, 2015 12:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yangg/5432472 to your computer and use it in GitHub Desktop.
Save yangg/5432472 to your computer and use it in GitHub Desktop.
Download ZIP
Cross-Browser Grayscale with CSS
Raw
demo.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=2.0" />
<title>Cross-Browser Grayscale with CSS</title>
<link rel="stylesheet" href="gray.css" />
<style>
body { text-align: center; }
p { color: #f00; font-size: 2em; }
</style>
</head>
<body>
<img src="google_images.gif"/>
<p>Red text</p>
</body>
</html>
Raw
gray.css
html {
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, iOS Safari 6+ */
filter: gray; /* IE6-9 */
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 */
}
Raw
nginx.conf
# http://wiki.nginx.org/HttpSubModule
http {
sub_filter '</head>' '<style>html { -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, iOS Safari 6+ */
filter: gray; /* IE6-9 */
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 */ }
</style></head>';
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment