HTML5技术

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

字号+ 作者:H5之家 来源:H5之家 2017-09-14 14:03 我要评论( )

承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! 系列 CSS 文章汇总在我的Github,持续更新,欢迎点个 star 订阅收藏。 OK,下面直接进入正文。本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不

承接上一篇你所不知道的 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; }

基本用法

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

image

CodePen Demo -- Css3 filter

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

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

image

常用用法

既然是标题是你所不知道的技巧与细节,那么比较常用的一些用法就不再赘述,通常我们见得比较多的 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%); }

filterhover

CodePen Demo -- CSS3 filter hover IMG

   blur -- 生成图像阴影

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

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

image

额,当然不行。

image

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

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

image

下面就利用滤镜,给它添加一层与原图颜色相仿的阴影效果,核心 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; } }

看看效果:

image

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

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

CodePen Demo -- filter create shadow

 

blur 混合 contrast 产生融合效果

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

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

  • filter: blur(): 给图像设置高斯模糊效果。
  • filter: contrast(): 调整图像的对比度。
  • 但是,当他们“合体”的时候,产生了奇妙的融合现象,通过对比度滤镜把高斯模糊的模糊边缘给干掉,利用高斯模糊实现融合效果。

    先来看一个简单的例子:

    filtermix

    CodePen Demo -- filter mix between blur and contrast

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

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • [javascript 实践篇]——那些你不知道的“奇淫巧技” - FannieGirl

      [javascript 实践篇]——那些你不知道的“奇淫巧技” - FannieGirl

      2017-07-11 09:02

    • 你可能不知道的7个CSS单位 - jerrylsxu

      你可能不知道的7个CSS单位 - jerrylsxu

      2016-05-27 12:04

    • LINQ中那些你所不知道的秘密 - 我们的阳光很盐

      LINQ中那些你所不知道的秘密 - 我们的阳光很盐

      2015-11-27 16:12

    • 你不知道的5个HTML5 API

      你不知道的5个HTML5 API

      2014-11-17 18:29

    网友点评
    r