转至繁体中文版     | 网站首页 | 图文教程 | 资源下载 | 站长博客 | 图片素材 | 武汉seo | 武汉网站优化 | 
最新公告:     敏韬网|教学资源学习资料永久免费分享站!  [mintao  2008年9月2日]        
您现在的位置: 学习笔记 >> 图文教程 >> 站长学院 >> 网页制作 >> 正文
巧用CSS的Blur滤镜         ★★★★

巧用CSS的Blur滤镜

作者:闵涛 文章来源:闵涛的学习笔记 点击数:766 更新时间:2009/4/23 13:47:23

 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滤镜的使用不难吧!产生的效果却不凡,赶快动手试试吧!

  《赛迪网




[网页制作]CSS滤镜之blur属性二  [网页制作]CSS滤镜之blur属性
[网页制作]DropShadow属性、Chroma属性和blur属性效果  [网页制作]实例详解CSS滤镜(3)Blur属性
教程录入:mintao    责任编辑:mintao 
  • 上一篇教程:

  • 下一篇教程:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
      注:本站部分文章源于互联网,版权归原作者所有!如有侵权,请原作者与本站联系,本站将立即删除! 本站文章除特别注明外均可转载,但需注明出处! [MinTao学以致用网]
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)

    同类栏目
    · Web开发  · 网页制作
    · 平面设计  · 网站运营
    · 网站推广  · 搜索优化
    · 建站心得  · 站长故事
    · 互联动态
    更多内容
    热门推荐 更多内容
  • 没有教程
  • 赞助链接
    更多内容
    闵涛博文 更多关于武汉SEO的内容
    500 - 内部服务器错误。

    500 - 内部服务器错误。

    您查找的资源存在问题,因而无法显示。

    | 设为首页 |加入收藏 | 联系站长 | 友情链接 | 版权申明 | 广告服务
    MinTao学以致用网

    Copyright @ 2007-2012 敏韬网(敏而好学,文韬武略--MinTao.Net)(学习笔记) Inc All Rights Reserved.
    闵涛 投放广告、内容合作请Q我! E_mail:admin@mintao.net(欢迎提供学习资源)

    站长:MinTao ICP备案号:鄂ICP备11006601号-18

    闵涛站盟:医药大全-武穴网A打造BCD……
    咸宁网络警察报警平台