With advancements in the standards of Cascaded Style Sheets (CSS), doing a number of things in web design and development is becoming increasingly easier. The latest specification, CSS3, has brought a lot of new features. However, browser makers are yet to come to a consensus on implementing the same standards. One of the new features of CSS is to allow implementation of filters. This feature has made it very easy to display a colored image as grayscale or black and white (color saturation). Let’s see how this is done.
If you do enough web browsing, you must have seen dull images that spring to colored life when you take your mouse over them. Earlier this trick was played using two versions of the same image –one colored and the other one color saturated (i.e. grayscale). Then using background positioning on mouse over different images used to be displayed.
But now you don’t need to create two versions of the image because you can use the colored version and turn it grayscale on-the-fly.
SEE ALSO: I recently published about adding mic icon in the Input Box and Textarea
Most of the major web browsers now support grayscaling with CSS –albeit in different ways. Internet Explorer 10 and above support this feature only with SVG images. Here is the CSS code you can use to do cross-browser grayscaling of colored images.
#myimg{
/* For Firefox 10 and above, Firefox for Android */
filter: url("data:image/svg+xml;utf8,<svg></svg>#grayscale");
/* For Internet Explorer 6 to 9 */
filter: gray;
* For Chrome 19+, Safari 6+, Safari 6+ on iOS */
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);}
}
As you can WebKit browsers (like Chrome, and Safari) make it the easiest to take the colors away from a colored picture. Firefox is such a good browser but unfortunately it binds the web developers to this ugly looking code. Anyway, we can hope for betterment and in the meanwhile the above code will do the trick for you.
And yes, setting grayscale to 0% in filter properties will bring the colors back. You can use this setting on mouse roll-over to create a nice effect.
Let me know how you liked it and if you face any trouble or find a better solution -don’t forget to comment and share it with me! Cheers!
Leave a Reply