DIV+CSSCSS滤镜的应用

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,Tankertanker,Design,Tankertanker,Design,DIVCSS,CSS,滤镜的应用,第八讲,CSS,滤镜,8.1,滤镜简介,8.2,通道,Alpha,滤镜,8.3,模糊,Blur,滤镜,8.4,运动,模糊,(MotionBlur),8.5,透明色,(Chroma),8.6,反转变换,(Flip),8.7,光晕,(Glow),8.8,灰度,(Gray),8.9,反色,(Invert),8.10,遮罩,(Mask),8.11,阴影,(Shadow),8.12 X,射线,(X-ray),8.13,浮雕纹理,(,Emboss,和,Engrave,),8.14,波浪,(Wave),第八讲,CSS,滤镜,8.1,滤镜简介,C,ss,滤镜的标识符式“,filter”,，总体的应用上和其他的,css,语句相同。,css,滤镜可分为基本滤镜和高级滤镜两种。可以直接作用于对象上，并且立即生效的滤镜称为基本滤镜。而要配合,JavaScript,等脚本语言，能产生更多变幻效果的则称为高级滤镜。,CSS,滤镜的标识符是：,filter,语法：,filter,：,filtername,（,parameters,）,进行滤镜之前必须定义,filter,filtername,是滤镜名，,parameters,是滤镜参数,在,CSS,样式中，提供了,filter,（滤镜效果），它可以对文字、图片、表格等确定范围的,HTML,标记设置滤镜效果,8.2 Alpha,滤镜,通道（,alpha,）,Alpha(,Opacity,=?,FinishOpacity,=?,Style,=?,StartX,=?,StartY,=?,FinishX,=?,FinishY,=?),参数,说 明,Opacity,代表透明度等级，可选值,0-100,，,0,代表完全透明，,100,代表完全不透明,FinishOpacity,可选项，设置结束时的透明度，制作渐变效果，可选值,0-100,Style,指明区域的形状特征，,0,代表统一形状，,1,代表线性，,2,代表圆形放射渐变，,3,代表矩形反射渐变，当,style,为,2,或,3,时，,StartX,，,StartY,就无意义,StartX,，,StartY,代表透明效果的开始坐标，坐标值是百分比，取值范围,0-100,FinishX,FinishY,代表透明效果的结束坐标，坐标值是百分比，取值范围,0-100,8.3 Blur,滤镜,参数,说 明,makeshadow,有,true,和,false,两个值，用来指定是否有阴影效果,pixelradius,表示模糊作用深度,shadowpacity,表示阴影透明度,模糊（,blur,）,Blur(makeshadow,=,？,pixelradius=,？,shadowpacity=,？,);,8.4,运,动模糊,(MotionBlur),参数,说 明,Add,有,true,和,false,两个值，用来指定是否叠加原图片,Direction,设置模糊的方向，模糊效果按顺时针方向进行。,0,度代表垂直向上，默认值,270,度,Strength,使用整数指定，代表有多少像素的宽度受到模糊影响，默认值,5px,运,动模糊,(MotionBlur),Blur(Add,=,？,Direction=,？,Strength=,？,);,其中：参数,direction,用于设定动态模糊效果的方向，总单位为,360,，,0,代表垂直向上，并以每,45,为一个单位，而度数以方向定位时，将如下图所示。,8.5,透明色,(Chroma),透明色（,Chroma,）,Chroma(enablrd,=?,Color=?),参数,说 明,enabled,有,true,和,false,两个值，用来指定是否应用滤镜,Color,使某一个特定的颜色透明，此参数就代表它的颜色值,8.6,反转变换,(Flip),FlipH,滤镜是设置对象产生水平翻转,180,，即左右相反的效果；而,FlipV,滤镜是设置对象产生垂直翻转,180,，即上下颠倒的效果。,这两个滤镜的基本语法如下：,filter:FlipH,filter:FlipV,这两个滤镜没有参数。,8.7,光晕,(Glow),参数,说 明,Color,指定发光的颜色,Strength,指定发光的强度，参数值从,1-255,光晕（,Glow,）,Glow(Color,=?,Strength=?),8.8,灰度,(Gray),灰度（,Gray,）,filter:Gray,;,8.9,反色,(Invert),反色（,invert,）,filter:invert,;,8.10,遮罩,(Mast),参数,说 明,Color,用来指定使用什么颜色作为掩膜，建议用,gif,图片,遮罩（,mask,）,mask(Color,=?),8.11,阴影,(Shadow),参数,说 明,Color,设置阴影的颜色,offx,用来设置阴影在横坐标轴上以对象为基准的偏移量。其值为整数型，正右，负左，默认为,5,offy,用来设置阴影在纵坐标轴上以对象为基准的偏移量。其值为整数型，正下，负上，默认为,5,positive,True,为任何非透明像素建立可见投影，,false,为任何透明像素建立可见投影,阴影（,shadow,）,Shadow(enabled,=?,Color=?,offX,=?,offY,=?,positive=?),9.12 X-,射线,X,射线（,xray,）,filter:xray,;,9.13,浮雕纹理,浮雕纹理,(Emboss,和,Engrave),filter:progid:DXImageTransform.Microsoft.emboss(ennabled,=,ennabled,bias,=,？,),filter:progid:DXImageTransform.Microsoft.engrave(ennabled,=,ennabled,bias,=?),参数,说 明,enabled,设置阴影的颜色,emboss,产生凹陷的浮雕效果,engrave,产生突出的浮雕效果,bias,浮雕深度,参数,说 明,Add,1,表示显示原对象，,0,表示不显示原对象,Freq,指生成波纹的频率，即在对象上共需要产生多少个完整的波纹,LightStrength,使生成的波纹增强光的效果，参数值,0-100,Phase,用来设置正弦波开始的偏移量，,0-100,Strength,振幅大小,波浪（,wave,）,Wave(Add,=?,Freq=?,LightStrength,=?,Phase=?,Strength=?),9.14,波浪,谢,谢,