CSS滤镜的应用.ppt

《CSS滤镜的应用.ppt》由会员分享，可在线阅读，更多相关《CSS滤镜的应用.ppt（25页珍藏版）》请在三一办公上搜索。

1、第十课 CSS滤镜的应用,主讲：郭亚琴,主讲内容：,一、滤镜概述二、通道（Alpha）三、模糊（Blur）四、运动模糊（Motion Blur）五、透明色（Chroma）六、下落的阴影（Dropshadow）七、翻转变幻（Flip）八、光晕（Glow）九、灰度（Gray）十、反色（Invert）十一、遮罩（Mask）十二、阴影（Shadow）,十三、X射线（X-ray）十四、浮雕纹理（Emboss和Engrave）十五、波浪（Wave）,课前介绍,CSS滤镜并不是浏览器的插件，也不符合CSS标准，而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的一类功能的集合。由于浏览器IE有着很

2、广的使用范围，因此CSS滤镜也被广大设计者所喜爱。本课主要介绍CSS各个滤镜的使用方法，包括定义滤镜、加载滤镜、实例解析等等。,一、滤镜概述,CSS滤镜的标识符是“filter”，总体上跟其它CSS语句一样，都十分简单，语法如下：filter:filtername(parameters);即进行滤镜操作必须先定义filter，filtername是滤镜属性名，包括alpha、blur、chroma等多种属性，parameters是表示各个滤镜属性的参数，也正是这些参数决定了滤镜将以怎样的效果显示。,滤镜分类,二、通道（Alpha）,Alpha滤镜是用来设置透明度的，表达式如下：filter:a

3、lpha(opacity=0100,finishopacity=0100,style=0/1/2/3,startX=0100,startY=0100,finishX=0100,finishY=0100);其中opacity代表透明度等级，可选值从0100，0代表完全透明，100代表完全不透明；finishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从0100；style参数指定了透明区域的形状特征。其中0代表统一形状、1代表线形、2代表圆形放射渐变、3代表矩形放射渐变。当style为2或3时，startX和startY等坐标参数便没有意义，都是以图片中心

4、为起始，四周为结束。startX和startY代表渐变透明效果的开始坐标，finishX和finishY代表渐变透明效果的结束坐标，取值范围0100。图片的左上角坐标为（0，0），右下角坐标为（100，100），两点的连线作为线性变换的方向。,(0,0),(100,100),二、通道（Alpha）,源码见实例10-01.html,三、模糊（Blur）,语法如下：filter:progid:DXImageTransform.Microsoft.Blur(makeshadow=ture或false,pixelradius=数值,shadowopacity=数值);其中makeshadow设置对象的

5、内容是否被处理为阴影，值为ture或false；pixelradius设置模糊效果的作用深度；shadowopacity设置使用makeshadow制作成的阴影的透明度，可选项。,源码见实例10-02.html,四、运动模糊（Motion Blur）,运动模糊滤镜在css中指的是在一个方向上的运动模糊，语法如下：filter:progid:DXImageTransform.Microsoft.Motionblur(add=true或false,direction=角度,strength=整数)Add参数有两个参数值：true和false，用来指定是否叠加原图片；Direction参数用来设置模

6、糊的方向。模糊效果是按照顺时针方向进行的。其中0度代表垂直向上，每45度一个单位，默认值是向左的270度。角度方向的对应关系见下表：Strength参数值只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响。默认值是5像素。,四、运动模糊（Motion Blur）,源码见实例10-03.html,五、透明色（Chroma）,chroma滤镜给予图像一个特定的颜色透明，它的表达式如下：“filter:Chroma(Color=英文单词/十六进制)注：用十六进制时，前面不加#。,源码见实例10-04.html,六、下落的阴影（Dropshadow）,Dropshadow滤镜就是为对象添加下落的

7、阴影效果的，其语法如下：filter:DropShadow(Color=英文单词/十六进制/RGB,OffX=整数像素,OffY=整数像素,Positive=ture或false（1或0）)说明：Color代表投射阴影的颜色；Offx：X轴偏离值，设置值为整数，单位为像素；若水平往右移，则为正数；若水平往左移，则为负数。Offy：Y轴偏离值，设置值为整数，单位为像素；若垂直往下移，则为正数；若垂直往上移，则为负数。Positive：ture或false（1或0），ture为任何非透明像素建立可见的投影，false为透明的像素部分建立可见的投影。,六、下落的阴影（Dropshadow）,源码见实

8、例10-05.html,注意区分标准html编写规则下及非标准编写规则下，文字及图片的显示效果,七、翻转变幻（Flip）,Flip滤镜的使用非常简单，没有任何参数，fliph代表水平翻转，flipv代表垂直翻转，表达式分别为：filter:fliph/*水平翻转*/filter:flipv/*竖直翻转*/,源码见实例10-06.html,八、光晕（Glow）,文字或物体发光的特效往往能使得该对象特别的突出，css中的Glow滤镜能使得文字和图片实现发光的特效，其语法如下所示：filter:Glow(color=英文单词/十六进制/RGB,strength=1255);其中color指定发光的颜

9、色，strength指定发光的强度，参数值从1255。,源码见实例10-07.html,注意区分标准html编写规则下及非标准编写规则下，文字及图片的显示效果,九、灰度（Gray）,黑白相片能够给人怀旧、悠久和回味的感觉，使用css的灰度gray滤镜能够轻松地将彩色图片变成黑白图片，语法如下：filter:gray;,源码见实例10-08.html,十、反色（Invert）,Invert滤镜用于把对象的可视化属性全部翻转，包括色彩、饱和度和亮度值等，相当于相片底片的效果，其表达式如下：filter:Invert;,源码见实例10-09.html,十一、遮罩（Mask）,Mask滤镜相当于为对象

10、建立一个覆盖在其表面的膜，实现一种颜色框架的效果。其表达式如下：filter:mask(color=英文单词/十六进制);其中color参数用来指定使用什么颜色作为掩膜。,源码见实例10-10.html,十二、阴影（Shadow）,shadow滤镜提供了一种拖尾巴的阴影效果，可以在指定的方向建立物体的连续投影，其表达式：filter:shadow(color=英文单词/十六进制,direction=角度/英文单词)其中color属性设置阴影的颜色，direction属性设定阴影的方向。,源码见实例10-11.html,十三、X射线（X-ray）,Xray滤镜的效果是给图片添加X光照射的感觉，表

11、达式如下：filter:Xray;,源码见实例10-12.html,十四、浮雕纹理（Emboss和Engrave）,在css滤镜中有两个滤镜都能够提供类似浮雕的效果，它们分别是Emboss滤镜和Engrave滤镜，两个不同之处在于Emboss产生凹陷的浮雕效果，而Engrave则产生凸出的浮雕效果，其语法分别如下所示：filer:progid:DXImageTransform.Microsoft.emboss(enabled=ture或false,bias=-11);filer:progid:DXImageTransform.Microsoft.engrave(enabled=ture或fal

12、se,bias=-11);其中enabled的值可以为ture或false，分别对应滤镜的开启与关闭，默认值为ture；bias设置添加到滤镜结果的每种颜色成分值的百分比，取值范围为-11，此属性值大的则产生高亮滤光效果。对于高对比度的图片而言，该值对滤镜的结果影响较小。,十四、浮雕纹理（Emboss和Engrave）,源码见实例10-13.html,十五、波浪（Wave）,Wave滤镜可以为对象添加竖直方向上的波浪效果，也可以用来把对象按照竖直的波纹样式打乱，其表达式为：filter:wave(add=1或0,freq=数值,lightstrength=0100,phase=0100,str

13、ength=数值);说明：add参数有两个参数值，1表示显示原对象，0表示不显示原对象；freq参数指生成波纹的频率，也就是指定在对象上共需要产生多少个完整的波纹；lightstrength参数是为了使生成的波纹增强光的效果，参数值为0100；phase参数用来设置正弦波开始的偏移量，通用值为0，可变范围0100.这个值代表开始时的偏移量占波长的百分比。比如该值为25，代表正弦波从90度（360度*25%）的方向开始；strength为振幅的大小。,十五、波浪（Wave）,源码见实例10-14.html,经验之谈：,在学习滤镜的过程中，同学们可使用原文字或原图片对照的方式来观察滤镜的效果，另外同学们业余时间可以试着调试一下各个滤镜中的参数，观察不同的效果。还有，也可以试着将多个滤镜同时使用来实现你想要的滤镜效果，这些同学们都可以在实践中不断尝试，制作出各种巧妙的特效。,本章结束，谢谢！,