首页 > WIKI维基 > > 正文

-webkit-filter是神马?

日期:2016-10-07 16:54:53编辑作者:新葡京线上娱乐
这两天有看到国外网站纷纷介绍-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%灰度
 
 
 
嗯,我们在手机端的各种特效如lomo、日系等,也可以在页面简单实现一些了,配合css3内阴影、遮罩、渐变等,相信不必instagram等差多少。
 
ps:sepia的翻译貌似有点儿问题,求专业指点。

相关文章

http://www.it-adv.net/wiki/201672.html

朋友网无障碍优化实践

为了营造无障碍的信息空间,方便视障用户使用我们的服务,借助朋友网(pengyou com)改版时机,我们实施了一些提高页面可访问性的实践。WCAG2 ..

发布日期:2016-10-07 详细>>

http://www.it-adv.net/wiki/2016125.html

维基百科将开发众包语音引擎 为视障者提供便利

维基百科周四宣布,它将与来自瑞典皇家理工学院的研究人员合作开发开放的众包式语音引擎,未来该在线百科全书将变得更便于有阅读困难或视觉 ..

发布日期:2016-11-12 详细>>

http://www.it-adv.net/wiki/201676.html

HTML5 & CSS3 的新交互特性

本文标题的这副图片,是用Phosotshop制作的。但是,在搜索引擎中你却无法搜索到它,搜索引擎还没有强大到能够识别图片里面的文字。并且由于 ..

发布日期:2016-10-07 详细>>

浅析互联网时代维基百科的生产模式

中图分类号:G211 文献标识码:A 文章编号:1672-8122(2016)09-0094-02一、网络的发展对知识生产的影响截至2015年6月30日,由中国互联 ..

发布日期:2016-11-12 详细>>

HTML5(目前)无法帮你实现的五件事

一直以来,很多人都专注于HTML5能够实现什么(或者是如何将各种方法连接起来,实现一个更加优雅的解决方案)。而现在,也不少人想将目光投 ..

发布日期:2016-10-07 详细>>

网站统计: