杭州网站建设
056月

强大的图片处理效果——CSS3滤镜解析

强大的滤镜效果,能够让你的网站熠熠生辉。

当WEB开发全面进入HTML5+CSS3时代之后,越来越多的人采用CSS3的最新特性来或多或少地代替过去只能使用JS或者图片才能实现的交互效果与图形特效,以达到优化网站从而提高用户体验的目的。在该篇文章中,我们着重研究一下CSS3其中一个极其华丽的图片处理特性——CSS3滤镜
CSS3滤镜是从SVG衍生出来的一个非常有趣的分支,它允许你对HTML的图片进行模糊处理、亮度调整等极其丰富的图形效果处理,让我们一起领略一下吧!

 

如何使用CSS3滤镜
在CSS代码中使用Filter属性便能达到滤镜的效果,写法如下:
fitler: filter(value);
正如你所期望的,这些滤镜效果原本应该在每个浏览器中都能使用,所以会自然地加上前缀,不过遗憾的是目前除了webkit内核的浏览器(Chrome、Safari)之外,其他浏览器暂时不能很好地支持滤镜,但这样写总是一个好习惯:
-webkit-filter: filter(value); -moz-filter: filter(value); -o-filter: filter(value); -ms-filter: filter(value);
除此之外,如果想要混合两种滤镜效果,那么可以这么写:
filter: blur(5px) brightness(0.5);           //同时使用了模糊和亮度调节两个滤镜

 

CSS3滤镜实例分析

 

我们采用一张未经处理的图片作为案例,同时在分析每一种滤镜的时候,我们会将已经使用PS处理好的滤镜图片(上图)与使用CSS3滤镜处理好的图片(下图)进行比较。你会惊奇地发现,在支持CSS3滤镜的浏览器下(目前只有webkit内核浏览器),你根本无法区分它们!

 

1.CSS3模糊滤镜

曾经想过使用CSS来动态调节图片或者文字的模糊度?有了CSS3滤镜之后你就能做到!模糊滤镜是采用像素进行计算的,所以你的书写方式可以参考以下代码:
filter: blur(5px); // 区分浏览器 -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px);

 

2.CSS3亮度滤镜

亮度滤镜的数值1是正常状态,0~1之间的数值降低亮度,>1的数值则会增加图片亮度,参考写法如下:
filter: brightness(1.3); // 区分浏览器 -webkit-filter: brightness(1.3); -moz-filter: brightness(1.3); -o-filter: brightness(1.3); -ms-filter: brightness(1.3);

 

3.CSS3饱和度滤镜

饱和度滤镜的数值为百分比,参考写法如下:
filter: saturate(50%); // 区分浏览器 -webkit-filter: saturate(50%); -moz-filter: saturate(50%); -o-filter: saturate(50%); -ms-filter: saturate(50%);

 

4.CSS3色相滤镜

这是一个非常棒的滤镜,因为它允许你通过旋转图片来进行色相的改变。该数值通过角度来进行调节,参考写法如下:
filter: hue-rotate(20deg); // 区分浏览器 -webkit-filter: hue-rotate(20deg); -moz-filter: hue-rotate(20deg); -o-filter: hue-rotate(20deg); -ms-filter: hue-rotate(20deg);

 

5.CSS3对比度滤镜

该属性也采用百分比来调节,如果百分比为0,则整张图片会变成完全的灰色,所以最好采用大于100%的数值来达到增加对比度的效果,参考写法:
filter: contrast(150%); // 区分浏览器 -webkit-filter: contrast(150%); -moz-filter: contrast(150%); -o-filter: contrast(150%); -ms-filter: contrast(150%);

 

6.CSS3反相滤镜

采用100%来达到反相的效果,其他数值有所偏差,参考写法如下:
filter: invert(100%); // 区分浏览器 -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%);

 

7.CSS3灰度滤镜

同样,使用100%的数值达到灰度的效果,其他数值会有所偏差,参考写法如下:
filter: grayscale(100%); // 区分浏览器 -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%);

 

8.CSS3复古滤镜

复古滤镜是一个非常具有艺术感觉的滤镜效果,使用起来也相当方便,同样采用100%的数值达到最好效果。参考写法如下:
filter: sepia(100%); // 区分浏览器 -webkit-filter: sepia(100%); -moz-filter: sepia(100%); -o-filter: sepia(100%); -ms-filter: sepia(100%);

以上就是所有好用简单的CSS3滤镜效果,不过最后还是需要提醒一下大家,这些滤镜目前只能在webkit内核的浏览器下有效,期待其他内核浏览器同样兼容的那一天,赶紧在你的网站建设项目中使用起来吧。

 


版权属于:佚站互联 - 杭州网站建设

原文地址:http://www.yeahzan.com/blog/item/42-52.html

转载时必须以链接形式注明原始出处及本声明。

文章作者: Benz , 文章分类: 网站建设

关于作者

Benz

评论 (2)

  • 母婴用品

    母婴用品

    2013-07-07 12:51:13 |
    博主呀,觉得自己做的到和做不到,其实只在一念之间。
    • Benz

      Benz

      2013-07-09 14:48:22 |
      说得很对:)

发表评论

请登陆后发表评论。