Filter support has been available for some time, at least within the major desktop browsers, although we still need to use the -webkit- vendor prefix support, as we are not yet entirely prefix free:
Note
Information about the preceding image is taken from the CanIUse website, at http://caniuse.com/#feat=css-filters.
The beauty about using these methods is that they are very simple to apply; we're not forced to spend hours reworking images if clients decide to change their minds! We can apply and remove the styles using jQuery with ease, which helps keep the styles separate from our markup.
Manipulating images can get very complex – in fact, to cover the math involved, we could probably fill a book in its own right! Instead, we'll begin with a simple recap of using CSS3 filters, before moving onto creating more complex filters, and finishing with a couple of demos that help capture images from two unlikely sources.
Intrigued? All will become clear towards the end of this...