注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

浩瀚星云

上善若水 厚德载物<学习版>

 
 
 

日志

 
 

五、CSS滤镜(二)  

2008-05-30 17:49:41|  分类: ASP(过时) |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

   


8、Glow属性

  当对一个对象使用“Glow”属性后,这个对象的边缘就会产生类似发光的效果。它的表达式如下:

  Filter:Glow(Color=color,Strength=strength)

  Glow属性的参数只有两个:Color是指定发光的颜色,Strength指定发光的强度,参数值从1到255。 让我们先来看一下加上Glow属性的效果图:

五、CSS滤镜(二) - brain - 百年孤独

  怎么样,是不是有一种燃烧的火焰的感觉。实现这种效果的代码如下:

  <html>

    <head>

    <title>filter glow</title>

    <style>//*开始设置CSS样式*//

    <!--

    .leaf{position:absolute; top:20; width:400;

       filter:glow(color=#FF3399,strength=15);}

    //*设置类leaf,绝对定位,Glow滤镜属性,发光颜色值为#FF3399,强度为

    15*//

    .weny{position:absolute; top:70; left:50; width:300;

       filter:glow(color=#9966CC,strength=10);}

    //*设置类weny,绝对定位,glow滤镜属性,发光颜色值为#9966CC,强度为

    15*//

    -->

    </style>

    </head>

    <body>

    <div class=“leaf”>//*leaf类样式*//

    <p style=“font-family:lucida handwriting;

         font-size:54pt;font-weight:bold;color:#003366;”>

    Leaf Mylove</p>//*设置字体名称、大小、粗细、颜色*//

    </div>

    <div class=“weny”>//*weny类样式*//

    <p style=“font-family:bailey; font-size:48pt;

         font-weight:bold;color:#99CC66;”>

    //设置字体名称、大小、粗细、颜色*//

    Weny Good!</p>

    </div>

    </body>

  </html>

  您还可以随意修改颜色值,看看其他的发光效果是怎样的。

  本节主要讲了Glow属性的应用,下一节将向您介绍Gray属性。


7、Gray属性

  Gray属性把一张图片变成灰度图。它的表达式很简单:

  Filter:Gray

  其实这个属性没什么好讲的,只需在您定义的IMG样式中加入一句代码:

  {Filter:Gray}就一切OK了。

  下面两幅图分别代表未加Gray属性和添加了Gray属性的效果:

五、CSS滤镜(二) - brain - 百年孤独

这是原图,点击可放大

五、CSS滤镜(二) - brain - 百年孤独

转成gray属性后的效果图

  本节讲述的内容比较简单,下一节将向您介绍Invert转化属性。


9、Invert属性

  Invert属性可以把对象的可视化属性全部翻转,包括色彩、饱和度和亮度值。

  它的表达式也很简单:

  Filter:Invert

  我们再来看一下加上Invert属性前后的图片效果变化(如下图):

五、CSS滤镜(二) - brain - 百年孤独              五、CSS滤镜(二) - brain - 百年孤独

        原图                Invert属性效果图

      (点击可放大)              (点击可放大)

  我们看到Invert属性实际上达到的是一种“底片”的效果。

  自己拿别的图来试试吧。 本节介绍的是Invert属性,下一节将向您介绍Mask属性。  


10、Mask属性

  Mask属性为对象建立一个覆盖于表面的膜。它的表达式也很简单:

  Filter:Mask(Color=颜色)

  只有一个Color参数,用来指定使用什么颜色作为掩膜。

  同样,我们来看一下一幅图片在加上mask属性前后的效果(见下图):

五、CSS滤镜(二) - brain - 百年孤独

原 图

五、CSS滤镜(二) - brain - 百年孤独

Mask属性效果图

   加上MASK属性的效果就好象是在用有色眼镜看物体一样。上面的效果的代码如下:

  <html>

    <head>

    <title> mask filter </title>

    <style>//*设置CSS样式开始*//

    <!--

    div{position:absolute;top:20;left:40;

    filter:mask(color:#666699);}

    //*定义DIV区域的样式,绝对定位,mask属性的color参数值指定用什么颜色遮

    住对象*//

    p{font-family:bailey;font-size:72pt;

     font-weight:bold;color:#FF9900;}

    //*定义P区域内的样式,字体名称、大小、粗细、前景色*//

    -->

    </style>

    </head>

    <body>

    <div>

    <p> wenyleaf </p>

    </div>

    </body>

  </html>

  其实,您就算在代码中去掉对字体前景色的定义,得到的效果还是一样的。因为有了Mask属性的定义,它遮罩下的字体颜色的设置就已经失去了意义。

  还有一点需要您注意的地方,mask属性对图片文件的支持还是不够,不能达到应该有的效果。

  本节讲解了Mask属性的应用,下一节将向您介绍Shadow(阴影)属性。


11、Shadow属性

  Shadow属性可以在指定的方向建立物体的投影。它的表达式是这样的:

  Filter:Shadow(Color=color,Direction=direction)

  在这里,Shadow有两个参数值:Color参数用来指定投影的颜色;Direction参数用来指定投影的方向。

  这里说的方向与我们在第二节Blur属性中提到的“方向与角度的关系”是一样的。   也许您会问,前面讲到的Dropshadow属性和Shadow属性有什么不同吗?

  光说的话,您恐怕还难以理解,让我们看一看分别利用这两个属性做出来的效果有什么不同(见下图):

五、CSS滤镜(二) - brain - 百年孤独 五、CSS滤镜(二) - brain - 百年孤独

         Shadow效果        Dropshadow效果

  这样一对比,就可以很明显的看出两者的不同。

  Shadow属性可以在任意角度进行投射阴影,Dropshadow属性实际上是用偏移来定义阴影的。所以,看上去左图的文字和阴影就像是一体的,而右图的文字就像脱离了阴影一样。

  本例的代码如下:

  <html>

   <head>

   <title> shadow</title>

   <style>//*开始设置CSS样式*//

   <!--

   .shadow{position:absolute;top:20;width:300;

       filter:shadow(color=#cc66ff,direction=225);}

   //*定义Shadow类的样式,绝对定位,Shadow属性,阴影颜色、投影方向*//

    .dropshadow{position:absolute;top:180;width:300;

    filter:dropshadow(color=#cc66ff,offx=10,offy=10,positive=1);}

   //*设置Dropshadow类的样式,样式与Shadow类相似, 不同的是滤镜用了

   Dropshadow属性,设置X轴和Y轴的偏移量*//

   -->

   </style>

   </head>

   <body>

   <div class=“shadow”>//*区域内为Shadow类*//

   <p style=“font-family:bailey;font-size:48pt;

        font-weight:bold;color:#FF9900;”>

    Hongen Online</p>//*定义字体名称、大小、粗细、前景色*//

   </div>

   <div class=“dropshadow”>//*区域内为Dropshadow类*//

   <p style=“font-family:bailey;font-size:48pt;

         font-weight:bold;color:#FF9900;”>

    Hongen Online</p>//*定义字体样式与Shadow类的一样*//

   </div>

   </body>

  </html>

  本节讲述了Shadow属性的应用,下一节将向您介绍Wave(波纹)属性。  


 12、Wave属性

  Wave属性用来把对象按照垂直的波纹样式打乱。它的表达式如下:

  Filter:Wave(Add=True(False),Freq=频率,LightStrength=增强光效,

      Phase=偏移量,Strength=强度)

  我们看到Wave属性的表达式还是比较复杂的,它一共有五个参数。Add参数有两个参数值:True代表把对象按照波纹样式打乱;False代表不打乱;

  Freq参数指生成波纹的频率,也就是指定在对象上共需要产生多少个完整的波纹。   LightStrength参数是为了使生成的波纹增强光的效果。参数值可以从0到100。    Phase参数用来设置正弦波开始的偏移量。这个值的通用值为0,它的可变范围为从0到100。这个值代表开始时的偏移量占波长的百分比。比如该值为25,代表正弦波从90度(360*25%)的方向开始。

  说了一大堆,我们还是先看一个实例吧。比如下面这幅图片(点击可放大):

五、CSS滤镜(二) - brain - 百年孤独

  下面我们对上面这个页面加上Wave效果,代码如下:

  <html>

   <head>

   <title> wave css</title>

   <style>//*定义CSS 样式开始*//

   <!--

    .leaf{position:absolute;top:10;width:300;

       filter:wave(add=true,freq=3,lightstrength=100,

           phase=45,strength=20);}     

   //*设置leaf类的样式,绝对定位,wave属性,产生3个波纹, 光强为100,波纹

   从162度(360*45%)开始,振幅为20*//

   img{position:absolute;top:110;left:40;

     filter:wave(add=true,freq=3,lightstrength=100,

          phase=25,strength=5);}      

   //*设置IMG的样式,绝对定位,wave属性,产生3个波纹,光强为100,波纹从

   90度开始,振幅为5*//

   -->

   </style>

   </head>

   <body>

   <div class=“wave”>//*定义DIV区域内为Wave类*//

   <p style=“font-family:lucida handwriting;

       font-size=72pt; font-weight:bold;

       color:rgb(189,1,64);”>Leaf</p>

   //*设置字体名称、大小、粗细、颜色*//

   </div>

   <p><img src=“ss01044.jpg”></p> //*导入图片*//    

  </body>

  </html>

  这段代码实现的效果如下图:

五、CSS滤镜(二) - brain - 百年孤独

  如果把Wave的参数随便做一下改动,就会达到多种效果,请看另外一种效果:(如下图):

五、CSS滤镜(二) - brain - 百年孤独

  其实这种效果只是增大了freq参数的值,减小了Strength、LightStrength的值就可以了。您也可以多试试,改变其他的参数值,还可以达到许多不同的效果来。

  本节主要讲述了Wave属性的应用,下一节将向您介绍Xray属性。


13、Xray属性

  Xray就是X射线的意思。

  Xray属性,顾名思义,这种属性产生的效果就是使对象看上去有一种X光片的感觉。 它的表达式很简单:

  Filter:Xray

  我们还是先来看一个页面(如下图):

五、CSS滤镜(二) - brain - 百年孤独

点击可放大

  如果在上面的页面中加入Xray属性,也就是在<head>的<Style>中,增添下面这一句代码:

  Filter:Xray

  您再看这个页面就会是另一种效果了:(如下图)

五、CSS滤镜(二) - brain - 百年孤独

点击可放大

  看,是不是就像给它拍了一张X光片一样。


  评论这张
 
阅读(34)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017