日期: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插件,该插件直接把你做的PS图生成CSS3代码。设计与码农的福音,有木有! 插件安装即使用方法: 1、官方教程:http://css3ps.com/Download/ 2、教程盒子翻译教程 CSS3PS插件在Photoshop CS5 和 ...
38. Photoshop Candy:专注于创意和艺术效果的Photoshop教程。 39. Tutorialized:大型教程社区,用户可以找到各种设计软件的教程。 40. PSlover:为Photoshop爱好者提供教程和技巧。 41. Photoshop Support:...
《CSS3实战:开发与设计》书中所包含的示例的全部源码。 本书英文版书名《Practical CSS3:...他创立了Opera网络标准课程,是W3C网络教育社区组的联职主席。贯穿本书的一个核心就是Pratical,也就是我们说的“实战”。
可以将photoshop转为CSS代码
4. CSS滤镜(Filters):CSS滤镜可以应用于图像、视频甚至整个网页,以实现各种视觉效果,如模糊、灰度、饱和度调整等。`filter`属性允许我们应用这些效果,增强视觉表现力。 5. CSS阴影(Shadows):元素可以有内...
在"Photoshop做首页"这个主题中,我们将深入探讨如何利用Photoshop来创作吸引人的网页首页。 一、网页设计基础 1. **布局规划**:网页首页的设计通常包含头部(head)、主体(body)和底部(footer)三个主要部分...
本教程主要聚焦于如何在Photoshop中进行"div+css切图",这是一种将设计稿转化为前端代码的重要步骤。 首先,我们需要理解什么是“切图”。切图,即网页设计完成后,设计师在Photoshop中按照网页布局的需求,将设计...
标题“Download Photoshop File”表明我们将讨论如何下载并处理 Photoshop 文件,而描述中的“Converting a Photoshop Mockup”则暗示了我们将探讨如何将 Photoshop 的设计稿转换为实际网页。 首先,让我们深入了解...
Photoshop CS5-CS6 图层样式直接导出到CSS3是一项强大的功能,它极大地提高了Web设计师的工作效率。这个工具允许用户将Photoshop中的复杂图层样式转换为可以直接应用于HTML5网页的CSS3代码,减少了手动编写和调试CSS...
在本实例中,我们将深入探讨一个基于HTML5和CSS3的3D旋转木马效果相册,这是一个充满吸引力的图片展示方式,能够为用户带来独特的浏览体验。 3D旋转木马效果相册利用了CSS3的transform属性,尤其是rotateY()和...
CSS3D.js, 用于 Three.js的CSS 3D 渲染器 CSS3D.js由 Steven Wittens 用于 Three.js的CSS 3D 渲染器注意:这个库现在已经过时了,因为 Three.js 拥有自己的CSS 3D 呈现器插件,它集成在一个更清晰的样式中。...
Photoshop扩展神器Velositey是前端制作和网页设计领域中的一款强大工具,它极大地提高了设计师的工作效率,尤其在处理Web项目时。Velositey提供了多种版本以适应不同版本的Photoshop,包括velositey-v-2,适用于较旧...
在本教程中,我们将深入探讨如何利用Photoshop来构思和创建网页布局。 1. **新建项目设置**: 在开始制作网页设计之前,你需要在Photoshop中创建一个新的文档。选择"File"(文件)> "New"(新建),然后设定画布...
在设计完成后,Photoshop的切片工具可以将网页分割成多个部分,方便前端开发者进行HTML和CSS的实现。 案例七:交互设计预览。Photoshop CC版本引入了原型设计功能,允许设计师创建简单的交互原型,为用户预览动态...
以下将详细介绍Photoshop在网页设计中的应用。 1. Photoshop的基本功能: - 图像处理:Photoshop提供了丰富的工具,如画笔、橡皮擦、克隆图章等,用于修复、修饰或创造图像。 - 图层管理:通过图层,设计师可以...
在"HTML5 CSS3 专题:3D展示商品信息项目完整实例源码"这个项目中,我们将深入探讨如何利用这两者来创建一个引人入胜的商品3D展示效果。 首先,HTML5引入了许多新的元素,如`<article>`、`<section>`、`<nav>`等,...
4. **网页设计**:Photoshop可制作网页布局设计,设计师能预览页面结构和视觉效果,然后将设计稿转化为HTML和CSS代码。 5. **绘画与数码艺术**:许多画家和艺术家使用Photoshop进行数字绘画,利用各种画笔模拟传统...
17. **滤镜(Filters)**:如模糊、饱和度调整等,可以为元素应用类似Photoshop的效果。 18. **动画性能优化**:了解如何使用`requestAnimationFrame`、`will-change`属性等来优化动画性能,确保流畅体验。 19. **...
在本主题中,我们将深入探讨如何使用 Three.js 的 CSS3DRenderer 来渲染全景图,这是一种将3D对象与CSS3变换相结合的技术,能够实现高效且性能良好的3D效果。 首先,CSS3DRenderer 是 Three.js 提供的一个渲染器,...
自编博客技术栈:页面:H5+CSS3+JS+jQuery渲染模板:艺术模板后端-节点.js