Experimental CSS Shaders Bring Photoshop Filters to the Web

"blendmodes" width="580" height="400">

Blend mode example in Chrome Canary. Image: Screenshot/Webmonkey.

Chrome?s experimental Canary channel and Safari?s WebKit nightly builds both now support all of the Photoshop-inspired blend modes for CSS Shaders, part of Adobe?s effort to bring Photoshop-style filter tools to the web.

To see the new blend modes in action, grab a copy of the latest Chrome Canary or WebKit nightly builds, enable the CSS Shaders option in about:flags and point your browser to Adobe?s sample code over on Codepen. Previously, CSS Shaders required a special build of WebKit.

The new blend mode support is part of Adobe?s CSS Shaders proposal, which recently became part of the W3C?s CSS Filter Effects specification. There are two types of shaders in the spec, CSS fragment shaders, which provide features similar to what Photoshop?s blending modes offer, and CSS vertex shaders, which handle the 3D animation filters we?ve showcased in the past.

The blending modes currently available include all the familiar options you?ll find in Adobe Photoshop, such as multiply, screen, overlay, luminosity and other photographer favorites.

For more details and links to the corresponding specs, be sure to check out this post from Max Vujovic, who is working on the CSS Filters implementation in WebKit and Blink.

As the CSS Filter Effects specification progresses through the standardization process (and stabilizes), hopefully other browsers will add support as well.

crawled from : Webmonkey