Quick Tip: Have You Heard About CSS Filters Yet?

Over the years CSS has been providing us with more and more ways to accomplish things without an image editor, whether it be 3D transforms or border radius. One of the missing pieces to this puzzle, though, is the ability to saturate, blur, or otherwise filter a photograph with just CSS.

To solve this problem, the W3C has come up with CSS Filters. Using filters we can accomplish many effects which are applicable not only to images, but text and HTML too!

Filter Support

The CSS filter property works just like any other CSS property. However, as usual browser support is pretty thin on the ground. The only browsers that support filters are webkit based (Safari and Chrome). For this reason we need to use browser prefixes. Although webkit is the only engine to support filters, we will use all browser prefixes as it is best practice.

Using Filters

There are a variety of values you can use. When using filters remember that not all your visitors will be able to see them, so it’s best not to use them in a way that is necessary to the user experience. Here’s an example, in which we set an image to have a 5px Gaussian blur:

img 
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-ms-filter: blur(5px);
	-o-filter: blur(5px);
	filter: blur(5px);

CSS Gaussian Blur

Filters have much wider usages though, another example is using filters to grayscale an image:

img 
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	--filter: grayscale(100%);

CSS Grayscale

Pretty simple, huh? Grayscale and blur are only two of a huge range of filters. If you want to learn more you can check out a more comprehensive list of filters here. Why not experiment a little?

|Over the years CSS has been providing us with more and more ways to accomplish things without an image editor, whether it be 3D transforms or border radius. One of the missing pieces to this puzzle, though, is the ability to saturate, blur, or otherwise filter a photograph with just CSS. To solve this problem, […]}

Read more : Quick Tip: Have You Heard About CSS Filters Yet?