1. 首页

【趣聊Css-13】不可思议的颜色混合模式 mix-blend-mode(上)

CSS3 新增了一个很有意思的属性 — mix-blend-mode ,其中 mix 和 blend 的中文意译均为混合,那么这个属性的作用直译过来就是混合混合模式,当然,我们我们通常称之为混合模式

混合模式最常见于 photoshop 中,是 PS 中十分强大的功能之一。当然,瞎用乱用混合模式谁都会,利用混合模式将多个图层混合得到一个新的效果,只是要用到恰到好处,或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。

我个人对混合模式的理解也十分浅显,本文只是带领大家走进 CSS 混合模式的世界,初浅的了解混合模式及尝试使用它制作一些效果。

mix-blend-mode 概述

上文也说了,mix-blend-mode 描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。我们将 PS 中图层的概念替换为 HTML 中的元素。

看看可取的值有哪些:

{
  mix-blend-mode: normal;         // 正常
  mix-blend-mode: multiply;       // 正片叠底
  mix-blend-mode: screen;         // 滤色
  mix-blend-mode: overlay;        // 叠加
  mix-blend-mode: darken;         // 变暗
  mix-blend-mode: lighten;        // 变亮
  mix-blend-mode: color-dodge;    // 颜色减淡
  mix-blend-mode: color-burn;     // 颜色加深
  mix-blend-mode: hard-light;     // 强光
  mix-blend-mode: soft-light;     // 柔光
  mix-blend-mode: difference;     // 差值
  mix-blend-mode: exclusion;      // 排除
  mix-blend-mode: hue;            // 色相
  mix-blend-mode: saturation;     // 饱和度
  mix-blend-mode: color;          // 颜色
  mix-blend-mode: luminosity;     // 亮度

  mix-blend-mode: initial;
  mix-blend-mode: inherit;
  mix-blend-mode: unset;
  //前端进阶资源分享 www.javascriptc.com 趣聊CSS系列
}

除去 initial 默认、inherit 继承 和 unset 还原这 3 个所有 CSS 属性都可以取的值外,还有另外的 16 个具体的取值,对应不同的混合效果。

如果不是专业的 PSer 天天和混合模式打交道,想要记住这么多效果,还是挺困难的。不过有前人帮我们总结了一番,看看如何比较好的理解或者说记忆这些效果,摘自Photoshop中高级进阶系列之一——图层混合模式原理

趣聊CSS系列 用心分享 做有温度的攻城狮

当然,上图是 PS 中的混合模式,数量比 CSS 中的多出几个,但是分类还是通用的。 JS中文网 – 前端进阶资源分享 www.javascriptc.com 趣聊CSS系列.

mix-blend-mode 实例

眼见为实,要会使用 mix-blend-mode ,关键还是要迈出使用这一步。这里我写了一个简单的 Demo,包括了所有的混合模式,可以大概试一下各个模式的效果:

CodePen Demo

当然,仅仅是这样是感受不到混合模式的魅力的,下面就列举几个利用了混合模式制作的 CSS 动画。

使用 mix-blend-mode: screen 滤色模式制作 loading 效果

为了照顾某些访问 codepen 慢同学,特意制作了该效果的 Gif,看看效果:

比如,darken颜色混合模式,就是选择两个像素中颜色更深的一个输出。当将混合模式 … 对于早期的浏览器,需要在CSS里使用浏览器引擎前缀,或激活实验性设置,mixmode-loading

CodePen Demo

这里使用了 mix-blend-mode: screen 滤色模式,这是一种提亮图像形混合模式。滤色的英文是 screen,也就是两个颜色同时投影到一个屏幕上的合成颜色。具体做法是把两个颜色都反相,相乘,然后再反相。简单记忆为”让白更白,而黑不变”。(不一定十分准确,如有错误还请指正)

我们将三个 div 按照不同延时(animation-delay)小幅度旋转起来,来达到一种很显眼很魔性的效果,适合做 loading 图。

使用 mix-blend-mode: difference 差值模式

再举个例子, mix-blend-mode: difference 差值模式。查看每个通道中的颜色信息,比较底色和绘图色,用较亮的像素点的像素值减去较暗的像素点的像素值。与白色混合将使底色反相;与黑色混合则不产生变化。

通俗一点就是上方图层的亮区将下方图层的颜色进行反相,暗区则将颜色正常显示出来,效果与原图像是完全相反的颜色。

看看利用了这个混合模式,运用在一些多图层效果里,可以产生十分绚烂的混合效果:

前端进阶资源分享 www.javascriptc.com 趣聊CSS系列,CSS3 新增了一个很有意思的属性-- mix-blend-mode ,其中mix 和blend 的中文意译均为混合,那么这个属性的作用直译过来就是混合混合模式

CodePen Demo

上图看似复杂,其实了解原理之后非常的简单,6 个旋转的 div ,通过 mix-blend-mode: difference 混合在一起。

使用多混合模式制作文字故障效果

最后,想到我之前制作的一个文字故障效果,也可以很好的融合混合模式,制作出下列效果:

blend-mode这个词关键是是一组描述混合模式的类型,JS中文网(www.javascriptc.com

CodePen Demo

不用怀疑你的眼睛,上图的效果是纯 CSS 实现的效果,运用了多种颜色混合模式实现颜色叠加,变亮等效果。

本文涉及的专业理论知识很少,没有用很大的篇幅去描述每一个混合模式的效果及作用。我对混合模式的理解也比较粗浅,本文旨在通过一些 Demo 让读者学会开始去使用这些混合模式效果,俗话说修行在个人,如果真的感兴趣的可以自行深入研究。

最后,看一眼兼容性吧,这种奇妙的属性兼容性通常都不怎么好,我之前几篇文章也提到过了,面向未来编程,所以本文的 CodePen Demo 都要求在 -webkit- 内核浏览器下观看:

image

JS中文网(www.javascriptc.com)是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区.

最后

本文有下半篇:不可思议的混合模式 background-blend-mode,可以配合阅读,效果更好。

https://github.com/chokcoco/iCSS/issues/16

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文来源于网络,其版权属原作者所有,如有侵权,请与小编联系,谢谢!

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:【趣聊Css-13】不可思议的颜色混合模式 mix-blend-mode(上)

链接:https://www.javascriptc.com/558.html

原文链接:https://github.com/chokcoco/iCSS/issues/16

« 【趣聊Css-14】不可思议的混合模式 background-blend-mode(下)
【趣聊Css-12】网页适配vh、vw、vmin、vmax 知多少?»
Flutter 中文教程资源

相关推荐

QR code