虚度人生

导航

统计

以旧焕新的css滤镜

嗯,不是以旧换新,是希望css滤镜这个旧东东能焕发出新的生命。在新出的css3的一些特性令大家大声叫好时,其实ie下的滤镜早已默默的实现了相似的功能。OK,话不多说,让我们挨个来看一下。

界面滤镜:

  1. AlphaImageLoader:
    • 语法:
      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=x.png, sizingMethod=image)
      注意,ie8要采用-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(...)" 的方式,下同。
    • 说明:
      • sizingMethod:默认的image值就是相当于里面放个img,会撑开外层容器;crop即设置背景图片;scale则是根据外层容器大小拉伸图片。
  2. Gradient:
    渐变效果,因为只能指定startColor和endColor,也不能加stop,所以实际应用上往往不能符合需求。
    • 语法:
      filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FF000000, endColorStr=#FF000000, gradientType=0)
    • 说明:
      • startColorStr:注意这里采用的是ARGB的格式,不是常见的 RGB,也不是RGBA。
      • gradientType: 默认0竖向,1横向。
    • 对比:
      相比之下,新的css强大太多,有stop,有权重,有多个方向。
      • firefox 3.6:-moz-linear-gradient(top, blue, white 80%, orange)
      • safari 4, chrome:-webkit-gradient(linear, left top, right bottom, from(#ff0), color-stop(0.5, orange), to(#ff0000);

静态滤镜:

  1. Alpha:
    透明效果。
    • 语法:
      filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100, finishOpacity=0, style=1, startX=0, startY=0, finishX=100, finishY=100)
    • 说明:
      • style:一般用的就是默认值0,设定整个元素的透明度。1表示线性渐变,用上了其余的所有属性。2表示放射性渐变,即椭圆形的,由里向外。3表示矩形渐变,即x形的,由外向里。
    • 对比:
      • other browsers:opacity: 0.8
  2. BasicImage:
    很多,灰度效果,镜像效果,遮罩效果,透明效果,旋转效果,还有X光效果。
    • 语法:
      filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1, invert=0, mask=1, mirror=0, opacity=100, rotation=1, xray=1)
    • 说明:
      • mask:以透明部分为遮罩。
      • maskcolor:css中属性无效,但用js指定有效,指定mask为1时不透明部分的颜色,如0xff000000,采用0xAARRGGBB格式。
      • rotation:1表示顺时针转90度,2表示180,3表示270。xray:拍一个x光片,grayScale的反像。
    • 对比:
      css的rotation除了角度,基准点自由指定外,一个最大的不同就是,css的旋转后原来的位置还是会被占据,就如同position:relative的效果一样。
      • firefox 3.5:-moz-transform: scale(0.75) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); -moz-transform-origin: 0% 0%
      • safari 4, chrome:-webkit-transform: scale(0.75) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); -webkit-transform-origin: 0% 0%
      • opera 10.5:-o-transform: scale(0.75) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); -o-transform-origin: 0% 0%
  3. Blur:
    模糊效果。
    • 语法:
      filter:progid:DXImageTransform.Microsoft.Blur(makeShadow=true, pixelRadius=2.0, shadowOpacity=0.75)
    • 说明:
      • makeShadow:是否转化为阴影。
  4. Chroma:
    • 语法:
      filter:progid:DXImageTransform.Microsoft.Chroma(color=#ff0000ff)
    • 说明:
      • color:指定的颜色值变为透明,采用#AARRGGBB格式。
  5. Compositor:
    • 语法:
      filter:progid:DXImageTransform.Microsoft.Compositor(function=0)
    • 说明:
      • function:指定合成的函数,用数值表示,0-10,19-25。
  6. DropShadow:
    阴影效果。
    • 语法:
      filter:progid:DXImageTransform.Microsoft.DropShadow(offX=5, offY=5, positive=true)
    • 说明:
      • positive:false的话不透明部分也生成阴影。
    • 对比:
      又是css胜出,可以指定具体颜色,最主要是filter没有模糊,实际意义不大。
      • other browsers:text-shadow:2px 2px 2px #333333
  7. Emboss:
    浮雕效果。
    • 语法:
      filter:progid:DXImageTransform.Microsoft.Emboss(bias=0.7)
    • 说明:
      • bias:-1.0到1.0。
  8. Engrave:
    雕刻效果,与Emboss的区别就是Emboss是凸出来,这个是凹进去。
    • 语法:
      filter:progid:DXImageTransform.Microsoft.Engrave(bias=0.7)
    • 说明:
      • bias:-1.0到1.0。
  9. Glow:
    外发光效果,很酷。
    • 语法:
      filter:progid:DXImageTransform.Microsoft.Glow(color=#ff0000, strength=5)
    • 说明:
      • color:光晕颜色,采用#RRGGBB格式。
    • 对比
      本来想用来模拟ff默认的focus outline效果,但是滤镜使用后,外发光也会占据实际位置,会改变dom元素位置,而且最要命的是光标还保持在原来的位置,没有随着移动,所以放弃。
      • other browsers:outline
  10. Matrix:
    矩阵变换滤镜。
    • 语法:
      filter:progid:DXImageTransform.Microsoft.Matrix(dx=1, dy=1, filterType="bilinear", m11=1, m12=0, m21=0, m22=1, sizingMethod="clip to original")
    • 说明:filterType:选择使用bilinear还是nearest neighbor算法来生成滤镜效果,一般默认就OK了,不用管它。sizingMethod:默认变换后的图片会以原图片位置为基准进行裁剪,所以要想看到全貌的话需要设置为'auto expand'字符串。
    • 对比:
      相比于BasicImage的rotation,这个与css的transform效果更加接近,只是应用了效果后会再度以原dom的左上角为基准进行调整。
      • firefox 3.5:-moz-transform: scale(0.75) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); -moz-transform-origin: 0% 0%
      • safari 4, chrome:-webkit-transform: scale(0.75) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); -webkit-transform-origin: 0% 0%
      • opera 10.5:-o-transform: scale(0.75) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); -o-transform-origin: 0% 0%
  11. MotionBlur:
    动态模糊效果。
    • 语法:
      filter:progid:DXImageTransform.Microsoft.MotionBlur(add=false, direction=270, strength=5)
    • 说明:
      • add:模糊后的图片是否覆盖原先的图片,默认值false,设为true的话就是残影效果。
      • direction:取值从0,45,90...315,以45为间隔,默认值是270,即left。
  12. RevealTrans:
    动态变换效果。不知道为什么官方会把这个归入静态滤镜,这个必须要js介入,要调用apply和play函数才会生效,或者用<meta http-equiv="page-enter" content="revealtrans(...)">作用与整个页面。
    • 语法:
      filter:progid:DXImageTransform.Microsoft.RevealTrans(duration=5, transition=23)
    • 说明:
      • transition:23表示随机应用各种变换效果,其余的值都可以用动态滤镜更加有效的代替,不推荐使用。
  13. Shadow:
    投影效果,这个与DropShadow的最大区别就是,Shadow阴影始终与源相连,DropShadow则是偏移。
    • 语法:
      filter:progid:DXImageTransform.Microsoft.Shadow(color=#ff0000, direction=270, strength=1)
    • 说明:
      • color:阴影颜色,采用#RRGGBB格式。
    • 对比:
      可以额外指定x或y轴各自的偏移,并且text-shadow的话与源不是粘连在一起,而box-shadow的话也只会渲染出box外的部分。
      • other browsers:text-shadow:2px 2px 2px #333333或者box-shadow:2px 2px 2px #333333
  14. Wave:
    波浪效果。
    • 语法:
      filter:progid:DXImageTransform.Microsoft.Wave(add=false, freq=3, lightStrength=100, phase=0, strength=1)
    • 说明:
      • add:波纹图片是否覆盖原先的图片,默认值false。
      • freq:波的数量,默认3。
      • lightStrength:光亮程度,取值0-100,默认值100。
      • phase:波纹起始位置百分比,取值0-100。
      • strength:波纹偏移像素,默认1。

由于动态滤镜生效都需要js介入,在这里就不一一介绍了,可以参看RevealTrans。

综合来看,比较有实际应用意义的,应该是alpha或basicimage,shadow,blur或motionblur,matrix,也许,再加一个gradient。

posted on 2010-03-08 16:08 nozer0 阅读(...) 评论(...) 编辑 收藏