CSS3模糊滤镜
来源:互联网 发布:学校网关闭游戏端口 编辑:程序博客网 时间:2024/05/16 12:50
大家可能对 Instagram 这款 iPhone APP 上的滤镜效果很感兴趣,其实 CSS3 开始也有滤镜(不是 IE 的那种滤镜),这些滤镜效果最初是用于 SVG 的,W3C 将其引入到 CSS3 中,然后制定了 CSS Filter Effects 1.0 的规范,Webkit 率先支持了它。
-webkit-filter 的用法
-webkit-filter 用法是标准的 CSS 写法,如:
-webkit-filter: blur(2px);
-webkit-filter 支持的效果有:
- blur 模糊
- brightness 亮度
- contrast 对比度
- drop-shadow 阴影
- grayscale 灰度
- opacity 透明度
- sepia 褐色
- invert 反色
- saturate 饱和度
- hue-rotate 色相旋转
下面是这几种滤镜具体的效果和代码,请在最新的 Safari 和 Chrome 浏览器上查看效果:
原图
blur 模糊-webkit-filter:blur(2px);
brightness 亮度-webkit-filter:brightness(25%);
contrast 对比度-webkit-filter: contrast(50%);
drop-shadow 阴影-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
opacity 透明度-webkit-filter: opacity(50%);
grayscale 灰度-webkit-filter: grayscale(80%);
sepia 褐色
-webkit-filter: sepia(100%);
invert 反色-webkit-filter: invert(100%);
hue-rotate 色相旋转-webkit-filter:hue-rotate(180deg);
saturate 饱和度-webkit-filter: saturate(1000%);
0 0
- css3滤镜-模糊Blur滤镜
- CSS3模糊滤镜
- css3模糊滤镜
- firefox对css3滤镜-----模糊兼容
- css3 滤镜 模糊,黑白,对比度等滤镜效果效果
- css3 滤镜效果(黑白滤镜、模糊化处理等)
- 【CSS3】滤镜+【html5】画布实现图片模糊效果
- 使用CSS3滤镜开发模糊背景(毛玻璃)效果
- CSS3 滤镜
- css3滤镜
- css3滤镜
- css3滤镜
- css3 filter 实现滤镜 模糊 改变色相 黑白照等功能
- css3滤镜-通道(Alpha)滤镜
- css3滤镜-投影(DropShadow)滤镜
- css3高级滤镜-切换滤镜
- css3高级滤镜-光照滤镜
- 滤镜—径向模糊
- NYOJ891 找点
- 语法文件解释器及编译器代码生成
- android中的触控
- Java details-java虚拟机的两种线程
- 笔记
- CSS3模糊滤镜
- 7-.netRemoting
- 数组的下标是真正的指针运算
- 《Python入门经典 以解决计算问题为导向的Python编程实践》Lesson2
- ios basic:1.0 app development process
- 在Ubuntu 13.10 中安装配置 Hadoop 2.3.X - Tong Zeng
- mysql字符集问题
- 7-进程(Process)、应用程序域(AppDomain)、.NET上下文
- 简单测试使用Servlet显示一些东西