supce's blog

CSS学习笔记之滤镜

发表于  |    |  

几个常见的CSS滤镜效果

今天学习几个CSS的滤镜效果，这里暂时只用CSS3的filter来实现，至于利用SVG和Canvas的坑以后再填

灰度图

在一些哀悼日，网页可能要设为全灰色。CSS3中用greyscale来实现 取值范围为0-1或0-100%；0表示无效果，1或100%表示最大效果

先是HTML代码：

<img src="images/xi.jpg">
<img class="filter" src="images/xi.jpg">

然后是CSS的测试代码：

<style type="text/css">
    img{
        width: 300px;
        height: 400x;
    }
    .filter{
        -webkit-filter:  grayscale(100%); 
        -ms-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
        filter: gray;  /*IE*/
    }
</style>

高斯模糊

高斯模糊也就是我没带眼镜时的效果，用blur实现 取值范围为0-N px，其中0为无效果

测试代码：

.filter{
        -webkit-filter:  blur(2px); 
        -ms-filter: blur(2px);
        -moz-filter: blur(2px);
        -o-filter: blur(2px);
        filter: blur(2px);
    }

Speia滤镜

Speia滤镜是对图片或元素整体进行棕褐色处理，就是老照片那种效果 取值范围为0-1或0-100%；0表示无效果，1或100%表示最大效果

测试代码：

.filter{
        -webkit-filter: sepia(1); 
        -ms-filter: sepia(1);
        -moz-filter: sepia(1);
        -o-filter: sepia(1);
        filter: sepia(1);
    }

饱和度滤镜

看到饱和度让我想起了冷屏和暖屏之间的战争以及到底用不用三星A屏 可以利用saturate实现 取值范围>=0的数字或百分数，1为无效果，0为灰度图

测试代码:

.filter{
        -webkit-filter: saturate(2); 
        -ms-filter: saturate(2);
        -moz-filter: saturate(2);
        -o-filter: saturate(2);
        filter: saturate(2);
    }

反色滤镜

反色滤镜使用invert来实现 就是婴儿照那种胶片的感觉(好像把年龄暴漏了) 取值范围0~1或0~100%，0为无效果，1或100%表示最大效果

测试代码：

.filter{
        -webkit-filter: invert(1); 
        -ms-filter: invert(1);
        -moz-filter: invert(1);
        -o-filter: invert(1);
        filter: invert(1);
    }

对比度滤镜

对比度和亮度一般在显示器都可以调试，CSS3中对比度使用contrast 取值范围>=0的数字或百分数，1为无效果

测试代码：

.filter{
        -webkit-filter: contrast(2); 
        -ms-filter: contrast(2);
        -moz-filter: contrast(2);
        -o-filter: contrast(2);
        filter: contrast(2);
    }

亮度滤镜

亮度滤镜使用brightness 取值范围>=0的数字或百分数，1为无效果

测试代码：

.filter{
        -webkit-filter: brightness(2); 
        -ms-filter: brightness(2);
        -moz-filter: brightness(2);
        -o-filter: brightness(2);
        filter: brightness(2);
    }

阴影滤镜

阴影滤镜其实在表单写button的时候用过，可以增加元素的立体感 使用drop-shadow来实现
格式：

filer: drop-shadow(x-offset y-offset 阴影模糊半径 阴影颜色)
x-offset和y-offset为阴影的相对于元素左上角的位移距离；

测试代码:

.filter{
        -webkit-filter: drop-shadow(5px 5px 3px #4D4DFF); 
        -ms-filter: drop-shadow(5px 5px 3px #4D4DFF);
        -moz-filter: drop-shadow(5px 5px 3px #4D4DFF);
        -o-filter: drop-shadow(5px 5px 3px #4D4DFF);
        filter: drop-shadow(5px 5px 3px #4D4DFF);
    }

效果美美的：

注意：阴影的外观受border-radius样式的影响

比如：

.filter{
        -webkit-filter: drop-shadow(5px 5px 3px #4D4DFF); 
        -ms-filter: drop-shadow(5px 5px 3px #4D4DFF);
        -moz-filter: drop-shadow(5px 5px 3px #4D4DFF);
        -o-filter: drop-shadow(5px 5px 3px #4D4DFF);
        filter: drop-shadow(5px 5px 3px #4D4DFF);
        border-radius: 20px;
    }

是不是更美了

当然也可以结合border来进行更好的美化效果。这里就不贴代码和效果了