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

浩瀚星云

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

 
 
 

日志

 
 

五、CSS滤镜(一)  

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

  下载LOFTER 我的照片书  |

  1、概述

  好了,下面我们将进入CSS的最精彩的部分--滤镜,它将把我们带入绚丽多姿的多媒体世界。正是有了滤镜属性,页面才变得更加漂亮。

  CSS的滤镜属性的标识符是filter。为了使您对它有个整体的印象,我们先来看一下它的书写格式:

   filter:filtername(parameters)

  怎么样?是不是很简单,看上去与前面讲的属性定义没什么太大的差别。Filter是滤镜属性选择符。

  也就是说,只要您进行滤镜操作,就必须先定义filter;filtername是滤镜属性名,这里包括alpha、blur、chroma等等多种属性,详细内容请看下表:

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

  上面filter表达式中括号内的parameters是表示各个滤镜属性的参数,也正是这些参数决定了滤镜将以怎样的效果显示。

  看了上面长长的列表,是不是觉得很困难呀?不要紧,我们接下来一个一个的介绍这些属性在CSS中是怎样实现的(很简单哟^_^)。

  下一节我们将首先学习Alpha透明属性的应用。


 2、alpha属性

  alpha是来设置透明度的。先来看一下它的表达格式:

  filter:alpha(opacity=opcity,finishopacity=finishopacity,

  style=style,startX=startX,startY=startY,finishX=finishX,

  finishY=finishY)

  哇,怎么这么长。是啊,不过这些参数都各有其用。

  Opacity代表透明度等级,可选值从0到100,0代表完全透明,100代表完全不透明。 Style参数指定了透明区域的形状特征。其中0代表统一形状;1代表线形;2代表放射状;3代表长方形。

  Finishopacity是一个可选项,用来设置结束时的透明度,从而达到一种渐变效果,它的值也是从0到100。 StartX和StartY代表渐变透明效果的开始坐标,finishX和finishY代表渐变透明效果的结束坐标。

  从上面讲的我们可以看出,如果不设置透明渐变效果,那么只需设置opacity这一个参数就可以了。说了这么多,我们来看一个实例吧(见下图):

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

  实现上面这种效果的代码如下:

  <html>

  <head>

  <title>alpha</title>

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

  <!--

  div{position:absolute; left:50;top:70; width:150; }

  //*定义DIV区域内的样式(位置为绝对定位,left、top、width的坐标)*//

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

  filter:alpha(opacity=80)}

  //*定义图片的样式,绝对定位,滤镜属性是透明度为80*//

  -->

  </style>

  </head>

  <body>

  <div>

  <p style=“font-size:48;font-weight:bold;color:red;”>

  Beautiful </p>//*定义字体属性,前景色为红色*//

  </div>

  <p><img src=“ss01076.jpg”> </p>

  //*导入一张图片*//

  </body>

  </html>

  如果在上面的代码中稍做改动,则将产生另外多种效果。我们只修改img的样式属性,把head中的Img样式属性代码改为如下所示:

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

  filter:alpha(opacity=0,finishopacity=100,

  style=1,startx=0,starty=85,finishx=150,finishy=85);}

  //*设置透明渐变效果,起始坐标,终止渐变坐标,并设置透明样式值(style=1)为   线形*//

  这段代码产生的效果如左下图所示,右面的两幅图分别是把Alpha中的Style参数值为2和3后的效果,点击缩略图可放大。

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

      Style=1        Style=2        Style=3

  以上是CSS的Alpha滤镜属性的应用,具体应用还需要您自己找个例子练一练。

  下一节我们将介绍blur(模糊)属性。


3、blur属性

  假如您用手在一幅还没干透的油画上迅速划过,画面就会变得模糊。CSS下的blur属性就会达到这种模糊的效果。

  先来看一下blur属性的表达式:

  filter:blur(add=add,direction,strength=strength)

  我们看到blur属性有三个参数:add、direction、strength。

  Add参数有两个参数值:true和false。意思是指定图片是否被改变成模糊效果。    Direction参数用来设置模糊的方向。模糊效果是按照顺时针方向进行的。其中0度代表垂直向上,每45度一个单位,默认值是向左的270度。角度方向的对应关系见下表:

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

  Strength参数值只能使用整数来指定,它代表有多少像素的宽度将受到模糊影响。默认值是5像素。

  还是看一个例子吧。点击这里看效果 

  看起来是不是有些像万花筒,在这个例子中加入了一些JavaScript的语句,代码如下:

  <html>

   <head>

   <title>blur css</title>

   <script>

   function handlechange(obj)

   //*设置一个循环函数handlechange,对象是obj*//

   { with(obj.filters(0))//*Obj的filter属性*//

    { if (strength<255)//*设置循环条件*//

     { strength +=1;direction +=45;}

    //*每循环一次strength就加1,direction加45度*//        

    }

   }

   </script>

   </head>

   <body>

   <p><img id =“img1” src=“ss01087.jpg”         

     style=“filter:blur(strength=1)”

     onfilterchange=“handlechange(this)”>

   //*导入一幅图片,初始blur属性strength等于1,同时调用onfilterchange函

   数*//

   </p>

    </body>

  </html>

  注:在javascript中blur属性是这样定义的:

    [oBlurfilter=] object.Filters.blur

  这个例子是Blur属性的一个比较复杂的例子,下一节我将向您介绍两个较简单的blur属性效果。


通过blur属性还可以设置页面中的字体。如果把字体的blur属性add参数值定义为1,得出来的字体效果是这样的(如下图):

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

  怎么样,是不是有些印象派的意思,这种效果的实现代码如下:

  <html>

   <head>

   <title>filter blur</title>

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

   <!--

   div{width:200;

   filter:blur(add=true,direction=90,strength=25);}

   //*设置DIV样式,滤镜blur属性*//

    -->

   </style>

   </head>

   <body>

   <div style=“width:702; height: 288”>

   <p style=“font-family:lucida handwirting italic;

    font-size:72;font-style:bold;color:rgb(55,72,145);” >

    LEAF</p>

   //*定义字体名称、大小、样式、前景色*//

   </div>

   </body>

  </html>

  我们看到strength设置为25,如果把其值再改大一些,就会达到非常夸张的效果,同时把Direction参数值为180,显示效果如下图:

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

  用blur属性设置字体可以达到很多效果,把direction和strength再做修改,还能达到多种效果,您可以自己修改试一试。

  这一节我们介绍了Blur属性,下一节将向您介绍Chroma属性。


 4、Chroma属性

  Chroma属性可以设置一个对象中指定的颜色为透明色,它的表达式如下:

  Filter:Chroma(color=color)

  这个属性的表达式是不是很简单,它只有一个参数。只需把您想要指定透明的颜色用Color参数设置出来就可以了。比如下面这幅图:

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

  图中显示两种字体,两种颜色,我们现在对“leaves”字体添加chroma属性,使其透明。代码如下:

  <html>

   <head>

   <title>chroma filter</title>

   <style>

   <!--

    div{position:absolute;top:70;width:200;

      filter:chroma(color=green)}

   //*定义DIV范围内绿色为透明色,另外设置DIV的位置*//

   p{font-family:bailey;font-size:48;font-weight:bold;

   color:green} //*设置P的字体名称、大小、粗细、颜色*//

   em{font-family:lucida handwriting italic;font-size:48;

   font-weight:bold;color:rgb(255,51,153)}

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

   -->

   </style>

   </head>

   <body>

   <div>

   <p>LEAVES <em>LOVE</em></p>

   </div>

   </body>

  </html>

  通过上面代码中对chroma的属性设置,使绿色透明。显示效果如下图:

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

  我们看到绿色的leaves字体不见了,实际上它是透明了,在IE下点击它所在的区域,它还是会显示出来(见下图):

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

  另外,需要注意的是,chroma属性对于图片文件不是很适合。因为很多图片是经过了减色和压缩处理(比如JPG、GIF等格式),所以它们很少有固定的位置可以设置为透明。

  本节我们讲述了chroma属性的应用,下一节将向您介绍Dropshadow属性。


5、DropShadow属性

  DropShadow属性是为了添加对象的阴影效果的。它实现的效果看上去就像使原来的对象离开页面,然后在页面上显示出该对象的投影。看一看它的表达式:

  Filter:DropShadow(Color=color,Offx=Offx,Offy=offy,

            Positive=positive)

  该属性一共有四个参数: Color代表投射阴影的颜色。 Offx和offy分别X方向和Y方向阴影的偏移量。偏移量必须用整数值来设置。如果设置为正整数,代表X轴的右方向和Y轴的向下方向。设置为负整数则相反。

  Positive参数有两个值:True为任何非透明像素建立可见的投影,False为透明的像素部分建立可见的投影。

  同样,我们先来看一个例子(见下图):

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

  看,图中的文字就像是从页面上飞出来一样,并且留下了一层淡淡的影子。

  实际上在这里应用的就是CSS的DropShadow属性,我们来看一下它的代码:

  <html>

   <head>

   <title>dropshadow </title>

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

   <!--

   div {position:absolute;top:20;width:300;

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

    -->

   //*定义DIV范围内的样式,绝对定位,投影的颜色为#FFCCFF,

    投影坐标为向右偏移15个像素,向下偏移10个像素*//

   </style>

   </head>

   <body>

   <div>

   <p style=“font-family:matisse itc;font-size:64;

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

   //*定义字体名称、大小、粗细、颜色*//

   Love Leaf </p>

   </div>

   </body>

   </html>

  和chroma属性一样,Dropshadow属性对图象的支持不好,我指的是JPEG、GIF格式的图象文件。

  不能支持的原因与Chroma一样,因为这种图象的颜色很丰富,很难找到一个投射阴影的位置。

  本节讲述了Dropshadow属性的应用,下一节将向您介绍FlipH、FlipV的属性应用。


 6、FlipH、FlipV属性

  Flip是CSS滤镜的翻转属性,FlipH代表水平翻转,FlipV代表垂直翻转。它们的表达式很简单,分别是:

  Filter:FlipH

  Filter:FlipV

  我们先来看一幅图:点击可放大

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

  下面我们分别对它实现水平翻转和垂直翻转,并且在图片上方的一段文字,也发生翻转。代码如下:

  <html>

   <head>

   <title>flip css</title>

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

   <!--

   div{position:absolute;top:20;width:300;

     filter:fliph(flipv);}

   //*定义DIV范围内的样式,绝对定位,翻转为水平翻转或垂直翻转。

    注意:在这里fliph和flipv只取其中的一个*//

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

     filter:fliph(flipv);}

   //*定义图片的样式,绝对定位,翻转属性和DIV一样。*//

    -->

   </style>

   </head>

   <body>

   <div>

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

         font-weight:bold; color:rgb(10,128,156);”>

    Leaf Village </p>

   //*定义字体名称、大小、粗细、颜色*//

   </div>

   <p><img src=“ss05058.jpg”></p>

   //*导入一张图片*//

   </body>

  </html>

  代码产生的两个效果分别如下图:(点击可以放大)

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

        水平翻转                垂直翻转

  翻转的属性应用是不是很简单。下一节我将向您介绍Glow属性。


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

历史上的今天

评论

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

页脚

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