Dreamweaver教程 FrontPage教程 Flash教程
  • CSS教程
  • javascript教程
    当前位置:教程 > 网页制作 > CSS教程 > 正文

    CSS 滤镜应用集锦 -- 巧用CSS的 Blur 滤镜

    编辑:教程网 来源:网络 时间:2011年09月19日 15:43
    Blur是CSS的滤镜之一,把它加载到文字上,可产生立体字的效果,这将为你在网页上使用立体字做标题带来了极大的方便,也为你的网页减轻了分量;把Blur滤镜加载到图片上,能使你的图片增色不少,虽然用图象处理软件也能达到同样效果,但用Blur滤镜可方便多了。我将一一向你介绍,先请看下面把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滤镜加载到图片上的效果:

    加载到图片上的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滤镜,你只要给它们取不同的名称就行了,如象下面这样:
    < style type="text/css" >
    < !--
    .blur1 { filter: Blur(Add=true, Direction=135, Strength=10)}
    .blur2 { filter: Blur(Add=true, Direction=135, Strength=20)}
    .blur3 { filter: Blur(Add=true, Direction=225, Strength=10)}
    -- >
    < /style >

    Blur滤镜的使用不难吧!产生的效果却不凡,赶快动手试试吧!
  • 原文来自 教程网 转载请注明:http://www.websmill.com/wangye/css/23983.html

  • 上一篇:CSS 滤镜应用集锦 -- 巧用CSS的 Dropshadow 滤镜
  • 下一篇:CSS 滤镜应用集锦 -- 巧用CSS的Mask滤镜