CSS特效之:滤镜

近期工作之需又开始了DIV+CSS的工作。网站改版中为了实现设计效果,遇到了一些问题,也因此学习了一些CSS特效技术,例如图片效果。

记得以前做过一些图片效果,好像是用js实现的,用mouseon设置半透明等特效,代码如下:

在图片属性中加入onmouseout="Fhidden()" onmouseover="Fpop()" class="alpha",CSS中设置alpha:

.alpha {
filter:alpha(opacity=50);
cursor:hand;
}

其实实现图片透明效果,CSS也行,而且是渐变效果,代码如下:

.filter_pic{
filter:Alpha(opacity=0,finishopacity=80,style=1,startx=100,starty=0,finishx=0,finishy=0);
}

其中start和finishx,y分别为渐变发生的起始坐标,style值为1,2,3分别代表了linear,radial和rectangle三种透明渐变效果,这几种效果在作图的渐变颜色填充中常用,无需多解释了。

 

此外,CSS常见的滤镜有以下14种

.Filter_1{filter:Alpha(opacity=0,finishopacity=80,style=1,startx=100,starty=0,finishx=0,finishy=0);}
   /*透明度:opacity:开始处的透明度。finishopacity:结束处的透明度。style:0为平均透明 1为线状透明 2为圆形透明 3为菱形透明 。startx,starty,finishx,finishy分别为滤镜覆盖区域的坐标*/
.Filter_2{filter:progid:DXImageTransform.Microsoft.blur(makeshadow=false,pixelradius=4);}/*模糊:makeshadow是否被处理为阴影;pixelradius模糊效果的作用深度;*/
.Filter_3{filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=30,direction=90,add=true); }
/* 运动模糊:水平向右;add还有一个值为false;direction为方向;strength多少个像素被模糊。*/
.Filter_4{filter:chroma(color=FF6800);}/*透明色:变金黄色为白色。 但对这个例子图没用,因为他的颜色不统一*/
.Filter_5{font-size:80px;filter:dropshadow(color=#ffb6aa,positive=true,offx=9,offy=4);}
/*下落的阴影:投射阴影的颜色;offx为X的值;offy为Y的值;positive为true时为任何非透明的像素建立可见的投影(如GIF动画的透明);false为全部投影;*/
.Filter2{filter:FlipH;}/*水平翻转*/
.Filter3{filter:FlipV;}/*垂直翻转,也可水平、竖直同时翻转filter:flipv fliph;*/
.Filter_7{ font-size:80px;color:#000;filter:glow(color=#ffb6aa,strength=6);}/*发光: strength发光的强度;图片也可以 */
.Filter4{filter:Gray;}/*灰度*/
.Filter6{filter:Invert;}/*反色*/
.Filter_10{filter:mask(color=#8888FF);}/* 遮罩:这个例子效果显示不出来;用有空白透明的GIF最能体现*/
.Filter8{filter:Shadow(color=#000000,direction=135);}/*阴影:direction为方向;*/
.Filter5{filter:Xray;}/* X射线:*/
.Filter_13_1{font-size:80px; font-weight:bold; font-family:黑体; filter:progid:DXImageTransform.microsoft.emboss(bias=0.5);}
.Filter_13_2{font-size:80px; font-weight:bold; font-family:黑体; filter:progid:DXImageTransform.microsoft.engrave(bias=0.5);}
/*凹凸两种效果的浮雕:bias为添加到滤镜的每种颜色的百分比*/
.Filter_14{filter:Wave(add=0,freq=7,strength=9,lightstrength=5,phase=5);}
/*波浪:add=1表示显示原对象;默认为0;即不显示原对象;也就是可以不写这个元素;freq为波纹的频率;strength振幅的大小;lightstrength波纹增强光的效果;phase正弦波开始偏移量;*/

当然有人也利用PNG图片特性实现类似效果(使IE浏览器支持PNG格式图片的透明效果),不过仍旧会遇到IE和FF兼容问题。接下来我们将进入解决CSS在IE6,IE7,Firefox下兼容的问题。