CSS3滤镜
所以也迅速尝试使用CSS3滤镜让最新出炉的MUI LOGO也性感一把,试图来愉悦一下大家的双眼。
已经等不及了,赶紧奉上今天的测试结果。
CSS3滤镜包括了以下几种:
只取其一,同时存在时,后边覆盖前边。
原图
第一种:图片灰度
-webkit-filter:grayscale(1);/*值为从0 – 1*/
第二种:褐色
-webkit-filter:sepia(1);/*值为从0 – 1*/
第三种:饱和度
-webkit-filter:saturate(3);/*值为从0 – +无穷*/
第四种:色相旋转
-webkit-filter:hue-rotate(-45deg);/*值为从-无穷 – +无穷*/
第五种:invert反色
-webkit-filter:invert(1);/*值为从0 – 1*/
第六种:opacity透明度
-webkit-filter:opacity(0.8);/*值为从0 – 1*/
第七种:brightness亮度
-webkit-filter:brightness(10);/*值为从0 – +无穷*/
第八种:contrast对比度
-webkit-filter:contrast(5);/*值为从0 – +无穷*/
第九种:blur模糊
-webkit-filter:blur(3px);/*值为从0 – +无穷*/
第十种:drop-shadow阴影
-webkit-filter:drop-shadow(5px 5px 5px #000000);/*随意配*/
据了解,目前这些属性只支持webkit nightly版本和Chrome 18.0.976以上以上版本。
Caniuse的兼容统计表:
http://caniuse.com/#search=-webkit-filter
看到了这么多针对图片或者是针对标签层实现的滤镜效果,是不是有点小兴奋了呢?快快尝试一下吧。
如果想让图片的轮廓有阴影,那就对img使用webkit-filter。
最后,附上大家最为熟悉的IE滤镜参考资料作为对照,一起学习对比。
http://justcoding.iteye.com/blog/940184/
笔记作者:css3China
笔记链接:http://www.w3cfuns.com/blog-5443448-5400256.html
原创声明:此笔记被 css3China 标注为原创笔记,未经作者同意转载必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。
CSS3滤镜的更多相关文章
- CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解
一.前言 IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...
- Filter Effects - 使用 CSS3 滤镜处理图片
CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能.CSS3 Fitler 常用于调整图像的渲染.背景或边框显示效果.这里给大家分享的这个网站,大家可以体验下 CSS3 对图片的处理 ...
- tiltShift.js - CSS3 滤镜实现移轴镜头效果
tiltShift.js 是一款很棒的 jQuery 插件,使用 CSS3 图片滤镜来实现照片的移轴镜头效果.使用非常简单,使用 data 属性配置参数.温馨提示:为保证最佳的效果,请在 IE10+. ...
- 使用CSS3滤镜让图片反转颜色
CSS提供的滤镜也是一大亮点,我一直痴迷其中,有些滤镜的效果很有用,可是有些的滤镜效果可能只是为了玩玩儿,CSS常见的滤镜有这些:grayscale, blur, sepia,所有常见的过滤器.但是如 ...
- CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解[转]
一.前言 IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...
- 【CSS3】CSS3 滤镜实现
作者:^_^肥仔John 来源:CSS3魔法堂:CSS3滤镜及Canvas.SVG和IE滤镜替代方案详解 IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后 ...
- CSS3 滤镜学习
html篇 样式篇 grayscale sepia saturate hue-rotate invert opactiy brightness contrast blur drop-shadow 综合 ...
- CSS3 滤镜Filter亮度动画
CSS3 滤镜Filter亮度动画 -webkit-filter:brightness 值越高 亮度越亮<pre><!DOCTYPE html><html lang=&q ...
- CSS3 滤镜
了解摄影活着美图秀秀之类美图软件的同学对滤镜肯定不陌生,CSS3对各种滤镜效果有了支持,可以做出很多好玩儿效果,走马观花了解一下 语法 filter: function(param); 很很多CSS3 ...
随机推荐
- RobotFramework环境搭建
环境搭建 1. 准备条件 python-2.7.7 https://www.python.org/download/releases/2.7.7/ wxPython2.8-win32-unicode- ...
- Linux常用命令--网络管理篇(三)
ping –b 10.0.0.255 扫描子网网段 ifconfig 查看网络信息 netconfig 配置网络,配置网络后用service network restart重新启动网络 ifconfi ...
- eclipse 快捷方式大全
Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ 复制当前行到上一行(复制增加)Alt+↓ 当 ...
- Qt 设置对话框背景(使用调色板,设置它的画刷,画刷可以是图片)
http://blog.csdn.net/ei__nino/article/details/7305234
- 视频日志之android的总结与思考
四月份开始学android,并着手做这个项目,腾讯面试实习忙了半个月没有再做最终铩羽而归.做到5月30日,做了一个交差版,停下了差不多一个月,这两天再捡起完善一点. 项目是做一个视频保存和分享的网站, ...
- 枚举与剪枝_观察算式(比标准答案还要牛B)
观察算式 观察以下的算式: △△△ * △△ = △△△△ 某3位数乘以2位数,结果为4位数 要求:在9个△所代表的数字中.1~9的数字恰好每一个出现1次. 暴力破解代码: package lianx ...
- Swift 闭包表达式
闭包是功能性自包含模块,可以在代码中被传递和使用. Swift 中的闭包与 C 和 Objective-C 中的 blocks 以及其他一些编程语言中的 lambdas 比较相似. 闭包的形式主要有三 ...
- HTML5中video的使用一
<!DOCTYPE html> <html> <head> <title>HTML5 </title> <meta http-equi ...
- IOS7 position:fixed 定位问题
在IOS7下position:fixed定位会出一些bug. 输入框 focus 状态下 fixed会随之改变.参见该页面详细描述(http://www.cnblogs.com/zhangdaipin ...
- 学习ExtjsFor.NET(第二个案例-Array的Every方法)
Ext.Array.every(Array array,Function fn,Object scope)是一个遍历的方法. array是数组,fn是方法,scope是作用域.every返回true和 ...