神刀安全网

CSS3 filter滤镜

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

CSS3 filter滤镜

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

CSS3 filter滤镜

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

sepia

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

CSS3 filter滤镜

.sepia {     -webkit-filter: sepia(0.5);     filter: sepia(0.5); }  <img class="sepia" src="head.png" />

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

saturate

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

CSS3 filter滤镜

.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。一图胜千言:

CSS3 filter滤镜

.hue-rotate {     -webkit-filter: hue-rotate(90deg);     filter: hue-rotate(90deg); }  <img class="hue-rotate" src="head.png" />

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

grayscale

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

CSS3 filter滤镜

.grayscale {     -webkit-filter: grayscale(1);     filter: grayscale(1); }  <img class="grayscale" src="head.png" />

invert

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

CSS3 filter滤镜

.invert {     -webkit-filter: invert(1);     filter: invert(1); }  <img class="invert" src="head.png" />

opacity

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

CSS3 filter滤镜

.opacity {     -webkit-filter: opacity(.5);     filter: opacity(.5); }  <img class="opacity" src="head.png" />

brightness

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

CSS3 filter滤镜

.brightness {     -webkit-filter: brightness(200%);     filter: brightness(200%); }  <img class="contrast" src="head.png" />

contrast

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

CSS3 filter滤镜

.contrast {     -webkit-filter: contrast(.5);     filter: contrast(.5); }  <img class="contrast" src="head.png" />

blur

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

CSS3 filter滤镜

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

CSS3 filter滤镜

组合

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

CSS3 filter滤镜

.gold {     -webkit-filter: sepia(1) saturate(4);     filter: sepia(1) saturate(4); }  <img class="gold" src="head.png" />

最后

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

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » CSS3 filter滤镜

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址