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

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

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

  《赛迪网


  
相关报道




本站检索



中华网推荐

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





   

网络教室编辑信箱