CSS渲染器：将Photoshop Filters效果带入网络

谁借莪１个温暖的怀抱￠ 2022-04-25 01:26 154阅读 0赞

日期：2013-5-24  来源：[GBin1.com][]

![CSS渲染器：将Photoshop Filters效果带入网络][CSS_Photoshop Filters]

Chrome的Canary频道和Sarafi的WebKit nightly build，这两者现在都已经支持CSS渲染器的Photoshop风格混合模式，Adobe将Photoshop样式的过滤工具带入了网络。

要应用最新的混合模式，你需要获取最新的[Chrome Canary][]版本或者是[WebKit nightly builds][]，在about:flags中启用CSS Shaders（CSS渲染器）选项，然后访问[Adobe的示例代码][Adobe]。 以往，CSS渲染器需要一个特殊构建的Webkit，Adobe的Alan Greenblatt指出，Chrome对CSS渲染器的支持在版本25上基本稳定，但是你仍然需要在flag中启用它。但是如果你想要玩转新的混合模 式，你需要Chrome的Canary版本或者是Webkit nightly版本。

支持新的混合模式，是Adobe的CSS渲染器企划的一部分，最近也成为了W3C的CSS滤镜效果规范的一部分。在规范中有两种类型的渲染器，一种是CSS片段渲染器，它提供了与Photoshop混合模式相似的特效，另一种是CSS顶点渲染器，它处理3D动画过滤器。

目前可用的混合模式，包括所有在Adobe Photoshop中你所熟悉的选项，包括乘法，屏幕，叠加，广度和其它摄影师最爱的选项。

关于相应规范的更多细节，可以阅读[Max Vujovic的博文][Max Vujovic]，该作者Max Vujovic是致力于将CSS过滤器实施在WebKit和Blink上。

由于CSS滤镜效果规范通过标准化进程来进步，希望其它的浏览器也可以加入支持。

> 网络出处：http://www.webmonkey.com/2013/04/experimental-css-shaders-bring-photoshop-filters-to-the-web/

via [ Nelly@极客标签][Nelly]

来源：[CSS渲染器：将Photoshop Filters效果带入网络][GBin1.com]

[GBin1.com]: http://www.gbin1.com/internet/news/20130524-css-filter-effect/
[CSS_Photoshop Filters]: http://www.gbin1.com/internet/news/20130524-css-filter-effect/title.jpg
[Chrome Canary]: http://www.gbtags.com/gb/share/1087.htm#www.google.com/intl/en/chrome/browser/canary.html
[WebKit nightly builds]: http://nightly.webkit.org/
[Adobe]: http://codepen.io/adobe/pen/nygsD
[Max Vujovic]: http://maxvujovic.blogspot.com/2013/04/all-blend-modes-for-css-custom-filters.html
[Nelly]: http://www.gbtags.com/gb/share/1087.htm