深入理解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滤镜”,有很多果冻(粘稠液体)特效是用这种方法来制作的。
最新评论
- 相关文章
踏得网精选2016年度10大最佳HTML5动画
踏得网精选2016年度最酷最新的HTML5动画集,评选标准为:创意新颖度+实现技术难度+趣味程度。使用一些在线H5生成工具的作品,因其主要使用图片和CSS3套路动画,...
CSS3人行走动作图解和动画实现
对于人类而言,行走是一种很自然的想要前进并防止跌倒的一组动作重复。大部分人1岁就学会了走路,但至此以后的几十年间,或许我们从来没留意过自己行走姿势。当...
常见面试题JS语言中四种函数调用方式实例讲解
JS的语言世界中函数(function)是一等公民,函数的调用有多种方法。普通调用这个是最常见和直接的方式:function
使用HTML5 FileReader和Canvas压缩用户上传的图片
手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力。因此在某些应用下(对图片要求不那么高)我们可以在客户端来压缩图片,然后再提交给服务器。总体...
三维向量的简单运算和实用意义
在WebGL的实际应用中我们广泛使用向量的几何运算来计算角度、距离,判断点线、点面之间的关系,比如物体之间的碰撞检测。本文简要介绍三维计算机图形学中常用的...
Three.js入门教程5 - 10个必须知道的编程技巧
作者为Google的Paul,关于如何写出好的WebGL代码的文章。和很多开发者一样,我通过实践学习,但同时我也向其他更有经验的开发者们学习。在过去的几个月中,我在c...
Three.js入门教程4 - 创建粒子系统动画
嗨,又见面了。这么说我们已经开始学习Three.js了,如果你还没有看过之前三篇教程,建议你先读完。如果你已经读完前面的教程了,你可能会想做一些关于粒子的东西。让我们直面这个话题吧,每个人都爱粒子效果。不管你是否知道,你可以很轻易地创建它们。
Three.js入门教程2 - 着色器(上)
WebGL入门教程6 - 光照效果和Phong光照模型
正是因为有了光,世界才能被我们看见,在3D的世界里,光照给物体带来真实的视觉感受。当光照射在某一表面上时,它可能被吸收、反射或投射。其中入射到表面上的一...
WebGL入门教程4 - 使用纹理贴图(Texture Map)
3D建模和纹理贴图的关系就好比人体和皮肤(或着装)的关系,3D建模用来处理空间属性,而贴图适合用来处理细腻的表面属性。如果不使用贴图,而想在表面达到足够的...
WebGL入门教程2 - GPU基本概念和工作流水线(渲染管道)
使用Canvas绘制完美的不完美圆形
真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canva...
Three.js 3D打印数据模型文件(.STL)加载
3D打印是当下和未来10年产品技术主流方向之一,影响深远。对于电子商务类的3D打印网站,一个主要功能是把商品以3D的方式呈现出来,也就是3D数据可视化技术。HTML...
Processing.js和P5.js的功能简介和区别
什么是ProcessingProcessing是关于数字艺术的编程语言,支持跨平台,语言本身是一个类Java语言,程序文件的后缀为.pde。
什么是Processing.js为了能让Proce...SVG过滤器feColorMatrix矩阵变换效果用法详解
在计算机图形学(数学)中,矩阵乘法可用于把空间向量进行几何变换。我们可以把颜色的值(RGBA)表示成一个四维空间向量:color = (r, g, b, a);那么就可以应用...
更多...