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

巧用CSS的无参数滤镜

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

  CSS的无参数滤镜共有六个(FlipH、FlipV、Invert、Xray、Gray和Light),虽然它们没有参数,相对来讲,灵活性要差点,但它们用起来更方便,效果也相当明显。用它们可以使文字或图片“翻翻身”、获得图片的“底片”效果,甚至可以制作图片的“X光片”效果。下面分别加以介绍。

一、FlipH和FlipV滤镜
  把这两个滤镜放在一起讲,主要是因为这两个滤镜的作用类似,用法相同。FlipH是一个水平翻转对象的滤镜,当把FlipH加载到一个对象上,该对象将产生一个水平镜象,以此来创造水平翻转的效果;FlipV是一个垂直翻转对象的滤镜,当把FlipH加载到一个对象上,该对象将产生一个垂直镜象,以此来创造垂直翻转的效果。这两个滤镜都没有参数,可直接使用,在Dreamweaver3可以同前面介绍的滤镜一样设置和使用。下面来做几个实例看看其效果。
  1、水平“翻身”的文字
  请看下面的效果图:


  要产生上面的效果,只要在Dreamweaver3中设置滤镜时选择“FlipH”就行了,设置好后在网页源代码的< head >与< /head >之间可看到这样几行代码:
  < style type="text/css" >
  < !--
  .fliph1 { filter: FlipH }
  -- >
  < /style >
  然后,在文字所在的< td >上加载Flip滤镜,一切OK。这时的< td >代码是这样的:< td class="fliph1" >。
  当然,对于象FlipH这样的无参数滤镜,采用内嵌式CSS也非常方便,即在< td >直接加上“style="fliter:fliph"”,也能产生同样的效果。上面方法的好处是不用操作源代码,只是点点鼠标就行了。
  2、垂直“翻身”的文字
  请看下面的效果图:


  上面是使用了FlipV滤镜的效果,方法和操作步骤与上例完全相同,仅仅只是换了一个滤镜而已,在网页源代码的< head> 与< /head >之间可看到这样几行代码:
  < style type="text/css" >
  < !--
  .flipv1 { filter: FlipV }
  -- >
  < /style >
  在Dreamweaver3中把FlipH、FlipV直接加载到文字上有困难,一般我们把它加载到文字所在的< td >上,这样比较方便,但有一点请你注意:这时滤镜是把对象(< td >)翻转,当然也就包括表格中的空余部分,所以我在上面的例子里采用了“居中”,否则左、右、上、下正好换了个位置,看起来不怎么美观。
  在图片上可以直接加载FlipH、FlipV滤镜,只要选取图片加载上滤镜就行了。请看下面的效果:
  

二、Invert滤镜
  Invert滤镜可以把对象的可视化属性全部翻转,其中包括色彩、饱和度和亮度值,从而产生我们平时见到的“底片”或负片的效果。你可能因为要得到一张“负片”图象而束手无策吧?,有了Invert滤镜,就可以高忱无忧了,它可以得到任何图片的“负片”。其实,有时负片也可获得一种别具一格的风格。请看下面的效果:
 

  怎么样?看上去有一种特殊的风格吧?!由于本例及后面介绍的几个滤镜的操作步骤同上例相同,故不再重复。对于Invert滤镜及后面的几个滤镜对文字无效!

三、Xray 滤镜
  正如这个名称所反映的一样,使用Xray滤镜可以使用权对象反映出它的轮廓并把这些轮廓加亮,就象“X光片”一样。请看下面的效果:
 

  怎么样?有点象黑白的雪景图片吧?!

四、Gray 滤镜
  Gray 滤镜把一张图片转变为灰度图。根据常识,彩色的图片可能含有24位颜色,也可能是16位颜色。当用Gray 滤镜时,就可以降低图片的颜色信息,使其成为灰度图,我们平常讲的黑白图片,这给我们获取老照片,设计怀旧主题的网页提供了方便。其产生的效果如下图所示:
 

  light滤镜能产生一个模拟光源的效果,但使用它要通过调用它的“方法(Method)”来实现,这就要用到一些Javascrpt知识,虽然有一点难度,但产生的效果也是奇特的,出后我们将陆续介绍到。



没有相关教程
教程录入: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……
    咸宁网络警察报警平台