CSS Filter – CSS实现PS滤镜效果

CSS Filter 轻松实现PS滤镜效果

支持的效果有:

  • blur(模糊)
  • grayscale(灰度)
  • drop-shadow(阴影)
  • sepia(褐色滤镜)
  • brightness(亮度)
  • contrast(对比)
  • hue-rotate(色相)
  • invert(反相)
  • saturate(饱和度)
  • opacity(透明度)

这些滤镜效果最初是用于SVG的,W3C引入到CSS中,然后制定了CSS Filter Effects 1.0。Webkit率先支持了这几个功能,效果非常赞。如今神马lomo、日系都是浮云了,我们也可以在页面通过CSS Filter来实现了。配合css3内阴影、遮罩、渐变等,页面将会变得丰富多彩。

Chrome 18.0.976.0以上版本可以查看这个demo:
CSS filter demo

发表评论

电子邮件地址不会被公开。 必填项已用*标注