CSS3滤镜
今天在办公室亲眼目睹了同事使用CSS3滤镜为一张漂亮的照片轮廓加上了阴影,瞬间亮瞎了我的的双眼,见笑了。
所以也迅速尝试使用CSS3滤镜让最新出炉的MUI LOGO也性感一把,试图来愉悦一下大家的双眼。
已经等不及了,赶紧奉上今天的测试结果。
CSS3滤镜包括了以下几种:
![](http://www.w3cfuns.com/data/attachment/album/201409/04/185254kognnondhn7tcy5t.jpg)
只取其一,同时存在时,后边覆盖前边。
原图
![](http://www.w3cfuns.com/data/attachment/album/201409/04/185413hkvy955esyhbb9zy.jpg)
第一种:图片灰度
-webkit-filter:grayscale(1);/*值为从0 – 1*/
![](http://www.w3cfuns.com/data/attachment/album/201409/04/185401d1h7khxoyxt2st6h.jpg)
第二种:褐色
-webkit-filter:sepia(1);/*值为从0 – 1*/
![](http://www.w3cfuns.com/data/attachment/album/201409/04/185401mc6m8qf4ct6ff0wn.jpg)
第三种:饱和度
-webkit-filter:saturate(3);/*值为从0 – +无穷*/
![](http://www.w3cfuns.com/data/attachment/album/201409/04/185401bip7r7lm206ph7mf.jpg)
第四种:色相旋转
-webkit-filter:hue-rotate(-45deg);/*值为从-无穷 – +无穷*/
![](http://www.w3cfuns.com/data/attachment/album/201409/04/185402oz211wl6p6pgwz7f.jpg)
第五种:invert反色
-webkit-filter:invert(1);/*值为从0 – 1*/
![](http://www.w3cfuns.com/data/attachment/album/201409/04/185402jyqqfgwu5uqufchc.jpg)
第六种:opacity透明度
-webkit-filter:opacity(0.8);/*值为从0 – 1*/
![](http://www.w3cfuns.com/data/attachment/album/201409/04/185402rgrnrvglewwonwwu.jpg)
第七种:brightness亮度
-webkit-filter:brightness(10);/*值为从0 – +无穷*/
![](http://www.w3cfuns.com/data/attachment/album/201409/04/185403xrzevvi4giznwn11.jpg)
第八种:contrast对比度
-webkit-filter:contrast(5);/*值为从0 – +无穷*/
![](http://www.w3cfuns.com/data/attachment/album/201409/04/185403agxqrwqtvzqdrxxt.jpg)
第九种:blur模糊
-webkit-filter:blur(3px);/*值为从0 – +无穷*/
![](http://www.w3cfuns.com/data/attachment/album/201409/04/185404m2tpg203995xccxx.jpg)
第十种:drop-shadow阴影
-webkit-filter:drop-shadow(5px 5px 5px #000000);/*随意配*/
![](http://www.w3cfuns.com/data/attachment/album/201409/04/185404uxeexnzhllguxh6e.jpg)
据了解,目前这些属性只支持webkit nightly版本和Chrome 18.0.976以上以上版本。
Caniuse的兼容统计表:
http://caniuse.com/#search=-webkit-filter
![](http://www.w3cfuns.com/data/attachment/album/201409/04/185400xna70apb0spblbsk.jpg)
看到了这么多针对图片或者是针对标签层实现的滤镜效果,是不是有点小兴奋了呢?快快尝试一下吧。
如果想让图片的轮廓有阴影,那就对img使用webkit-filter。
最后,附上大家最为熟悉的IE滤镜参考资料作为对照,一起学习对比。
http://justcoding.iteye.com/blog/940184/
所以也迅速尝试使用CSS3滤镜让最新出炉的MUI LOGO也性感一把,试图来愉悦一下大家的双眼。
已经等不及了,赶紧奉上今天的测试结果。
CSS3滤镜包括了以下几种:
![](http://www.w3cfuns.com/data/attachment/album/201409/04/185254kognnondhn7tcy5t.jpg)
只取其一,同时存在时,后边覆盖前边。
原图
![](http://www.w3cfuns.com/data/attachment/album/201409/04/185413hkvy955esyhbb9zy.jpg)
第一种:图片灰度
-webkit-filter:grayscale(1);/*值为从0 – 1*/
![](http://www.w3cfuns.com/data/attachment/album/201409/04/185401d1h7khxoyxt2st6h.jpg)
第二种:褐色
-webkit-filter:sepia(1);/*值为从0 – 1*/
![](http://www.w3cfuns.com/data/attachment/album/201409/04/185401mc6m8qf4ct6ff0wn.jpg)
第三种:饱和度
-webkit-filter:saturate(3);/*值为从0 – +无穷*/
![](http://www.w3cfuns.com/data/attachment/album/201409/04/185401bip7r7lm206ph7mf.jpg)
第四种:色相旋转
-webkit-filter:hue-rotate(-45deg);/*值为从-无穷 – +无穷*/
![](http://www.w3cfuns.com/data/attachment/album/201409/04/185402oz211wl6p6pgwz7f.jpg)
第五种:invert反色
-webkit-filter:invert(1);/*值为从0 – 1*/
![](http://www.w3cfuns.com/data/attachment/album/201409/04/185402jyqqfgwu5uqufchc.jpg)
第六种:opacity透明度
-webkit-filter:opacity(0.8);/*值为从0 – 1*/
![](http://www.w3cfuns.com/data/attachment/album/201409/04/185402rgrnrvglewwonwwu.jpg)
第七种:brightness亮度
-webkit-filter:brightness(10);/*值为从0 – +无穷*/
![](http://www.w3cfuns.com/data/attachment/album/201409/04/185403xrzevvi4giznwn11.jpg)
第八种:contrast对比度
-webkit-filter:contrast(5);/*值为从0 – +无穷*/
![](http://www.w3cfuns.com/data/attachment/album/201409/04/185403agxqrwqtvzqdrxxt.jpg)
第九种:blur模糊
-webkit-filter:blur(3px);/*值为从0 – +无穷*/
![](http://www.w3cfuns.com/data/attachment/album/201409/04/185404m2tpg203995xccxx.jpg)
第十种:drop-shadow阴影
-webkit-filter:drop-shadow(5px 5px 5px #000000);/*随意配*/
![](http://www.w3cfuns.com/data/attachment/album/201409/04/185404uxeexnzhllguxh6e.jpg)
据了解,目前这些属性只支持webkit nightly版本和Chrome 18.0.976以上以上版本。
Caniuse的兼容统计表:
http://caniuse.com/#search=-webkit-filter
![](http://www.w3cfuns.com/data/attachment/album/201409/04/185400xna70apb0spblbsk.jpg)
看到了这么多针对图片或者是针对标签层实现的滤镜效果,是不是有点小兴奋了呢?快快尝试一下吧。
如果想让图片的轮廓有阴影,那就对img使用webkit-filter。
最后,附上大家最为熟悉的IE滤镜参考资料作为对照,一起学习对比。
http://justcoding.iteye.com/blog/940184/
笔记作者:css3China
笔记链接:http://www.w3cfuns.com/blog-5443448-5400256.html
原创声明:此笔记被 css3China 标注为原创笔记,未经作者同意转载必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。