Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
RealcomBiz
Pin It

CSS Filter: Convert Colored Images to Grayscale, Sepia, Saturate, Invert and more

by Durodola Ridwan | Tuesday, September 16, 2014 | 6 Comments

With advancements in the standards of Cascaded Style Sheets (CSS), doing a number of things in web design and development is becoming increasingly easier and fun. The latest specification (CSS3) has brought lots of new features, among the best is CSS filters. Filters allow you to modify the display of images in a variety of ways, some of those ways of displaying images as black and white, grayscale, sepia, invert, saturate, hue-rotate and more. Though, this feature is not yet widely supported, but they are indeed impressive and a modern need for web imagery.



Black and White

With the grayscale property, we can archive a black nd white image by setting its value to 100% or 1. The grayscale filter is supported in most of the modern browsers, specifically in Chrome 18+, Safari 6+, Opera 17+ with different vendor prefixes. But we can still provide fallback for older browsers. Our final code will look like this:

.blackandwhite {
-webkit - filter: grayscale(1); /* Older webkit versions */
-webkit - filter: grayscale(100%);
-moz - filter : grayscale (100%);
-ms -filter : grayscale(100%);
-o - filter : grayscale(100%);
filter: grayscale(100%);
filter: gray; /* IE 6-9 */
/* 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\'><feColorMatrixtype=\'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");
}



No CSS fallbacks is available for IE10+ yet, therefore you have to use a different solution like grayscale.js or similar.


Grayscale

With the same grayscale property we can archive that grayscale look, but this time we are setting the value to 50%.

.grayscale {
       -webkit-filter: grayscale(50%);
}



Sepia

Sepia is a reddish-brown color, named after the rich brown pigment derived from the ink sac of the common cuttlefish Sepia. We can archive this tone on any web image with sepia CSS filter and its value is expressed in percentage ranging from 0-100.

.sepia {
       -webkit-filter: sepia(100%);
}



Invert

The Invert command inverts all the pixel colors and brightness values in the current layer, as if the image were converted into negative. Dark areas become bright and bright areas become dark. Hues are replaced by their complementary colors.

Note: This command only works on layers of RGB and Grayscale images. If the current image is Indexed, the menu entry is insensitive and grayed out.

.invert {
-webkit-filter: invert(100%);
}



Saturate

The saturate filter is used to vary the intensity of color in an image. A saturated element has overly bright colors. You can increase saturation of under-exposed images, or vice versa.

A change in saturation normally has a more noticeable effect on vibrant colors, less on dull colors or colors that are almost neutral and no change on black and white images.
The amount of saturation can be expressed in percentage, where a value of 0% is completely un-saturated, and a value of 100% leaves the image unchanged. Values above 100% increase the saturation levels.

.saturate {
       -webkit-filter: saturate(200%);
}



Hue-rotate

Hue-rotate is an exciting filter effect that alters the hue of an image by rotating the RGBA values around a color matrix.
Applies a hue rotation on the input image. The value of ‘angle’ defines the number of degrees around the color circle the input samples will be adjusted. A value of 0deg leaves the input unchanged. If the‘ angle’ parameter is missing, a value of 0deg is used. Though there is no maximum value, the effect of values above 360deg wraps around.

.huerotate {
       -webkit-filter: hue-rotate(180deg);
}



Right now a number of the CSS filter effects are working perfectly well in Webkit based browsers and Mozilla. We expect to see them soon in Opera as well as IE10. As the specification is still under development, you might need to future-proof your work by including all the browsers vendor prefixes like so:

-webkit - filter: effect();
-moz - filter : effect();
-ms -filter : effect();
-o - filter : effect();

Note: If any user chooses to download the image, it is downloaded in its original colored displays.


Other resources




Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

6 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. coolsquare you are grart, the laist one just worked for me

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. To compose a decent article, great information is required. Furthermore, a great analyst can compose a best article. That sort of master authors is the fundamental particular of best essay writing service company . Also, accordingly understudies like their service in particular.

    ReplyDelete
  4. iOS 10 is the tenth major release of the iOS operating system developed by Apple Inc., being the successor to iOS 9.iOS 10 improves and adds upon user experience system-wide including 3D Touch expansion, an updated lock screen, and "widget" support. There are also added features to apps: Messages adds expressive ways to communicate, Maps has been redesigned and extended with third-party functions,Home manages HomeKit-enabled accessories within one place, Photos helps users access algorithmic Memories, and Siri is now compatible with third-party app-specific requests, such as starting workouts, sending IMs, requesting Lyft or Uber and making payments.
    To Get Latest IOS version called IOS 10 Download free from CydiaNerd.

    ReplyDelete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger