巧用CSS滤镜

来自Asp.net精英论坛:bbs.1aspx.com 


一。巧用CSS的Glow滤镜 
对一个对象使用“glow”滤镜后,这个对象的边缘就会产生类似发光的效果,这种效果在PHTOSHOP中做起来都比较麻烦,而在DW3中用CSS的“glow”滤镜来制作却是如此地简单,而且节约不少字节。
  “glow”滤镜只有两个参数,一个是“color”是指定发光的颜色,可用十六进制的颜色代码来设定,如#FF0000(表示红色);另一个参数是“strength”则是表示发光的强度,可以从1到255之间的任何整数来指定这个发光强度,也可简单地理解为光芒的长度。下面我们来做几个应用实例。

一、发光的文字
  请看下面的效果图:

  图1 “glow”滤镜加载到文字上的效果

  上面这种效果不错吧?!制作“glow”滤镜与其它CSS滤镜在方法上没有什么区别,故不再重复。“glow”滤镜可以直接加载到文字上,所以使用非常方便。上面这种效果的滤镜代码是:Glow1(Color=#0000FF, Strength=7),你对“Color"和“Strength”设置不同的值,将得到不同的效果,你可以动手试试。

二、给图片加渐变外框
  “glow”滤镜加载到一般图片无效,但若是把图片放到表格中,再给表格的< td >加上“glow”滤镜,却能使图片产生一个渐变颜色的边框,请看下面的效果:

  图2 在< td >上加载“glow”滤镜的效果

  这里使用的“glow”滤镜代码是:Glow1(Color=#0000FF, Strength=7)。但请你在具体制作时注意:为了加强效果,可以加上背景色,但你只能给表格加背景色,而一旦你给单元格加上背景色,“glow”滤镜就无效了。

三、为透明背景的图片增色
  “glow”滤镜加载到一般图片上无效,但加载到有透明背景的gif图片上却能产生一种光晕效果,请看下面的效果图:

  图3 “glow”滤镜加载到透明背景图片上的效果

  在透明的gif 图片上可以直接加载“glow”滤镜,也就是用鼠标点击一下图片,然后,点击快速启动栏上的CSS图标,在对话框中选择一个“glow”滤镜即可。本例的“glow”滤镜代码是Glow1(Color=#CCFF99, Strength=7)。
  “glow”滤镜的参数不多,使用也就比较简单,在具体应用时关键的问题是光芒颜色的选择,原则是与整个页面色彩要协调。我们再来看看在上例中再给< td >加载一个“glow”滤镜,代码为Glow2(Color=#0000FF, Strength=7),将获得如下图所示的效果:

  图4 两次加载滤镜的效果

  这种效果有点酷吧?!此时你在网页的源代码< head >与< /head >可看到这样一些代码:
  < style type="text/css" >
  < !--
   .glow1 { filter: Glow(Color:#CCFF99, Strength:7) }
   .glow2 { filter: Glow(Color:#0000FF, Strength:7) }
  -- >
  < /style >
  而在< td >的代码是这样的:< td class="glow2 glow1" > 。这就给我们一个启示,多次加载“Glow”滤镜可产生一些奇特的效果,如制作发生日蚀时太阳的图片,火焰文字效果等等,这完全取决于你的创意。

二。巧用CSS的alpha滤镜
“Alpha”滤镜,听到这个名字,你可能会想到Flash里有,Photoshop里也似乎见过。一点不错,它们的作用基本类似,就是把一个目标元素与背景混合。你可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。通过指定坐标,可以指定点、线、面的透明度。由于“Alpha”滤镜的参数比较多,所以我们先来了解释一下参数,各参数含义分别如下:
  “opacity”:代表透明度水准。范围是从0~100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明。
  “finishopacity”:是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100。
  “style”:指定了透明区域的形状特征。其中0代表统一形状、1代表线形、2代表放射状、3代表长方形。
  “StartX”和“StartY”:代表渐变透明效果的开始X和Y坐标。
  “FinishX”和“FinishY”:代表渐变透明效果结束X和Y 的坐标。
  好了,讲了一堆参数,我们来做几个实例试试:

一、特殊的文字效果
  把“Alpha”滤镜加载到文字所在的< td >上,能产生一些奇妙的效果,请看下图:
图1
图2
图3

  上面的三种效果除“Style”参数不同外,其它参数均相同。图1的代码是: Alpha(Opacity=10, FinishOpacity=90, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=100);
  图2的滤镜代码为:Alpha(Opacity=10, FinishOpacity=90, Style=2, StartX=0, StartY=0, FinishX=100, FinishY=100);
  图3的滤镜代码为:Alpha(Opacity=10, FinishOpacity=90, Style=3, StartX=0, StartY=0, FinishX=100, FinishY=100);
  在使用“Alpha”滤镜时要注意:
  1、由于“Alpha”滤镜使当前元素部分透明,该元素下层的内容的颜色对整个效果起着重要作用,因此颜色的合理搭配相当重要;
  2、透明度的大小要根据具体情况仔细调整,取一个最佳值。

二、新颖别致的跑马灯
  跑马灯特效在现在的网站已司空见惯了,但象下面这样淡入淡出的跑马灯还不多,请看下图:

  图4 别致的跑马灯

  用“Alpha”滤镜你也可以轻松地做出上面那种效果的跑马灯。具体制作方法如下:
  1、插入一个一行一列的表格,把表格的背景设置为“#000000”;
  2、在DW3中设置好alpha滤镜,具体的滤镜代码是:.alpha1 { filter: Alpha(Opacity=100, FinishOpacity=20, Style=2, StartX=0, StartY=0, FinishX=100, FinishY=100)};
  3、在表格中插入一个跑马灯,并在跑马灯中加入alpha滤镜,结束!这里要注意的是不要把“Alpha”滤镜加载到< td >上,而是要加载到跑马灯上,否则效果将在相径庭了。按F12看看吧。
  若你手头没有跑马灯程序,我这里给出一个,省得你到处找,烦着呢!
< marquee border="0" class="alpha2" >跑马灯内容< /marquee >

三、仿电视效果
  请下面的效果图:
 
  图5、6 仿电视效果

  由于该效果是动态的,上面是我抓的两张过程图片。制作方法如下:
  1、插入一个1*1的表格,并用一张图片作为表格的背景。
  2、我们把单元格的背景设置为白色,并在表格的单元格上加载一个alpha滤镜,滤镜代码为:.alpha1 {filter:alpha(opacity=50) },这里滤镜的其它参数取默认值。
  3、用鼠标在表格的单元格中点一下,然后点击主菜单的“Insert”,并在其下拉出的菜单中选择“Layer”子菜单,插入一个层(我们称其为:layer1)。我们再次点击主菜单的“Insert”,并在其下拉出的菜单中选择“Layer”子菜单,再插入一个层(我们称其为:layer2)。
  4、我们称Layer1为Layer2的父层,那么Layer2就是Layer1的子层,注意:切不可用鼠标拖动Layer1。把Layer1的Width和Height均设置为“1”。把Layer2拖到表格上,并调整其大小与表格完全重合。
  5、在Layer2上插入一个“ Marquee”(滚动字幕),按F12就能看到象上图那样的效果了。
  本例的alpha滤镜使得背景图片看起来象被蒙上了一层薄纱,从而使得在其上面的文字能突出显示,这也是在电视中经常看到的效果。另外也请你注意一下3、4两步插入图层的技巧,这样插入的图层,无论你在其前后插入多少内容,它与背景图片的相对位置不变,它克服了在DW3中图层使用绝对坐标带来的定位不准的问题。

展开阅读全文

没有更多推荐了,返回首页