中华网通行证
用户名 密码
  科技动态 硬件广场 下载基地 网络教室 网络冲浪 科学博览 移动时代 手机上网 桌面壁纸 科技商情  

巧用CSS的Blur滤镜
冯永曜  黄山村夫

 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滤镜,你只要给它们取不同的名称就行了,如象下面这样:
  < 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滤镜的使用不难吧!产生的效果却不凡,赶快动手试试吧!

  《赛迪网


  
相关报道




本站检索



中华网推荐

·国家级治脑病新药思维源
·中藏药治疗脑病新突破
·治类风湿,强直性脊柱炎
·养肾·痛风·长寿
·肝病泌尿脑萎缩新药介绍
·强直性脊柱炎康复乐园
·让中医辩证不孕不育
·国医治股骨头坏死一绝
·乙肝为何久治不愈?
·二千元垄断批发做老板
·中医中药专治前列腺
·治牛皮癣白癜风已成现实
·专治痛风病的白衣天使
·不孕不育的杏林奇葩
·专卖店零售管理系统





   

网络教室编辑信箱