浅谈CSS滤镜
CSS在网站制作中有着举足轻重的地位
包括网页的页面,背景以及各种元素的定位和属性设置都可以通过CSS来完成
因此CSS的功能十分强大 可以制作出各种各样的页面效果
这里给大家简单说一个CSS的滤镜效果
大家可以看到我的BLOG的菜单条是半透明的
其实要设置这个很简单 只要在相应的CSS设置或者表格属性设置里面加上如下语句即可:
- style="filter:alpha(opacity=80);"
这里我们用到了CSS里面的Alpha滤镜
“Alpha”属性是把一个目标元素与背景混合。设计者可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。通过指定坐标，可以指定各种不同范围的透明度。
- Alpha 滤镜语法 {FILTER：ALPHA(opacity=opacity,finishopacity=finishopacity,
- style=style,startx=startx,
- starty=starty,finishx=finishx,finishy=finishy)}
- 参数说明
- opacity 透明度。默认的范围是从0 到 100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。
- finishopacity 是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。
- style 指定透明区域的形状特征：
- 0 代表统一形状
- 1 代表线形
- 2 代表放射状
- 3 代表矩形
- startx 渐变透明效果开始处的 X坐标。
- starty 渐变透明效果开始处的 Y坐标。
- finishx 渐变透明效果结束处的 X坐标。
- finishy 渐变透明效果结束处的 Y坐标。
CSS除了Alpha滤镜之外还有其他很多功能强大的滤镜,现将它们简单介绍如下:
Blur滤镜 :
用手指在一幅尚未干透的画面迅速划过时，画面就会变得模糊。”Blur”就是产生同样的模糊效果。
- Blur滤镜语法 HTML：{filter:blur(add=add,direction=direction,
- strength=strength)}
- Script语言： [oblurfilter=] object.filters.blur
- 参数说明
- add 它指定图片是否被改变成印象派的模糊效果。模糊效果是按顺时针的方向进行的，
- 这是一个布尔值:ture （默认）或false
- direction 该参数用来设置模糊的方向。
- 0度代表垂直向上，每45度为一个单位，默认值是向左的270度
- strength 只能使用整数来指定，代表有多少像素的宽度将受到模糊影响，默认是5个像素
Wave滤镜 :
- Wave滤镜语法
- {filter: wave(add=add,freq=freq,
- lightstrength=strength,
- phase=phase,strength=strength)}
- 参数说明
- wave 把对象按垂直的波形样式打乱。
- 默认是 TRUE（非0）
- ADD 是否要把对象按照波形样式打乱
- FREQ 波纹的频率，也就是指定在对象上一共需要产生多少个完整的波纹
- LIGHTSTRENGTH 可以对于波纹增强光影的效果，范围0----100
- PHASE 设置正弦波的偏移量
- STRENGTH 振幅大小
Shadow滤镜 :
- Shadow滤镜语法
- {filter:shadow(color=color,direction=direction)}
- 利用“Shadow”属性可以在指定的方向建立物体的投影，COLOR是投影色，DIRECTION是设置投影的方向。其中0度代表垂直向上，然后每45度为一个单位。它的默认值是向左的270度。
Gray ,Invert,Xray 滤镜 :
使用Gray滤镜可以把一张图片变成灰度图，语法很简单：
- Gray 滤镜语法 {filter:gray}
Mask滤镜 :
- Mask 滤镜语法 {filter:mask(color=color)}
- 使用"MASK"属性可以为对象建立一个覆盖于表面的膜，其效果就象戴着有色眼镜看物体一样 。
Glow 滤镜 :
对一个对象使用”glow”属性后，这个对象的边缘就会产生类似发光的效果。
- Glow 滤镜语法 {filter:glow(color=color,strength)}
- 参数说明
- Color 指定发光的颜色
- STRENGTH 强度，值为1到255之间的任何整数，指定发光色力度和范围。
DropShadow滤镜 :
“DropShaow”，顾名思义就是添加对象的阴影效果。其工作原理是建立一个偏移量，加上色彩。
- DropShadow 滤镜语法 {filter:dropshadow
- (color=color,offx=ofx,offy=offy,positive=positive)}
- 参数说明
- Color 代表投射阴影的颜色
- offx X方向阴影的偏移量
- offy Y方向阴影的偏移量
- Positive 布尔值
- 如果为TRUE（非0），就为任何的非透明像素建立可见的投影
- 如果为FASLE（0），就为透明的像素部分建立透明效果
FlipH, FlipV 滤镜:
FlipH 滤镜实现水平反转
- 滤镜语法 {filter:filph}
- FlipV 滤镜实现垂直反转
- 滤镜语法 {filter:filpv}
这些滤镜的效果都很单一,毕竟只是CSS内置的一些属性但是如果结合起来使用也是能够作出很多不错的效果的
大家可以举一反三多多尝试
就介绍到这里@_@