复刻三国杀钻闪金卡 蒸蒸日上~

西维
810 阅读3分钟

但行好事 莫问前程

前言🎀

随着印刷工艺的发展 实体卡越来越好看了：

image.png

（看着床底生灰的三国杀典藏礼盒，我已经不会再买了🙈）

不过随着 CSS 的愈发强大，我们已能在网页中尝试复刻它们：

实现逻辑大致是：linear-gradient渐变 + mix-blend-mode混合模式。

（推荐一个渐变色网站：webgradients.com/ ）

渐变相信大家已经不陌生了，所以本文我们一起学习 mix-blend-mode 的相关知识，探索它的应用。

简介

mix-blend-mode 是 CSS3 中的一个属性，是混合模式 blend mode 在网页中的实现，用于 控制元素与其背景之间的混合效果。

这个属性通常用于创建各种独特的设计效果，提升网页的视觉吸引力。

inner.png

通过设置不同的 mix-blend-mode 值，可以实现各种视觉效果，比如颜色叠加、透明度调节、色彩变化等。

image.png

blend mode 混合模式，是图像处理技术中的一个名词，主要功效是可以用不同的方法将对象颜色与底层对象的颜色混合。

应用

背景融合

将前景元素（如文本、图标、形状等）与复杂的背景图案进行融合，创造出独特的视觉风格。

mix-blend-mode.gif 

  .result {
    // ...

    &::before {
      background-image: linear-gradient(...);
      mix-blend-mode: overlay;
    }

    &::after {
      background-image: url(...);
      mix-blend-mode: color-dodge;
    }
  }
}

前不久开发了一个类似微信划线的需求，下划线和高亮逻辑基于canvas实现。

image.png

但这带来了一个问题：高亮时底色遮住了文字

image.png

使用mix-blend-mode: darken完美解决。

image.png

滤镜效果

.overlay-img {
  mix-blend-mode: hard-light;
  filter: saturate(1.5) brightness(1.2);
}

属性值

blend mode根据效果可以分类为：

  1. 组合模式（正常、溶解）
  2. 加深混合模式（变暗、正片叠底、颜色加深、线性加深）
  3. 减淡混合模式（变亮、滤色、颜色减淡、线性减淡）
  4. 对比混合模式（叠加、柔光、强光、亮光、线性光、点光、实色混合）
  5. 比较混合模式（差值、排除）
  6. 色彩混合模式（色相、饱和度、颜色、亮度）。

在 CSS mix-blend-mode 中它们支持的属性值如下：

{
  // <blend-mode> =
  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> =
  mix-blend-mode: plus-lighter;
  mix-blend-mode: plus-darker;
}

对于支持 CSS Paint API 的浏览器，mix-blend-mode 还提供了：Plus darker 模式可以加深底层颜色，Plus lighter 可以给底层颜色一个浅色滤镜效果。

具体效果可以参考 MDN官方示例，但更多的还是需要实践。

image.png

兼容性

image.png

总结

文本与背景的融合、图像叠加、滤镜效果、复杂背景图案的构建、UI组件视觉强化、动态交互、响应式设计的优化 . . .

mix-blend-mode 作为一个已经发展成熟的属性，展现出了无与伦比的实用价值与艺术魅力，特别在视觉表现与交互体验上效果显著，十分值得学习和使用。

个人的理解非常有限，但 “不积跬步无以至千里”，希望我们在前端之路上更进一步。

结语🎉

不要光看不实践哦，希望本文能对你有所帮助。

持续更新前端知识，脚踏实地不水文，真的不关注一下吗~

写作不易，如果有收获还望 点赞+收藏 🌹

才疏学浅，如有问题或建议还望指教！

avatar
文章
阅读
粉丝