Web Development optimize

CSS3 filter effects: Grayscale, invert, sepia, and more

Ryan Boudreaux demonstrates some applications of various CSS3 filter effects, including grayscale, sepia, saturation, and combined effects.
In my previous piece on CSS3 Filter Effects, I reviewed how the filters have evolved from the SVG format to the current specification and demonstrated how several of the effects can be implemented. I showed examples of the blur, brightness, contrast, and drop shadow filter effects. In today's segment, I will continue with reviewing the CSS3 filter effects including grayscale, hue rotate, invert, opacity, saturate, sepia, and combined effects, which include creating a black and white element. And lastly, I will review the current browser support for the CSS3 filter effects. A download of the HTML and CSS files used in the demonstrations is available at the end of this piece

Grayscale

Setting the grayscale to an image is done by percentages as shown in the example CSS code snippet below and the side-by-side comparison as displayed in Figure B (Google Chrome Version 22.0.1229.94 m).

Grayscale set to fifty percent:

/* Grayscale Filter Effect */
.grayscale {
       -webkit-filter: grayscale(50%);
}

Figure B

Hue rotate

Setting the hue rotation is a filter effect to alter the hue of an image by rotating the RGBA values around a color matrix. The setting is made with setting the degree of the rotation from 0 degrees to 360 degrees. The hue rotation example is shown in the example CSS code snippet below and the side-by-side comparison as displayed in Figure C.

Hue rotation set to 180deg:

/* Hue Rotation Filter Effect */
.huerotation {
       -webkit-filter: hue-rotate(180deg);
}

Figure C

Invert

The invert filter effect reverses the hue, saturation, and brightness values of the content of the object and is expressed as a percentage. The invert example is shown in the example CSS code snippet below and the side-by-side comparison as displayed in Figure D.

Invert set to 100%:

* Invert Filter Effect */
.invert {
-webkit-filter: invert(100%);
}

Figure D

Opacity

The opacity filter effect is measured by the level of range from completely transparent to completely opaque, and is measured from 0 to 100, with 0 being completely transparent and 100 being completely opaque. The opacity example is shown in the CSS code snippet below and the side-by-side comparison as displayed in Figure E.

Opacity set to fifty percent:

/* Opacity Filter Effect */
.opacity {
       -webkit-filter: opacity(50%);
}

Figure E

Saturate

The saturate filter is used to vary the intensity of color in the element. A saturated element has overly bright colors; you can increase saturation on under-exposed images, or vice versa. The amount of saturation can be expresses in percentages, where a value of 0% is completely un-saturated, and a value of 100% leaves the input unchanged. Values above 100% increase the saturation levels. This example shows the saturation levels for the right side image are set to 250% as displayed in Figure F as shown in Google Chrome Version 22.0.1229.94 m.

The CSS code snippet:

/* Saturate Filter Effect */
.saturate {
       -webkit-filter: saturate(250%);
}

Figure F

Sepia

The sepia filter effect is a brownish-grey to dark yellowish-brown tone imparted to an element and is expressed in percentages from 0% to 100%. The example displayed below shows the CSS3 sepia filter effect on the right side image with a setting of 100%.

/* Sepia Filter Effect */
.sepia {
       -webkit-filter: sepia(100%);
}

Figure G

Combine effects

You can also combine filter effects with very good results; you can create black and white effects with a combination of grayscale, brightness, and contrast among others.

Black and white combined effect

Using the following CSS filter effects in combination will create a crisp black and white effect as displayed in Figure H.
/* Combined Filter Effects - Black and White */
.blackwhite {
         -webkit-filter: grayscale(100%) brightness(10%) contrast(100%);
}

Figure H

Browser support

As you might have noticed from the vendor prefix in the CSS code snippets, Webkit is currently the only supported layout engine for CSS filter effects. WebKit powers the Apple Safari and Google Chrome browsers. Current browser and user agent support can be found from the "Can I use..." table for CSS3 Filter Effects; it shows that Chrome 21+, Safari 6+, and Blackberry Browser 10+ fully support the filter effects.

Don't put away that image editing software just yet; however, you can see that the future does look bright for coding your CSS3 filter effects with styles and stylesheets.

The example HTML and CSS files are available for download.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

6 comments
mandysutton
mandysutton

This looks great but isn't IE still the most popular browser? What's the point of deploying CSS3 if it's not supported in most people's browsers?

RJBoudreaux
RJBoudreaux

Google Chrome surpassed IE in May of this year and as of Sept 2012 Chrome makes up 34.21% of global stats while IE now a close second at 32.7%. If you look back to October 2011 IE was at 40.18% with Chrome at 25%. While IE has been making a steady dive, Chrome has been making steady gains. http://gs.statcounter.com/

us-english
us-english

Well, RJ, you should then properly title your article: "Webkit CSS Filter Effects"

mandysutton
mandysutton

Well that's great news - can't imagine how I missed that - Thanks Unfortunately the majority of the people I develop for still use IE. I'm trying to re-educate them but it's a slow process. Still - I don't fancy developing a site that 32.7% of users won't be able to take advantage of. Seems I have to wait a while until I can play with the shiny new toys:(

RJBoudreaux
RJBoudreaux

Sure, you could think of it as "webkit" today, but soon vendor prefixes will be done away with as all browsers move toward adoption of HTML5 and CSS3.