Display Images as Grayscale with CSS Filters
CSS filters aren't yet widely supported but they are indeed impressive and a modern need for web imagery. CSS filters allow you to modify the display of images in a variety of ways, one of those ways being displaying images as grayscale.
Doing so requires the most minimal of CSS:
img.bw {
filter: grayscale(1);
}
You can even animate an image to or from grayscale:
img.bw {
filter: grayscale(0);
}
img.bw.grey {
filter: grayscale(1);
transition-property: filter;
transition-duration: 1s;
}
CSS filters allow much more than just grayscale adjustments, so if you haven't taken the time, please play around with my CSS filter sandbox. Remember that if the user chooses to download the image, it is downloaded in its original colored displays, but for online display purposes, CSS filters do the trick!
![Create Namespaced Classes with MooTools]()
MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does. Many developers create their classes as globals which is generally frowned up. I mostly disagree with that stance, but each to their own. In any event...
![How I Stopped WordPress Comment Spam]()
I love almost every part of being a tech blogger: learning, preaching, bantering, researching. The one part about blogging that I absolutely loathe: dealing with SPAM comments. For the past two years, my blog has registered 8,000+ SPAM comments per day. PER DAY. Bloating my database...
![Introducing MooTools NextPrev]()
One thing I love doing is duplicating OS functionalities. One of the things your OS allows you to do easily is move from one item to another. Most of the time you're simply trying to get to the next or the previous item.
![Create a Twitter AJAX Button with MooTools, jQuery, or Dojo]()
There's nothing like a subtle, slick website widget that effectively uses CSS and JavaScript to enhance the user experience. Of course widgets like that take many hours to perfect, but it doesn't take long for that effort to be rewarded with above-average user retention and...
I knew about CSS filters, but what always restrained me to use them is that they’re limited to Webkit/Blink browsers. Firefox supports just the url syntax.
Many designers love them and for a reason. I just wish they were more widely supported.
I cant find the difference between the 3 images. All images seems to be the same color! Is this a browser problem (firefox) or i don’t see it?
Yes, it doesn’t display the CSS filters effect in Firefox and also Opera… Hopefully it will be cross-browser in the future.
I haven’t used css filters so far and this article fits perfectly for a design I want to implement.
Thanks so much, great stuff
Is there a Firefox workaround for this?
Grayscale is even better appreciated when used in action. It works perfectly on latest version of Chrome and firefox as seen on http://www.myweeblytricks.com/2014/09/weebly-tricks-72-grayscale-image.html
Unfortunately it does not work in IE11.
Check this, it worked for me perfectly: https://chrome.google.com/webstore/detail/grayscale-black-white-col/cjimlckjgclgboeebpjlipmokolejppk?hl=en (Chrome only) Using this app I can convert any web page to black & white color scheme.