-webkit-filter
来源:互联网 发布:淘宝大牛韩代mlb正品吗 编辑:程序博客网 时间:2024/04/30 10:56
这两天有看到国外网站纷纷介绍-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- -webkit-filter
- 初识 -webkit-filter
- -webkit-filter是神马?
- css3属性 -webkit-filter
- css3属性 -webkit-filter
- CSS3 -webkit-filter 滤镜效果
- CSS3 -webkit-filter 滤镜效果
- CSS3 -webkit-filter 滤镜效果
- CSS 滤镜 -webkit-filter 的介绍和使用
- webkit
- webkit
- webkit
- webkit
- webkit
- webkit
- webkit
- WebKit
- webkit
- 安卓开发06:布局-线性布局 LinearLayout
- Hibernate数据保存操作方法的原理对比
- unity在mac上破解
- 自定义UIAlertView背景
- Linux内核中ioremap映射的透彻理解
- -webkit-filter
- Cocos2d-x学习资源
- ios 6 and xcode 4.5 linker problems
- 十、建造模式
- Android中实现带声音提示的Toast
- Ubuntu中mount服务器共享目录
- oracle数据类型与.NET中的对应关系
- rhel6.4 配置本地yum的源
- Ubuntu下解压rar文件的方法