当前位置：网络学院首页 >> 设计教程 >> web标准 >> CSS:Blur滤镜

CSS:Blur滤镜 (1)

来源：中国设计秀作者：点击：436 加入收藏

Blur是CSS的滤镜之一，把它加载到文字上，可产生立体字的效果，这将为你在网页上使用立体字做标题带来了极大的方便，也为你的网页减轻了分量；把Blur滤镜加载到图片上，能使你的图片增色不少，虽然用图象处理软件也能达到同样效果，但用Blur滤镜可方便多了。我将一一向你介绍，先请看下面把Blur滤镜加载到文字上的效果：

　　图1　原文字　　　　　图2　加载Blur滤镜后的效果

　　上图的效果还可以吧？！制作起来也很简单，具体方法如下：
　　1、点击DW3快速启动面板上的CSS图标，在弹出的对话框中点击编辑按钮，再在弹出的对话框中按“New"按钮，在弹出的对话框中输入你要新创建的 Class名称，在这里我们输入“Blur1"，然后按“OK"，这些操作我想你总会吧？因它同定制普通的CSS是一样的。在弹出的“Style define for -blur1"对话框中，我们在“Category"中选择“Extensions"，在“Filter"（滤镜）中选择“Blur"并按括号中的滤镜参数值设置好参数（Blur(Add=true, Direction=135, Strength=10)），按“OK"结束。若是操作无误的话，在你网页代码的< head >与< /head >之间，会有如下所示的代码：
　　< style type="text/css" >
　　< !--
　　.blur1 { filter: Blur(Add=true, Direction=135, Strength=10)}
　　-- >
　　< /style >
　　假如你实在对滤镜设置不好的话，把上面这段代码复制到< head >与< /head > 之间也行。
　　2、上面做好的CSS滤镜，你可以把它加载到文字。加载的方法与加载普通的CSS Class相同，什么？你不会！那我告诉你吧！
　　1）在网页上插入一个1*1的表格，根据你的网页版面情况加上表格的背色，然后输入一些文字。
　　2）在DW3的状态栏中选取有文字的那个单元格，然后点击快速启动面板上的CSS图标（一般在DW3状态栏的右半边上），在弹出的CSS面板上选择blur1滤镜即可。此时，你可看到< td >的源代码是这样的：< td class="blur1" > 。若你对DW3不太熟悉，你在源代码的< td >中直接加上“class="blur1"”也一样。
　　就这么简单！
　　下面我们来看一看Blur滤镜加载到图片上的效果：

　　图3 Blur滤镜加载到图片上的效果

　　加载到图片上的Blur滤镜与加载到文字上的滤镜的制作方法相同。加载的方法更加简单，具体操作如下：
　　1）点击对象面板上的图片插入图标，插入一张图片。
　　2）选取图片，用鼠标点一下图片就行了；
　　3）点击快速启动面板上的CSS图标，在弹出的对话框中选择“blur1"即可。
　　在图片加载Blur滤镜是非曲直不是也很简单？！
　　下面解释一下Blur滤镜的参数，以便你灵活应用：
　　Add：是否使Blur滤镜起作用，Add=False(或“0”)时Blur滤镜不起作用，取True（或非“0”值）时Blur滤镜起作用，它实际上是一个布尔参数，只有两个值，即true和false；
　　Direction：阴影的方向，取值范围0~360度，45度一个间隔，所以实际上只有八个方向值；
　　Strength：它代表有多少个像素的宽度成为阴影，你也可以简单地理解为阴影的长度。它只能用整数来指定，默认值是5个像素，你可以根据实际需要来指定阴影的长度。我上面的两个例子是用的同一个滤镜，Strength是10个像素。同一网页中可以使用不同参数的Blur滤镜，你只要给它们取不同的名称就行了，如象下面这样：

顶一下

[1] [2]

2007-10-22 12:41:00 出处：

本文引用地址：http://www.cnwebshow.com/edu/html/article_1430.html

热点文章/相关文章

素材下载　矢量潮流素材背景素材模板