How to Make Images Black&White with CSS3

67 Flares 67 Flares ×


Achieving black and white look in normal images have been simplified with CSS3. The effect is achieved by applying a desaturate filter. There are many other methods as to get the same desaturated effect in web browsers, for example, if you are working with JQuery, you can use Greyscale.js, but CSS3 leaves it very simple to use and apply.

Also note that CSS3 right now is supported by all major browsers like FireFox, Chrome, Safari and Opera. Even IE now supports some of the CSS3 effects and the rest can be applied by some “css hacks!”


Preparing CSS3

To start it off we’ll create a filter with grey scale attribute. And for this filter to be compatible with the major browsers, we’ll add some “vendor prefixes” like “webkit” etc. etc.

So combining all this into one block of code we’ll get this;

         img.desaturate {       filter: grayscale(100%);      -webkit-filter: grayscale(100%);      -moz-filter: grayscale(100%);      -ms-filter: grayscale(100%);      -o-filter: grayscale(100%);      }  

Using this CSS with Image

Now to use this CSS with your images we’ll assign the image a class of “desaturate.”
For example,

  <img src=test_image alt="" class=desaturate>  

Conclusion

I haven’t had the time to host a demo page for this effect, maybe in future. Here are some screenshots. The result when applied looks like this

This is pretty much it. If you found this useful leave a comment

=)
67 Flares Twitter 0 Tweet Facebook 4 Google+ 3 StumbleUpon 60 Pin It Share 0 67 Flares ×