你所不知道的 CSS 滤镜技巧与细节 - ChokCoco

      2020-08-01 22:32      HTML5

承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货!

系列 CSS 文章汇总在我的Github,持续更新,欢迎点个 star 订阅收藏。

OK,下面直接进入正文。本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE 系列时代的滤镜,语法如下,还未接触过这个属性的可以先简单到MDN -- filter了解下:

{filter: blur(5px);filter: brightness(0.4);filter: contrast(200%);filter: drop-shadow(16px 16px 20px blue);filter: grayscale(50%);filter: hue-rotate(90deg);filter: invert(75%);filter: opacity(25%);filter: saturate(30%);filter: sepia(60%);/* Apply multiple filters */filter: contrast(175%) brightness(3%);/* Global values */filter: inherit;filter: initial;filter: unset;}

基本用法

先简单看看几种滤镜的效果:

CodePen Demo -- Css3 filter

你可以通过 hover 取消滤镜,观察该滤镜的效果。

简单来说,CSS 滤镜就是提供类似 PS 的图形特效,像模糊,锐化或元素变色等功能。通常被用于调整图片,背景和边界的渲染。本文就会围绕这些滤镜展开,看看具体能怎么使用或者玩出什么花活。

常用用法

既然是标题是你所不知道的技巧与细节,那么比较常用的一些用法就不再赘述,通常我们见得比较多的 CSS 滤镜用法有:

如果对上面的技巧不是很了解,可以稍稍百度谷歌一下,下文将由浅及深,介绍一些不大常见的滤镜的具体用法及一些小细节:

contrast/brightness-- hover 增亮图片

通常页面上的按钮,都会有 hover/active 的颜色变化,以增强与用户的交互。但是一些图片展示,则很少有 hover 的交互,运用filter: contrast()或者filter: brightness()可以在 hover 图片的时候,调整图片的对比图或者亮度,达到聚焦用户视野的目的。

brightness表示亮度,contrast 表示对比度。

当然,这个方法同样适用于按钮,简单的 CSS 代码如下:

.btn:hover,.img:hover {transition: filter .3s;filter: brightness(1.1) contrast(110%);}

CodePen Demo -- CSS3 filter hover IMG

blur-- 生成图像阴影

通常而言,我们生成阴影的方式大多是box-shadow、filter: drop-shadow()、text-shadow。但是,使用它们生成阴影是阴影只能是单色的。

有读者同学会问了,你这么说,难道还可以生成渐变色的阴影不成?

额,当然不行。

这个真不行,但是通过巧妙的利用filter: blur模糊滤镜,我们可以假装生成渐变色或者说是颜色丰富的阴影效果。

假设我们有下述这样一张头像图片:

下面就利用滤镜,给它添加一层与原图颜色相仿的阴影效果,核心 CSS 代码如下:

.avator {position: relative;background: url($img) no-repeat center center;background-size: 100% 100%;&::after {content: "";position: absolute;top: 10%;width: 100%;height: 100%;background: inherit;background-size: 100% 100%;filter: blur(10px) brightness(80%) opacity(.8);z-index: -1;}}

看看效果:

其简单的原理就是,利用伪元素,生成一个与原图一样大小的新图叠加在原图之下,然后利用滤镜模糊filter: blur()配合其他的亮度/对比度,透明度等滤镜,制作出一个虚幻的影子,伪装成原图的阴影效果。

嗯,最重要的就是这一句filter: blur(10px) brightness(80%) opacity(.8);。

CodePen Demo -- filter create shadow

blur混合contrast产生融合效果

接下来介绍的这个,是本文的重点,模糊滤镜叠加对比度滤镜产生的融合效果。让你知道什么是 CSS 黑科技!

单独将两个滤镜拿出来,它们的作用分别是:

filter: blur(): 给图像设置高斯模糊效果。filter: contrast(): 调整图像的对比度。

但是,当他们“合体”的时候,产生了奇妙的融合现象,通过对比度滤镜把高斯模糊的模糊边缘给干掉,利用高斯模糊实现融合效果。

先来看一个简单的例子:

CodePen Demo -- filter mix between blur and contrast

仔细看两圆相交的过程,在边与边接触的时候,会产生一种边界融合的效果。