Chromium adds CSS filter-based image modification

From version 19, the open source Chromium and Google's Chrome browsers will be the first browsers to offer CSS filter capabilities. A draft filter specification was released in late March. This week, Stephen White posted an article entitled Accelerated CSS Filters Landed in Chromium on the Chromium blog, in which he announced that Chromium/Chrome would support the often single-line (see below) style sheet rules.

The specification provides the following filter functions: grayscale (), sepia(), saturate(), hue-rotate(), invert(), opacity(), brightness(), contrast(), blur() and drop-shadow(). To allow style sheet rules to be applied, elements which are to be displayed in modified form on a web page must be identifiable using a class or ID:

<img src="flower.sm2.jpg" alt="Original: Allium"/> 

<img class="brown"  src="flower.sm2.jpg" 

alt="Allium modified with sepia"/> 

The four photos in the figure show the original image and three copies modified prior to output using the following CSS rules:

img.brown { -webkit-filter: contrast(200%) sepia(100%); } 

img.blurred { -webkit-filter: contrast(200%) blur(3px); } 

img.hue { -webkit-filter: contrast(200%) hue-rotate(90deg); }[/pre] 

As can be seen from the above rules, these functions take differing parameters and can be combined. Further examples can be found on HTML5Rocks and an interactive application is available on the site Abstract Painting with CSS Filters. David Walsh has used the functions on his CSS Filter web page to provide an interactive illustration of the effects that can be achieved.

Looking at the authors of the draft filter specification – an Adobe, an Apple and an Opera employee – suggests that other browsers are unlikely to be far behind. Microsoft started using SVG in place of VML and CSS in place of DX filters back in December 2011. The company also removed DX filters from the preview version of Internet Explorer 10 (in the internet zone) in early June.

(ehe)