-webkit-filter是神马?
这两天有看到国外网站纷纷介绍-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的翻译貌似有点儿问题,求专业指点。
如果你喜欢本文,欢迎 订阅本站 以获得本站最新内容。
等了好久,filter终于横空出世,期待早日能派上用场。
sepia : 深褐色 (来自有道翻译…)
神飞姐,速度好快!
我觉得这就是在玩政治……先痛斥了IE的filter,然后自己搞一套filter,现在大家应该略懂IE是怎么从事实标准变成不标准的了吧 ╮(╯▽╰)╭
有点这种感觉,
Chrome 的 NaCl 更是明显.
2者性能差别是巨大的,IE的filter会造成无数次页面reflow消耗资源
只是都叫filter罢了,这2个哪是一个级别的
今天刚好看了几个 Webkit filter 的文章。
还有这么神奇的效果。
wow!见识了!不用图片工具了~~
chrome16 不work
这个,文章里有说到,要chrome 18才支持的。。。
my mistake :)
效果真的很赞啊
css3 的新特性吧,各浏览器的支持性好么
期待好久了,真NB的特效。只是现在只能在chrome高版本上使用。
今天一不小心进到,qianduan.com,然后就悲剧了。
貌似只有chrome才支持啊。
看来在强大的CSS3面前图片工具已经弱爆了!
CSS3這個的確很方便但是所有效果都需要即時處理。這依賴於瀏覽器的圖像處理算法。強大的不是CSS3而是瀏覽器,圖片工具又怎麼會弱爆了…
这个很前卫。
真赞
sepia的意思是乌金色调,类似老照片的感觉,sepia色调是图像处理类软件中的常见效果。
这种色调效果能作为web的常规filter出现,还是有点意外的,毕竟是一个非常专用的效果