Login / Join
Grayscale an Image with CSS
submitted on 11/04/2013 by
Codicode
+ infos
Config
Embed
Share
Grayscale an Image with CSS
by
Codicode
Converting a colored image to black and white (desaturate) with CSS, by using CSS filters (webkit, chrome, safari), IE filter and SVG filter for firefox.
by Malek Chtiwi.
http://www.codicode.com
Framework 1 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
Framework 2 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
+ Js file(s) :
+ Css file(s) :
Apply
Link :
Direct http link :
Fork button :
Html code :
Embed preview :
Copy the following html code to your page to embed the preview,
To include many previews on a single page, just repeat the first line.
You can change the width, height and border color (bcolor).
<div class="refork-widget" code="1b8" style="width:100%;height:200px;" bcolor="#ccc"></div>
<script type="text/javascript" src="//snippet.run/d/z.js"></script>
HTML
<table> <tr> <td>Original</td> <td>Grayscaled</td> <td>Grayscaled on hover</td> </tr> <tr> <td> <img src="http://www.codicode.com/img/authors/chtiwi_malek/pic3.jpg" /> </td> <td> <img class="grayscale" src="http://www.codicode.com/img/authors/chtiwi_malek/pic3.jpg" /> </td> <td> <img class="hoverGS" src="http://www.codicode.com/img/authors/chtiwi_malek/pic1.jpg" /> </td> </tr> </table>
CSS
/* by Malek Chtiwi. http://codicode.com */ body { background-color:#fff; color:#000; } table{ margin: 5px auto 0px auto; } td { text-align:center; padding:1px; } img.grayscale, img.hoverGS:hover { /* this is for Firefox 3.5+, Firefox mobile */ filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'gs\'><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>#gs"); /* for IE6+ */ filter: gray; /* for Webkit browsere, Chrome 19+, Safari 6+ ... */ -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -ms-filter: grayscale(1); -o-filter: grayscale(1); filter: grayscale(1); }
Javascript
©2013 Copyright snippet.run
Privacy
-
Terms of use
-
About
-
Contact