CSS3里的filter滤镜是个很酷炫的元素。本篇介绍一下几个常用的滤镜效果。
- drop-shadow
- sepia
- saturate
- hue-rotate
- grayscale
- invert
- opacity
- brightness
- contrast
- blur
drop-shadow
能为元素增加投影效果和box-shadow类似。基本参数：
x-offset / y-offset：必须的参数。水平和垂直阴影的偏移量。正值表示往x轴y轴正方向偏移（即往右往下）。负值反过来往x轴y轴反方向偏移（即往左往上）。
radius：投影圆角，可选
color：投影颜色，可选
从参数就可以发现它和box-shadow的一些表面差别，例如box-shadow支持inset内阴影，但该滤镜没有。例如box-shadow可以阴影叠加，但该滤镜不行。除了表面的这些语法上的不同外，两者根本性的差别是，box-shadow只是盒子投影，但drop-shadow是元素真正意义上的投影。一图胜千言：
.speech {
position: relative;
display: inline-flex;
flex-direction: column;
justify-content: center;
vertical-align: bottom;
padding:0 .8em;
height: 2em;
margin: .6em;
background: #fb3;
font: 200%/1.6 Baskerville, Palatino, serif;
text-align: center;
border-radius: .3em;
}
.speech::before {
content: '';
position: absolute;
top: .5em;
right: -.4em;
width: 0;
height: 0;
border: .4em solid transparent;
border-left-color: #fb3;
border-right-width: 0;
}
.bs {
box-shadow: .1em .1em .1em rgba(0,0,0,.5);
}
.ds {
-webkit-filter: drop-shadow(.1em .1em .1em rgba(0,0,0,.5));
filter: drop-shadow(.1em .1em .1em rgba(0,0,0,.5));
}
<div class="speech bs">约吗</div>
<div class="speech ds">不约</div>
左图用box-shadow，右图用filter: drop-shadow。且两个投影的参数完全相同，均为.1em .1em .1em rgba(0,0,0,.5);。图中可看出效果不同。左图用box-shadow只能对盒子产生投影，伪元素三角形箭头没有投影。而右图drop-shadow滤镜可以对整个元素产生投影，所以三角形箭头也会有投影。以前要实现这个三角形箭头的投影，可能要放弃伪元素，将三角形箭头用div来模拟，在该div上加上投影，再将三角形箭头的div调整位置拼接到对话框上，这样很麻烦。所以有时为了偷懒，干脆无视这个三角形箭头的投影。现在方便了，一行代码就搞定了。
再深层次地看，将上面CSS中background: #fb3;改成transparent，效果如下：
左图box-shadow只对盒子产生投影，右图drop-shadow滤镜才是真正的投影，它会为元素内任何非透明的部分加上投影。你可以用filter: drop-shadow滤镜很方便地为不规则的图形加上投影。
sepia
褐色，可设百分比也可设0-1的值。它会为图片增加一种降低饱和度的褐色效果，即所有像素的色相值都被收敛到35-40范围内，产生一种复古的效果。一图胜千言：
.sepia {
-webkit-filter: sepia(0.5);
filter: sepia(0.5);
}
<img class="sepia" src="head.png" />
左图为原图，右图是加上filter: sepia褐色滤镜的效果。
saturate
设饱和度，即HSL中的S，可设百分比。它可以改变图片色彩的饱和度。一图胜千言：
.saturate {
-webkit-filter: saturate(200%);
filter: saturate(200%);
}
<img class="saturate" src="head.png" />
左图为原图，右图是加上filter: saturate两倍饱和度的效果，可以看到色彩更加鲜艳。
hue-rotate
将色相进行偏移，即将HSL中的H值进行偏移。例如原始色相为40，设filter: hue-rotate(90deg);能将色相改成135。一图胜千言：
.hue-rotate {
-webkit-filter: hue-rotate(90deg);
filter: hue-rotate(90deg);
}
<img class="hue-rotate" src="head.png" />
该滤镜直接改变了原图的色相，效果等同于<canvas>画布里对图片的每个像素进行单独处理，但代码相对简单多了。
grayscale
改变灰度，可设百分比也可设0-1的值。一图胜千言：
.grayscale {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
<img class="grayscale" src="head.png" />
invert
反色，可设百分比也可设0-1的值。一图胜千言：
.invert {
-webkit-filter: invert(1);
filter: invert(1);
}
<img class="invert" src="head.png" />
opacity
透明度，可设百分比也可设0-1的值。一图胜千言：
.opacity {
-webkit-filter: opacity(.5);
filter: opacity(.5);
}
<img class="opacity" src="head.png" />
brightness
改变亮度，可设百分比也可设0-1的值。它可以改变色彩的亮度。一图胜千言：
.brightness {
-webkit-filter: brightness(200%);
filter: brightness(200%);
}
<img class="contrast" src="head.png" />
contrast
改变对比度，可设百分比也可设0-1的值。一图胜千言：
.contrast {
-webkit-filter: contrast(.5);
filter: contrast(.5);
}
<img class="contrast" src="head.png" />
blur
模糊效果其实用了很多了，可设px值。例如一个常见的效果就是弹出对话框时将背景模糊掉。一图胜千言：
dialog {
position: fixed;
top: 50%; left: 50%;
z-index: 1;
width: 10em;
padding: 2em;
margin: -5em;
border: 1px solid silver;
background-color: #FFF;
text-align: center;
border-radius: .5em;
box-shadow: 0 .2em .5em rgba(0,0,0,.5), //给不支持filter的浏览器一种安全回退方案
0 0 0 100vmax rgba(0,0,0,.2);
}
main.blur {
-webkit-filter: blur(3px);
filter: blur(3px);
}
<main class="blur">……</main>
<dialog>背景模糊啦</dialog>
滤镜blur本身没什么可多说的，效果一目了然。需要注意的是，要一个额外的标签将对话框外的元素包起来。否则如果给body用blur的话，全屏包括对话框都会模糊。
还可以给背景加上对比度和亮度filter: blur(3px) contrast(.8) brightness(.8);，让模糊显得更逼真
组合
滤镜可以同时指定多个，例如两层滤镜给图片增加金黄色的效果：
.gold {
-webkit-filter: sepia(1) saturate(4);
filter: sepia(1) saturate(4);
}
<img class="gold" src="head.png" />
最后
我将这10个滤镜效果合并到例子页面了，你可以点击这里。滤镜可以多个组合使用，具体会产生什么效果，那得看设计师怎么设计。到写这篇文章为止，我对色彩的基础知识还不牢固，让我做视觉设计可能有点困难。但有了CSS的基础知识，对照着设计图做实现还是有可能的。学无止境，有空去学个摄影，说不定哪天就转型做视觉设计师了呢，哼哼。
网友评论