>

不可思议的颜色混合模式

- 编辑:至尊游戏网站 -

不可思议的颜色混合模式

风趣的CSS标题(17):不敢相信 无法相信的颜色混合形式 mix-blend-mode

2017/05/10 · CSS · CSS

正文笔者: 伯乐在线 - chokcoco 。未经笔者许可,防止转载!
招待参与伯乐在线 专辑小编。

CSS3 新添了三个很有意思的质量 — mix-blend-mode ,在那之中 mix 和 blend 的国语意译均为混合,那么这本天性的功力直译过来正是混合混合方式,当然,大家大家平常号称混合格局

错落形式最广泛于 photoshop 中,是 PS 中十二分无敌的效能之生龙活虎。当然,瞎用乱用混合格局哪个人都会,利用混合格局将七个图层混合得到五个新的职能,只是要用到适当,也许说在 CSS 中央银行使混合格局营造出某个职能则要求对混合形式很深的明亮及不断的尝尝。

自家个人对混合方式的了然也足够起头,本文只是辅导我们走进 CSS 混合方式的世界,初浅的摸底混合方式及尝试运用它构建一些效用。

切磋一些幽默的CSS标题(十二)-- 不敢相信 无法相信的颜色混合形式 mix-blend-mode,cssmix-blend-mode

开本体系,谈谈一些相映成趣的 CSS 标题,标题类型南征北战,想到怎样说什么样,不仅仅为了推广一下消除难题的思绪,更关乎一些便于忽略的 CSS 细节。

解题不思量宽容性,标题南征北战,想到什么说哪些,假若解题中有您认为到到生僻的 CSS 属性,赶紧去补习一下吗。

不断更新,不断更新,不断更新,重要的专门的事业说三回。

评论一些有趣的CSS标题(风姿罗曼蒂克)-- 侧面竖条的贯彻形式

斟酌一些风趣的CSS标题(二)-- 从条纹边框的达成谈盒子模型

座谈一些珠璧交辉的CSS标题(三)-- 层叠顺序与仓库上下文知多少

商量一些幽默的CSS标题(四)-- 从倒影说到,谈谈 CSS 承袭 inherit

座谈一些风趣的CSS题目(五)-- 单行居中,两行居左,超越两行省略

舆情一些风趣的CSS标题(六)-- 全宽容的多列均匀布局难题

商量一些有意思的CSS标题(七)-- 消失的边界线难点

座谈一些美不可言的CSS标题(八)-- 纯CSS的领航栏Tab切换方案

座谈一些有趣的CSS标题(九)-- 奇妙的落到实处 CSS 斜线

评论一些神乎其神的CSS题目(十)-- 结构性伪类选用器

商酌一些有意思的CSS标题(十风流罗曼蒂克)-- reset.css知多少

评论一些妙趣横生的CSS标题(十四)-- 浓厚钻探 CSS 性格检验 @supports 与 Modernizr

探讨一些幽默的CSS标题(十五)-- 奇妙地创造背景象渐变动画!

商酌一些珠璧交辉的CSS标题(十二)-- 纯 CSS 方式达成 CSS 动画的脚刹踏板与广播!

钻探一些风趣的CSS标题(十七)-- 谈谈 CSS 关键字 initial、inherit 和 unset

至尊游戏网站,座谈一些风趣的CSS标题(十三)-- 巧妙的 background-clip: text

享有标题汇总在自己的 Github 。

正文自此处开头:

CSS3 新添了一个很有意思的属性 -- mix-blend-mode ,个中 mix 和 blend 的华语意译均为混合,那么这几个性情的功效直译过来正是交织混合形式,当然,大家大家普通称为混合格局

掺杂格局最广大于 photoshop 中,是 PS 中十三分精锐的法力之生龙活虎。当然,瞎用乱用混合情势哪个人都会,利用混合格局将多少个图层混合获得一个新的作用,只是要用到卓越,只怕说在 CSS 中利用混合形式营造出豆蔻梢头部分作用则必要对混合形式很深的知晓及不断的品尝。

本人个人对混合情势的明亮也特别浅显,本文只是指引我们走进 CSS 混合情势的社会风气,初浅的摸底混合格局及品尝运用它制作一些效果。

 

mix-blend-mode 概述

上文也说了,mix-blend-mode 描述了元素的内容应当与成分的亲情父成分的剧情和因素的背景怎么着混合。大家将 PS 中图层的概念替换为 HTML 中的成分。

探访可取的值有怎么着:

JavaScript

{ 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; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  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;
}

除去 initial 默认、inherit 继承 和 unset 还原那 3 个颇负 CSS 属性都能够取的值外,还恐怕有其它的 15个具体的取值,对应不一致的混合效果。

如若不是正式的 PSer 每一日和混合形式打交道,想要记住这么多效果与利益,照旧挺艰难的。可是有前人帮大家计算了风流倜傥番,看看哪些相比较好的精晓可能说回忆那些功效,摘自Photoshop中高级升级连串之生龙活虎——图层混合情势原理:

至尊游戏网站 1

自然,上海教室是 PS 中的混合方式,数量比 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;
}

除去 initial 默认、inherit 继承 和 unset 还原那 3 个有着 CSS 属性都足以取的值外,还会有此外的 16 个实际的取值,对应不一样的混合效果。

纵然不是正规的 PSer 每日和交集格局打交道,想要记住这么多职能,如故挺艰苦的。可是有前人帮我们总结了后生可畏番,看看哪些相比好的领会恐怕说回忆这么些功能,摘自Photoshop中高级进级类别之风流罗曼蒂克——图层混合方式原理:

至尊游戏网站 2

本来,上海图书馆是 PS 中的混合格局,数量比 CSS 中的多出多少个,但是分类依旧通用的。

 

mix-blend-mode 实例

百闻比不上一见,要会接纳 mix-blend-mode ,关键照旧要迈出使用这一步。这里笔者写了一个轻便易行的 德姆o,包含了具有的插花格局,能够差非常少试一下各样形式的效果:

See the Pen mix-blend-mode 混合形式示例 by Chokcoco (@Chokcoco) on CodePen.

CodePen Demo(-webkit- Only)

本来,仅仅是那般是感受不到混合方式的吸引力的,上面就罗列多少个使用了交集格局营造的 CSS 动画。

mix-blend-mode 实例

百闻比不上一见,要会选拔 mix-blend-mode ,关键仍然要跨过使用这一步。这里自身写了一个回顾的 Demo,包罗了具备的混杂情势,能够大致试一下各样格局的成效:

CodePen Demo(-webkit- Only)

自然,仅仅是如此是感受不到混合格局的吸重力的,上面就罗列多少个使用了交集形式塑造的 CSS 动画。

 

使用 mix-blend-mode: screen 滤色方式构建 loading 效果

为了照拂少数访谈 codepen 慢同学,特意制作了该功效的 Gif,看看效果:

至尊游戏网站 3

See the Pen mix-blend-mode: screen by Chokcoco (@Chokcoco) on CodePen.

CodePen Demo(-webkit- Only)

此间运用了 mix-blend-mode: screen 滤色格局,那是生龙活虎种提亮图像形混合形式。滤色的意国语是 screen,相当于多少个颜色相同的时间投影到八个显示屏上的合成颜色。具体做法是把五个颜色都反相,相乘,然后再反相。轻易回想为”让白更白,而黑不改变”。(不肯定拾叁分规范,如有错误还请指正)

大家将四个 div 依据差别延时(animation-delay)急剧旋转起来,来达成大器晚成种很显然很魔性的效果与利益,切合做 loading 图。

使用 mix-blend-mode: screen 滤色方式构建 loading 效果

为了照应少数访谈 codepen 慢同学,特意制作了该意义的 Gif,看看效果:

至尊游戏网站 4

CodePen Demo(-webkit- Only)

那边运用了 mix-blend-mode: screen 滤色格局,那是意气风发种提亮图像形混合情势。滤色的爱尔兰语是 screen,也正是两个颜色同期投影到叁个荧屏上的合成颜色。具体做法是把多个颜色都反相,相乘,然后再反相。轻便记念为"让白更白,而黑不改变"。(不必然特别确切,如有错误还请指正)

大家将三个 div 依照分歧延时(animation-delay)大幅旋转起来,来到达意气风发种很鲜明很魔性的效劳,符合做 loading 图。

 

使用 mix-blend-mode: difference 差值格局

再举个例证, mix-blend-mode: difference 差值情势。查看种种通道中的颜色新闻,相比较底色和绘图色,用较亮的像素点的像素值减去较暗的像素点的像素值。与血牙红混合将使底色反相;与浅绿灰混合则不爆发变化。

浅显一点就是上边图层的亮区将人世图层的水彩实行反相,暗区则将颜色符合规律显示出来,效果与原图疑似一心相反的颜色。

拜谒利用了那些混合格局,运用在一些多图层效果里,能够产生极其炫酷的插花效果:

至尊游戏网站 5

See the Pen pureCssAnimation(webkit Only) by Chokcoco (@Chokcoco) on CodePen.

CodePen Demo(-webkit- Only)

上海体育场所肖似复杂,其实领悟原理之后极度的简练,6 个旋转的 div ,通过 mix-blend-mode: difference 混合在黄金时代道。

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

再比方, mix-blend-mode: difference 差值形式。查看种种通道中的颜色音信,比较底色和绘图色,用较亮的像素点的像素值减去较暗的像素点的像素值。与反动混合将使底色反相;与石绿混合则不发生变化。

开端一点便是下边图层的亮区将人世图层的颜料进行反相,暗区则将颜色平常突显出来,效果与原图像是完全相反的水彩。

拜谒利用了那些混合方式,运用在部分多图层效果里,能够生出十分五彩缤纷的混杂效果:

至尊游戏网站 6

CodePen Demo(-webkit- Only)

上海体育场面临近复杂,其实掌握原理之后非常的轻松,6 个旋转的 div ,通过 mix-blend-mode: difference 混合在一齐。

 

应用多掺杂方式塑造文字故障效果

谈到底,想到笔者此前制作的一个文字故障效果,也得以很好的融合混合格局,制作出下列效果:

至尊游戏网站 7

See the Pen mixblendmode制作文字故障效果 by Chokcoco (@Chokcoco) on CodePen.

CodePen Demo(-webkit- Only)

不用猜疑你的肉眼,上海教室的效用是纯 CSS 完结的功能,运用了三种颜色混合方式达成颜色叠加,变亮等作用。

本文涉及的正规化理论知识超级少,未有用比一点都不小的字数去呈报每二个掺杂格局的法力及意义。笔者对混合方式的知道也正如粗浅,本文意在通过某个德姆o 让读者学会初叶去行使这么些混合情势作用,俗话说修行在个人,假若真的感兴趣的能够自动浓郁切磋。

动用多交集方式营造文字故障效果

末尾,想到自个儿事先制作的四个文字故障效果,也能够很好的一德一心混合形式,制作出下列效果:

至尊游戏网站 8

CodePen Demo(-webkit- Only)

不用疑忌你的眼眸,上图的作用是纯 CSS 完结的功能,运用了各个颜色混合方式达成颜色叠合,变亮等功用。

正文涉及的正老董论知识少之又少,未有用非常大的字数去陈说每贰个掺杂情势的效果及功用。作者对混合情势的明亮也相比浅显,本文意在通过一些 Demo 让读者学会开头去接收这一个混合格局作用,俗话说修行在个人,要是真的感兴趣的能够自动深远探讨。

 

兼容性

最后,看一眼包容性吧,这种奇特的属性包容性寒常都不怎么好,笔者事先几篇小说也提到过了,面向现在编制程序,所以本文的 CodePen Demo 都必要在 -webkit- 内核浏览器下看到:

至尊游戏网站 9

到此本文结束,借使还犹如何疑难依然提出,能够多多交换,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

  • 有趣的CSS标题(1): 侧边竖条的贯彻模式
  • 幽默的CSS标题(2): 从条纹边框的贯彻谈盒子模型
  • 风趣的CSS标题(3): 层叠顺序与商旅上下文知多少
  • 有意思的CSS题目(4): 从倒影说到,谈谈 CSS 承继inherit
  • 风趣的CSS标题(5): 单行居中,两行居左,抢先两行省略
  • 有意思的CSS标题(6): 全包容的多列均匀布局难题
  • 有趣的CSS标题(7):消失的边界线难点
  • 幽默的CSS标题(8):纯CSS的导航栏Tab切换方案
  • 风趣的CSS标题(9):神奇完毕 CSS 斜线
  • 有意思的CSS题目(10):结构性伪类选取器
  • 有趣的CSS题目(11):reset.css 知多少?
  • 风趣的CSS题目(12):你该知道的书体 font-family
  • 有意思的CSS标题(13):奇妙地制造背景观渐变动画!
  • 风趣的CSS标题(14): 纯 CSS 形式落到实处 CSS 动画的中断与广播!
  • 有趣的CSS题目(15): 谈谈 CSS 关键字 initial、inherit 和 unset
  • 有趣的CSS题目(16): 奇妙的 background-clip: text

打赏扶助作者写出更加多好作品,多谢!

打赏笔者

兼容性

末段,看一眼包容性吧,这种奇异的品质包容性寒日都微微好,作者事先几篇小说也事关过了,面向以后编制程序,所以本文的 CodePen 德姆o 都务求在 -webkit- 内核浏览器下见到:

至尊游戏网站 10

到此本文停止,假诺还有哪些难题如故提出,能够多多沟通,原创小说,文笔有限,学浅才疏,文中若有不正之处,万望告知。

匪夷所思的颜色混合方式 mix-blend-mode,cssmix-blend-mode 开本体系,谈谈一些风趣的 CSS 标题,标题类型天马...

打赏接济自身写出更加多好文章,多谢!

任选风流罗曼蒂克种支付方式

至尊游戏网站 11 至尊游戏网站 12

3 赞 3 收藏 评论

关于小编:chokcoco

至尊游戏网站 13

经不住光阴似箭,逃可是此间少年。 个人主页 · 小编的小说 · 63 ·    

至尊游戏网站 14

本文由软件综合发布,转载请注明来源:不可思议的颜色混合模式