Dreamweaver教程 FrontPage教程 Flash教程
  • CSS教程
  • javascript教程
    当前位置:教程 > 网页制作 > CSS教程 > 正文

    CSS 滤镜应用集锦 -- 巧用CSS的 Dropshadow 滤镜

    编辑:教程网 来源:网络 时间:2011年09月19日 15:43
    “DropShadow”顾名思义就是添加对象的阴影效果。它的实际效果看上去就象是原来的对象离开了页面,然后在页面上显示出该对象的投影。其工作原理是建立一个偏移量,然后加上颜色。下面我们就用Dropshadow滤镜来做几个网页特效。

    一、带阴影的文字
    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滤镜,将会产生一种图片有了立体边框的效果,如下图所示:

    上面图片的边框阴影就是把滤镜加载到< 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相比较,似乎是反了一个方向而已。

    Dropshadow滤镜所产生的阴影颜色和方向可以任意调整,这给我们提供了很大的创作空间,发挥你的想象力,可以做出许多很有个性的阴影特效来。
  • 原文来自 教程网 转载请注明:http://www.websmill.com/wangye/css/23982.html

  • 上一篇:CSS 滤镜应用集锦 -- 巧用CSS的 alpha 滤镜
  • 下一篇:CSS 滤镜应用集锦 -- 巧用CSS的 Blur 滤镜