Originally published at: http://www.sitepoint.com/build-simple-image-editor-with-css-filters-jquery/
CSS Filters are a powerful tool to manipulate images using just CSS. Once implemented in all browsers, you will be able to apply effects to images without any need for external software.
CSS filters constitute a huge topic in themselves and I am not going to discuss all the available filters here. What I am going to talk about is how you can use multiple filters to produce a complex effect – and make your own image editor.
If you want to dig deeper, feel free to check out Filters on MDN or Understanding CSS Filter Effects, on HTML5 Rocks, both of which cover the general topic of filters in more detail.
CSS Filter Syntax
To write a filter effect in your CSS, just use filter:
and name of the filter (like grayscale
, blur
, etc.).
.example { filter: <filter -function> [</filter><filter -function>]; }
Here’s how you would apply a 90% grayscale
filter to an element:
.example { filter: grayscale(90%); }
And in the case of webkit browsers, you’ll need a prefix:
.example { -webkit-filter: grayscale(90%); }
The value of a filter’s property generally falls between 0 and 1, but there are a few exceptions. For example, the blur
property uses pixel units and can be any whole number. Also, the hue-rotate
filter value is a whole number with a ‘deg’ unit.
.example { filter: blur(10px); } .example-2 { filter: hue-rotate(90deg); }
Combining Multiple Filters
You may combine any number of functions to manipulate the rendering. However, if you want to apply more than one filter effect, you can do so by space separating them in a single declaration. Here’s how you’d combine grayscale
and blur
: