巧用CSS的Glow滤镜
作者:冯永曜
对一个对象使用“glow”滤镜后,这个对象的边缘就会产生类似发光的效果,这种效果在PHTOSHOP中做起来都比较麻烦,而在DW3中用CSS的“glow”滤镜来制作却是如此地简单,而且节约不少字节。
“glow”滤镜只有两个参数,一个是“color”是指定发光的颜色,可用十六进制的颜色代码来设定,如#FF0000(表示红色);另一个参数是“strength”则是表示发光的强度,可以从1到255之间的任何整数来指定这个发光强度,也可简单地理解为光芒的长度。下面我们来做几个应用实例。
一、发光的文字
请看下面的效果图:
![](http://www.ccidnet.com/school/web//2001/04/30/image/02-1.gif)
图1 “glow”滤镜加载到文字上的效果
上面这种效果不错吧?!制作“glow”滤镜与其它CSS滤镜在方法上没有什么区别,故不再重复。“glow”滤镜可以直接加载到文字上,所以使用非常方便。上面这种效果的滤镜代码是:Glow1(Color=#0000FF, Strength=7),你对“Color"和“Strength”设置不同的值,将得到不同的效果,你可以动手试试。
二、给图片加渐变外框
“glow”滤镜加载到一般图片无效,但若是把图片放到表格中,再给表格的< td >加上“glow”滤镜,却能使图片产生一个渐变颜色的边框,请看下面的效果:
![](http://www.ccidnet.com/school/web//2001/04/30/image/02-2.jpg)
图2 在< td >上加载“glow”滤镜的效果
这里使用的“glow”滤镜代码是:Glow1(Color=#0000FF, Strength=7)。但请你在具体制作时注意:为了加强效果,可以加上背景色,但你只能给表格加背景色,而一旦你给单元格加上背景色,“glow”滤镜就无效了。
三、为透明背景的图片增色
“glow”滤镜加载到一般图片上无效,但加载到有透明背景的gif图片上却能产生一种光晕效果,请看下面的效果图:
![](http://www.ccidnet.com/school/web//2001/04/30/image/02-3.gif)
图3 “glow”滤镜加载到透明背景图片上的效果
在透明的gif 图片上可以直接加载“glow”滤镜,也就是用鼠标点击一下图片,然后,点击快速启动栏上的CSS图标,在对话框中选择一个“glow”滤镜即可。本例的“glow”滤镜代码是Glow1(Color=#CCFF99, Strength=7)。
“glow”滤镜的参数不多,使用也就比较简单,在具体应用时关键的问题是光芒颜色的选择,原则是与整个页面色彩要协调。我们再来看看在上例中再给< td >加载一个“glow”滤镜,代码为Glow2(Color=#0000FF, Strength=7),将获得如下图所示的效果:
![](http://www.ccidnet.com/school/web//2001/04/30/image/02-4.jpg)
图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”滤镜可产生一些奇特的效果,如制作发生日蚀时太阳的图片,火焰文字效果等等,这完全取决于你的创意。
对一个对象使用“glow”滤镜后,这个对象的边缘就会产生类似发光的效果,这种效果在PHTOSHOP中做起来都比较麻烦,而在DW3中用CSS的“glow”滤镜来制作却是如此地简单,而且节约不少字节。
“glow”滤镜只有两个参数,一个是“color”是指定发光的颜色,可用十六进制的颜色代码来设定,如#FF0000(表示红色);另一个参数是“strength”则是表示发光的强度,可以从1到255之间的任何整数来指定这个发光强度,也可简单地理解为光芒的长度。下面我们来做几个应用实例。
一、发光的文字
请看下面的效果图:
![](http://www.ccidnet.com/school/web//2001/04/30/image/02-1.gif)
图1 “glow”滤镜加载到文字上的效果
上面这种效果不错吧?!制作“glow”滤镜与其它CSS滤镜在方法上没有什么区别,故不再重复。“glow”滤镜可以直接加载到文字上,所以使用非常方便。上面这种效果的滤镜代码是:Glow1(Color=#0000FF, Strength=7),你对“Color"和“Strength”设置不同的值,将得到不同的效果,你可以动手试试。
二、给图片加渐变外框
“glow”滤镜加载到一般图片无效,但若是把图片放到表格中,再给表格的< td >加上“glow”滤镜,却能使图片产生一个渐变颜色的边框,请看下面的效果:
![](http://www.ccidnet.com/school/web//2001/04/30/image/02-2.jpg)
图2 在< td >上加载“glow”滤镜的效果
这里使用的“glow”滤镜代码是:Glow1(Color=#0000FF, Strength=7)。但请你在具体制作时注意:为了加强效果,可以加上背景色,但你只能给表格加背景色,而一旦你给单元格加上背景色,“glow”滤镜就无效了。
三、为透明背景的图片增色
“glow”滤镜加载到一般图片上无效,但加载到有透明背景的gif图片上却能产生一种光晕效果,请看下面的效果图:
![](http://www.ccidnet.com/school/web//2001/04/30/image/02-3.gif)
图3 “glow”滤镜加载到透明背景图片上的效果
在透明的gif 图片上可以直接加载“glow”滤镜,也就是用鼠标点击一下图片,然后,点击快速启动栏上的CSS图标,在对话框中选择一个“glow”滤镜即可。本例的“glow”滤镜代码是Glow1(Color=#CCFF99, Strength=7)。
“glow”滤镜的参数不多,使用也就比较简单,在具体应用时关键的问题是光芒颜色的选择,原则是与整个页面色彩要协调。我们再来看看在上例中再给< td >加载一个“glow”滤镜,代码为Glow2(Color=#0000FF, Strength=7),将获得如下图所示的效果:
![](http://www.ccidnet.com/school/web//2001/04/30/image/02-4.jpg)
图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”滤镜可产生一些奇特的效果,如制作发生日蚀时太阳的图片,火焰文字效果等等,这完全取决于你的创意。