日期：2013-5-24 来源：GBin1.com
Chrome的Canary频道和Sarafi的WebKit nightly build，这两者现在都已经支持CSS渲染器的Photoshop风格混合模式，Adobe将Photoshop样式的过滤工具带入了网络。
要应用最新的混合模式，你需要获取最新的Chrome Canary版本或者是WebKit nightly builds，在about:flags中启用CSS Shaders（CSS渲染器）选项，然后访问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是致力于将CSS过滤器实施在WebKit和Blink上。
由于CSS滤镜效果规范通过标准化进程来进步，希望其它的浏览器也可以加入支持。
网络出处：http://www.webmonkey.com/2013/04/experimental-css-shaders-bring-photoshop-filters-to-the-web/
via Nelly@极客标签
相关推荐
CSS3Ps 是一款值得推荐的插件，可以将 Photoshop 中的矢量图形，全部转换为 CSS3 样式的图形，这样就可以把大量的时间放到设计上了，而不是还在纠结那些代码该怎么写。 下载提示：附件包内有两个文件，分别是：...
在本实例中，我们将深入探讨一个基于HTML5和CSS3的3D旋转木马效果相册，这是一个充满吸引力的图片展示方式，能够为用户带来独特的浏览体验。 3D旋转木马效果相册利用了CSS3的transform属性，尤其是rotateY()和...
4. CSS滤镜（Filters）：CSS滤镜可以应用于图像、视频甚至整个网页，以实现各种视觉效果，如模糊、灰度、饱和度调整等。`filter`属性允许我们应用这些效果，增强视觉表现力。 5. CSS阴影（Shadows）：元素可以有内...
可以将photoshop转为CSS代码
Photoshop扩展神器Velositey是前端制作和网页设计领域中的一款强大工具，它极大地提高了设计师的工作效率，尤其在处理Web项目时。Velositey提供了多种版本以适应不同版本的Photoshop，包括velositey-v-2，适用于较旧...
读者通过阅读《CSS权威指南》，不仅可以掌握CSS的技术细节，更能学习到如何将理论应用到实际工作中，解决实际开发中遇到的问题，同时也能了解到CSS的最新进展和发展趋势。这对于前端开发者而言，无疑是一本极具价值...
以下将详细介绍Photoshop在网页设计中的应用。 1. Photoshop的基本功能： - 图像处理：Photoshop提供了丰富的工具，如画笔、橡皮擦、克隆图章等，用于修复、修饰或创造图像。 - 图层管理：通过图层，设计师可以...
在"HTML5 CSS3 专题：3D展示商品信息项目完整实例源码"这个项目中，我们将深入探讨如何利用这两者来创建一个引人入胜的商品3D展示效果。 首先，HTML5引入了许多新的元素，如`<article>`、`<section>`、`<nav>`等，...
4. **网页设计**：Photoshop可制作网页布局设计，设计师能预览页面结构和视觉效果，然后将设计稿转化为HTML和CSS代码。 5. **绘画与数码艺术**：许多画家和艺术家使用Photoshop进行数字绘画，利用各种画笔模拟传统...
标题中的“map-css-filters”指的是一个专门处理CSS过滤器值的JavaScript库，它允许开发者更方便地管理和应用CSS过滤效果。CSS过滤器是CSS3引入的一个特性，用于对元素的视觉表现进行处理，比如模糊、灰度、饱和度...
总的来说，掌握Photoshop特效字体和JavaScript特效的结合使用，将使设计师和开发者能够创造出引人注目且交互性强的网页和图形作品，提升品牌形象，吸引并留住用户。通过学习和实践这些教程，可以不断提升自己的设计...
总的来说，这个项目是将Photoshop的功能与Web技术结合，打造了一个轻量级、易用的在线图片处理工具，为用户提供了一种新的、无需安装的图像编辑方式，同时也为网站运营者提供了潜在的流量吸引手段。
Photoshop是Adobe公司开发的一款强大的图像处理软件，广泛应用于平面设计、摄影后期、网页设计等领域。本资源包“photoshop素材资源案例学习1”旨在帮助初学者系统地掌握Photoshop的基础知识和技能，通过实际案例...
此外，CSSBox还提供了API，使得开发者可以与渲染的文档进行交互，获取或修改元素属性，进行动画效果等。 ### 5. 开源软件的优势 作为开源软件，CSSBox具有以下优点： - **透明度与可审计性**：源代码公开，任何人...
17. **滤镜（Filters）**：如模糊、饱和度调整等，可以为元素应用类似Photoshop的效果。 18. **动画性能优化**：了解如何使用`requestAnimationFrame`、`will-change`属性等来优化动画性能，确保流畅体验。 19. **...
在本主题中，我们将深入探讨如何使用 Three.js 的 CSS3DRenderer 来渲染全景图，这是一种将3D对象与CSS3变换相结合的技术，能够实现高效且性能良好的3D效果。 首先，CSS3DRenderer 是 Three.js 提供的一个渲染器，...
自编博客技术栈：页面：H5+CSS3+JS+jQuery渲染模板：艺术模板后端-节点.js
【描述】中的"基本都是使用css的border、border-radius、transform属性将边框进行各种变形拼接而成"是关键信息，说明了实现这一效果的核心CSS技术。接下来我们将深入探讨这三个属性： 1. **border**: CSS的`border`...
`filter: blur()`是CSS3滤镜功能的一部分，它允许我们轻松地为图像、背景甚至是整个元素添加模糊效果，营造出如同Photoshop中的高斯模糊效果。这个特性在网页设计中常用于创建现代感和艺术性的视觉体验，比如“毛...