These days, CSS can do much more than style fonts and add borders around elements. For example, you can apply colour, brightness and other tweaks to images, live, without having to resort to a photo editor.
CSSCO provides markup and examples for a range of filters, including HB2, ACG, B5 and X1. Rather than making such changes directly and having to host additional files, you can just apply the filters dynamically via JavaScript and CSS.
As with all browser-based effects, it does come with a few caveats, which you should keep in mind depending on what systems you want to support:
Unfortunately, IE & Edge browsers, as well as Opera Mini do not support filters and blend modes. Safari (desktop & IOS ) does not support the hue, saturation, color, and luminosity blend modes, but this should not affect the CSSCO filters much, if at all.
You can a more detailed breakdown of browser support by hitting up Can I Use, specifically the pages on blending and filters.
CSSSO [Official site]
Comments
One response to “Easily Apply Photo Filters To Your Web Images Using CSS”
Interesting and quick to use.