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

巧用CSS的Dropshadow滤镜

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

  “DropShadow”顾名思义就是添加对象的阴影效果。它的实际效果看上去就象是原来的对象离开了页面,然后在页面上显示出该对象的投影。其工作原理是建立一个偏移量,然后加上颜色。下面我们就用Dropshadow滤镜来做几个网页特效。

一、带阴影的文字
  Dropshadow滤镜加载到文字上效果比较明显,给人一种文字从页面上站立起来的感觉,请看下面的效果图:

  图1 在文字上加载Dropshadow滤镜的效果

  由于CSS滤镜的在Dremweaver3中的制作和加载的方法均相同,我在此前在互动学校上发表的文章中已有详细介绍,在此就不再重复了,你若还不会操作,请参考此前关于CSS的技巧文章。
  上面的文字效果,其Dropshadow滤镜代码是:DropShadow(Color=gray, OffX=5, OffY=-5, Positive=1)。Dropshadow滤镜有四个参数,它们的含义为:
  “Color”:代表投射阴影的颜色,我在本例中用的是“gray” ,但在实际应用中往往是用十六进制的颜色代码,如#FF0000为红色等等;
  “offx”和“offy”:分别是X方向和Y方向阴影的偏移量,它必须用整数值,如果是正整数,那么表示阴影向X轴的右方向和Y轴的下方向。若是负整数值,阴影的方向正好相反。另外“offx”和“offy”数值的大小决定了阴影离开对象的距离;
  “Positive”参数:是一个布尔值,如果为“TRUE(非0)”,那么就为任何的非透明像素建立可见的投影。如果为“FASLE(0)”,那么就为透明的像素部分建立透明效果。这句话可能不大好理解,不要着急,看了后面的例子,你就会明白的。
  对文字加载Dropshadow滤镜比较方便的办法,是把Dropshadow滤镜加载到文字所在的表格单元格< td >上。从上面的效果图,我们可以看出当文字比较小时,使用Dropshadow的效果不太好,所以一般用于制作标题字。

二、图片的立体边框
  Dropshadow滤镜对一般图片无效,但我们把图片放到表格中,再给表格的< td >加载Dropshadow滤镜,将会产生一种图片有了立体边框的效果,如下图所示:

  图2 在图片所在的< td >加载Dropshadow滤镜的效果

  上面图片的边框阴影就是把滤镜加载到< td >上产生的,它的滤镜参数值基本上与上例相同,只是把戏“offy”换成了“-5”,具体代码为:DropShadow(Color=gray, OffX=5, OffY=5, Positive=1)。

三、在透明背景图片上加载Dropshadow滤镜
  Dropshadow滤镜加载到有透明背景的gif图片上却能产生阴影效果,下面左1的滤镜代码是:.DropShadow(Color=gray, OffX=5, OffY=5, Positive=0);下面中间的图片加载的滤镜代码是:DropShadow(Color=gray, OffX=5,OffY=5, Positive=1);下面右图没有加载任何滤镜。按有关文章讲,在有透明背景的gif图片上加载Dropshadow滤镜,当Position的值为“0”时,是在透明区域以外的区域产生阴影,但从实际效果看,并非如此,也就是下面左图这样的效果,与Position=1相比较,似乎是反了一个方向而已。

  图3 Dropshadow滤镜加载到有透明背景图片上的效果

  Dropshadow滤镜所产生的阴影颜色和方向可以任意调整,这给我们提供了很大的创作空间,发挥你的想象力,可以做出许多很有个性的阴影特效来。



[网页制作]CSS滤镜之DropShadow属性  [网页制作]实例详解CSS滤镜(5)DropShadow属性
教程录入: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……
    咸宁网络警察报警平台