深入理解CSS3滤镜(filter)功能和实例详解
CSS3滤镜功能源自SVG滤镜规范,SVG滤镜最早用来给矢量图添加类似PS中像素图的一些特效。
把这个滤镜功能引入到普通HTML元素中可以带来很有趣的效果(模糊、变形、色度等),这赋予开发者更多创意表达的空间。
为止SVG和CSS工作组联合起来制定一个协调统一的滤镜规范:https://drafts.fxtf.org/filters/
该规范目前尚处于编辑者草稿阶段(Editor's Draft),还在不断实验和发展中,但以Chrome和FF为代表的现代浏览器已经提供了支持。
本文简单介绍CSS3中常用滤镜效果的工作方式。
使用语法
filter被作为一个新的属性引入CSS3,语法示例如下:
div { filter: grayscale(100%); }
这里我们忽略浏览器前缀。
工作原理
HTML元素绘制到页面的过程分为两步,第一步是绘制当前元素及其子元素到一个缓存中,然后和其父元素组合并最终绘制到屏幕。
滤镜效果发生在“组合”这一步之前,也就是对缓存中的数据进行处理后再和父元素组合(Composite),这个数据处理过程和像素图的处理方式类似,对原图做一个通过CSS3 filter属性指定的图像算法运算得到一个新图,然后两者复合而成,就好比在相机镜头前加了一个过滤镜片一样。
SVG和CSS滤镜
CSS3中可以直接使用SVG的滤镜,SVG中的filer是通过xml语法来定义,这样结合起来使用固然可以复用SVG已有滤镜的强大功能,但写起来比较复杂,因此CSS3中新定义了一些内置的常用滤镜,使用起来要容易得多。这里将只讨论后者。
1.灰度滤镜
img{ filter: grayscale(100%); }
你可以修改上面代码中的灰度比例值,来观察效果的变换。
2.发黄滤镜
img{ filter: sepia(100%); }
这个滤镜接受百分比参数,可以用来制作老照片特效。
3.饱和度滤镜
img{ filter: saturate(10); }
这个滤镜用来改变图片的饱和度,使得图片更加醒目刺眼(与之相反的是色彩柔和度)。一般用于海报制作突出重点部分。
4.色轮滤镜
img{ filter: hue-rotate(50deg); }
这个滤镜利用色轮(color-wheel)来转换颜色,比如50deg表示图像的颜色转换为在色轮上旋转50度后的颜色值。
5.反转滤镜
img{ filter: invert(100%); }
该滤镜用来反转当前颜色,可以接受百分比参数。和PS中的反转效果类似。
6.透明度滤镜
img{ filter: opacity(50%); }
该滤镜用来改变图像的透明度。可以接受百分比参数。
7.亮度滤镜
img{ filter: brightness(50%); }
该滤镜可用来模拟环境光照效果,比如聚光特效或暗夜特效。
8.对比度滤镜
img{ filter: contrast(20%); }
该滤镜用来加强或减弱颜色对比度(即最亮颜色和最暗颜色之间的差异,100%表示和原图一样)。
9.模糊滤镜
img{ filter: blur(10px); }
该滤镜用来获取图像模糊特效,接受模糊半径(尺寸单位)参数。视觉上类似相机镜头失焦一样,其工作方式是把像素周边一定区域(由模糊半径参数所确定)的像素颜色进行混合,从而达到失去焦点的效果。
10.投影滤镜
img{ filter: drop-shadow(3px 3px 5px black); }
该滤镜用来获取图像外部的模糊阴影效果,和blur不同是,blur应用于图像本身,而drop-shadow是图像外部投影。
其工作方式是获取原图像的一个快照,然后使用指定颜色替换,再加上blur(模糊)效果,最后偏移指定位置后和原图复合。
该滤镜方法接受的参数为2到3个长度单位,比如上面代码中前面2个3px单位分别表示右阴影和下阴影长度,第3个参数5px表示模糊半径,最后的颜色参数表示阴影颜色。
性能考量
对于桌面系统而言,因为浏览器计算能力足够强大,一般不需要考虑性能,但是对于手机设备,需要小心应对和测试,尤其是blur效果(包括drop-shadow,因其内置blur操作),应该尽量减少blur半径,在效果和性能之间取得平衡。
关于在CSS3滤镜中直接用url引用SVG滤镜,可以在本站动效资源中搜索“SVG滤镜”,有很多果冻(粘稠液体)特效是用这种方法来制作的。
最新评论
- 相关文章
微信公众号在线生成二维码带参数怎么搞?
带参数二维码是微信公众号渠道二维码的一种实现
微信的带参数二维码有两种,一种是临时二维码,一种是永久二维码,但是永久二维码的生成是有个数限制的,微...CentOS6 Apache2.2多站点HTTPS配置
可以使用letsencrypt(certbot)免费证书服务。支持多系统、多站点和多目录,支持wildcard(通配符域名),90天生效,可用定时任务自动更新。需要注意一点的是apache2.4以下版本需要在默认的ssl配置中添加如下的指令:NameVirtualHost
OpenGL/WebGL顶点坐标变换过程简介
世界坐标是按照笛卡尔坐标系定义出来的绝对坐标系,下面的各种坐标系都建立在世界坐标的基础上。对象坐标系对象被应用于任何...
Monaco Editor 编辑器拷贝粘贴功能调用和获取选中文本
有时候需要在monaco editor外部调用编辑器的内置功能比如希望在页面主工具栏实现一些快捷操作。button
CSS3特性查询(Feature Query: @supports)功能简介
这是2017年不能不了解和学习的一个CSS新特性,非常实用,考虑到现实世界浏览器的复杂性,该特性本应该先于其他新特性出来。我们已经知道使用媒体查询(Media Que...
ES6小知识:动态对象键(Dynamic Object Keys)语法简介
在ES5,对象的键(key)总是被解释为字符串。ES6允许我们使用计算的值作为对象的键,使用方括号:[myKey]const
Web界面编程状态变化和JS开发框架(React/Angular/Ember)
UI编程中的一个关键课题就是界面组件化(可复用)以及组件状态管理。稍早一些的windows程序员可能接触过MFC,其界面编程中有一个DDX(DoDataExchange)的机制,...
Three.js入门教程1 - 基础知识和创建一个红色球体
[ TECHBROOD注:Three.js是一个主流的开源WebGL库,WebGL允许使用JavaScript直接操作GPU,在网页上实现3D效果。
Google的工程师Paul在网站aerotwist.com上...S3TC(S3 Texture Compression)纹理压缩格式详解
使用S3TC格式存储的压缩纹理是以4X4的纹理单元块(texel blocks)为基本单位存储的,每纹理单元块(texel blocks)有64bit或者128bit的纹理单元数据(texel data)。这...
如何实现SVG clipPath自适应被裁剪对象
CSS3中引入的clip-path(裁剪路径)属性是一个很强大的特性。
clip-path的含义如下图所示,好比剪纸一样,你用剪刀沿着某条路径把目标对象(图像或元素)裁...如何使用WebGL创建一个逼真的下雨动画
之前写过文章来分别讲解如何使用CSS3和Canvas2D实现过雨滴和下雨动画。通过背景处理看起来也有视觉上的3D效果,但并非真正的3D场景,如果要加入用户交互,进行36...
使用纯CSS3实现一个3D旋转的书本
有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制,而其中图书的展示是最为简单的一种,无需复杂的建模过程,使用图片和CSS3的一些变换即可实现...
更多...