巧用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的Glow滤镜相关推荐

巧用CSS的 Mask 滤镜
作者:冯永曜在网页制作中使用CSS,这已是众所周知,而关于CSS滤镜使用的却介绍得不多.其实,0CSS的滤镜在Dreamweaver3中用起来也很方便,且能使文字产生一种类似图象的效果,但比起图片来 ...
巧用CSS的Wave滤镜
作者:冯永曜 "wave"滤镜,看它的名称你可能就能想到其效果,正如你想的那样,它的作用是把对象按照垂直的波形样式扭曲,从而产生一种特殊的效果.它共有5个参数: "add ...
巧用CSS的BlendTrans滤镜
作者:冯永曜 BlendTrans滤镜比起上一篇介绍的Revealtrans滤镜来要简单一些,它只有一个参数:Duration 变换时间,它的功能也比较单一,就是产生一种淡入淡出的效果,不过它的这种效 ...
巧用CSS的RevealTrans滤镜
作者: 冯永曜 CSS的RevealTrans动态滤镜是一个神奇的滤镜,它能产生23种动态效果,更为奇妙的是它还能在23种动态效果中随机抽用其中的一种.用它来进行网页之间的动态切换,简直 ...
html探照灯效果,巧用CSS的MASK滤镜
Mask滤镜可以为网页上的HTML元件对象作出一个矩形遮罩,关于什么是遮罩?如果你用过Flash中的遮罩,你就会知道了,就是那个样子了.实际上对于遮罩你也可以这样来理解,相当于用一块有色布把物件盖起来 ...
巧用CSS的Light滤镜
作者: 冯永曜 Light滤镜能产生一个模拟光源的效果,但使用它要通过调用它的"方法(Method)"来实现,这就要用到一些Javascrpt知识,虽然有一点难度,但产生的效果也是 ...
巧用CSS的alpha滤镜
作者:冯永曜 "Alpha"滤镜,听到这个名字,你可能会想到Flash里有,Photoshop里也似乎见过.一点不错,它们的作用基本类似,就是把一个目标元素与背景混合.你可以指定数 ...
巧用css的滤镜filter属性处理图片，高斯模糊，HTML页面黑白滤镜等
效果如下:使用css的filter滤镜属性.可以巧妙的设置图片高斯模糊和特效.包括灰色纪念清明节等悼念烈士英雄灰白效果. <img class='testimg' src="./img ...
巧用CSS制作艺术字
巧用CSS制作艺术字 ::.. 如果灵活应用CSS各种滤镜的特点并加以组合,我们可以得到许多意想不到的效果.这是一些效果示范,供各位参考. 西部电子用blur滤镜做出的效果,代码如下: FILTER ...

巧用CSS的Glow滤镜

巧用CSS的Glow滤镜相关推荐

最新文章

热门文章