|
这两天有看到国外网站纷纷介绍-webkit-filter，开始很迷惑，丫是想要学IE吗？今天看了下，和IE的滤镜没一毛关系啊，而且，效果很赞！
这些滤镜效果最初是用于SVG的，W3C引入到CSS中，然后制定了CSS Filter Effects 1.0，现在webkit率先支持了它。
现在规范中支持的效果有：
- grayscale 灰度
- sepia 褐色
- saturate 饱和度
- hue-rotate 色相旋转
- invert 反色
- opacity 透明度
- brightness 亮度
- contrast 对比度
- blur 模糊
- drop-shadow 阴影
嗯，有些和CSS3重复了，不过，具体要怎么用还要看具体情况，至少我们可以用不同的方法实现同样的效果——比如透明度。
用法是标准的CSS写法：
-webkit-filter: blur(2px);
然后，Eric Bidelman写了一个demo，可以很方便的查看各种效果。但是考虑到某网站因为不明原因在国内无法访问，我将该demo页面简单的翻译了下，放到这边给大家预览，请猛击查看。
请注意，改滤镜目前只有最新的webkit nightly版本和Chrome 18.0.976以上版本才支持，所以你需要下载一个最新的版本来体验～～我用的是webkit nightly。
现在，让我们看一下一些简单的效果吧：
原图
模糊
50%灰度
100%灰度
50%褐色
100%褐色
50%亮度
100%亮度
色相
反色
饱和度
对比度
嗯，我们在手机端的各种特效如lomo、日系等，也可以在页面简单实现一些了，配合css3内阴影、遮罩、渐变等，相信不必instagram等差多少。
ps:sepia的翻译貌似有点儿问题，求专业指点。
原文：http://www.qianduan.net/what-is-webkit-filter.html
本文链接：http://www.blueidea.com/tech/web/2011/8718.asp 
出处：前端观察
责任编辑：bluehearts
◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。
|
