中国设计秀欢迎投稿
联网
Dreamweaver Flash Photoshop 其它周边 web标准 asp php .net CSS WAP网站攻略 专题
域名注册 虚拟主机 广州网站设计 域名注册 广州网站建设 上海网站建设 虚拟主机 广州网页设计 签名设计 虚拟主机 域名注册 acg王国 ACG玩家
求创科技
上海网麒科技
中国福网
数字引擎
招聘求职
中国互联
时代互联
中资源
当前位置:网络学院首页 >> 设计教程 >> web标准 >> CSS:Dropshadow滤镜

CSS:Dropshadow滤镜 (1)

来源:中国设计秀    作者:    点击:386     加入收藏
中国品牌设计网
 “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相比较,似乎是反了一个方向而 已。
0
顶一下
[1] [2]
2007-10-22 12:40:00    出处:
网站地图 | 关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口