CSS3 filter滤镜

6 Sep

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是元素真正意义上的投影。一图胜千言:

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,效果如下:

drop-shadow2

左图box-shadow只对盒子产生投影,右图drop-shadow滤镜才是真正的投影,它会为元素内任何非透明的部分加上投影。你可以用filter: drop-shadow滤镜很方便地为不规则的图形加上投影。

sepia

褐色,可设百分比也可设0-1的值。它会为图片增加一种降低饱和度的褐色效果,即所有像素的色相值都被收敛到35-40范围内,产生一种复古的效果。一图胜千言:

sepia

.sepia {
    -webkit-filter: sepia(0.5);
    filter: sepia(0.5);
}

<img class="sepia" src="head.png" />

左图为原图,右图是加上filter: sepia褐色滤镜的效果。

saturate

设饱和度,即HSL中的S,可设百分比。它可以改变图片色彩的饱和度。一图胜千言:

saturate

.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

.hue-rotate {
    -webkit-filter: hue-rotate(90deg);
    filter: hue-rotate(90deg);
}

<img class="hue-rotate" src="head.png" />

该滤镜直接改变了原图的色相,效果等同于<canvas>画布里对图片的每个像素进行单独处理,但代码相对简单多了。

grayscale

改变灰度,可设百分比也可设0-1的值。一图胜千言:

grayscale

.grayscale {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

<img class="grayscale" src="head.png" />

invert

反色,可设百分比也可设0-1的值。一图胜千言:

invert

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

<img class="invert" src="head.png" />

opacity

透明度,可设百分比也可设0-1的值。一图胜千言:

opacity

.opacity {
    -webkit-filter: opacity(.5);
    filter: opacity(.5);
}

<img class="opacity" src="head.png" />

brightness

改变亮度,可设百分比也可设0-1的值。它可以改变色彩的亮度。一图胜千言:

brightness

.brightness {
    -webkit-filter: brightness(200%);
    filter: brightness(200%);
}

<img class="contrast" src="head.png" />

contrast

改变对比度,可设百分比也可设0-1的值。一图胜千言:

contrast

.contrast {
    -webkit-filter: contrast(.5);
    filter: contrast(.5);
}

<img class="contrast" src="head.png" />

blur

模糊效果其实用了很多了,可设px值。例如一个常见的效果就是弹出对话框时将背景模糊掉。一图胜千言:

blur

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);,让模糊显得更逼真

blur

组合

滤镜可以同时指定多个,例如两层滤镜给图片增加金黄色的效果:

multi

.gold {
    -webkit-filter: sepia(1) saturate(4);
    filter: sepia(1) saturate(4);
}

<img class="gold" src="head.png" />

最后

我将这10个滤镜效果合并到例子页面了,你可以点击这里。滤镜可以多个组合使用,具体会产生什么效果,那得看设计师怎么设计。到写这篇文章为止,我对色彩的基础知识还不牢固,让我做视觉设计可能有点困难。但有了CSS的基础知识,对照着设计图做实现还是有可能的。学无止境,有空去学个摄影,说不定哪天就转型做视觉设计师了呢,哼哼。

Leave a Reply

Your email address will not be published. Required fields are marked *