-webkit-filter属性用来干什么
2015-08-13 11:22
316 查看
这两天有看到国外网站纷纷介绍-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等差多少。
这些滤镜效果最初是用于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等差多少。
相关文章推荐
- 中日韩教科书中的历史
- 《Objective-C基础教程》第8章 Foundation Kit 介绍
- 继上一篇文章,由于本地限制,等后续整理在一起
- Chrome浏览器中的网上应用店如何加载
- mysql多字段唯一索引
- Java int和integer的区别
- div+css3纯手工制作登录页
- 任务单案例一
- Ubuntu系统下的Hadoop集群(6)_Hadoop安装配置简略教程
- 浅谈C/C++内存泄漏及其检测工具
- POJ 3620 Avoid The Lakes【DFS】
- java程序由mysql转到sqlserver时在浮点数处理上遇到的错误
- UVA 11584 Partitioning by Palindromes 划分回文串 (Manacher算法)
- Java DecimalFormat 用法
- 实际iOS编程中遇到的自定义导航栏按钮,导致手势返回失效的解决方法
- 在spring官网下载jar包、源码、文档
- Bit Manipulation - Number of 1 Bits
- SpringMVC表单标签(6)
- Android结合volley的netWorkImageview实现图片文件缓存
- 安装samba后在init.d文件夹没有smb