CSS3 Trick – Mix Blend Mode

CSS3 有很多淫技巧,平时关注点很难落在这些特殊的技能点上,所以还是直接上干货吧。

这是一个典型的“抠除”效果,也就是在遮罩上面抠掉一块,露出遮罩下面的画面。

曾几何时,有些土办法可以达到这一的效果:
1、PS高手出场,一张图搞定
2、利用背景填充相关属性

.transparent-text {
    background-image:url(...);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* 甚至可以添加attachement属性,设置视差效果 */
    background-attachment: fixed;
}

3、利用SVG pattern 填充技能

<svg>
  <pattern id="pattern" patternUnits="userSpaceOnUse" width="750" height="800">
    <image width="750" height="800" xlink:href="image.jpg"></image>
  </pattern>
  <text x="0" y="80" class="headline" style="fill:url(#pattern);">Hello World.</text>
</svg>

然鹅,今天要介绍的是 Mix Blend Modes(混合模式)。

基础应用

简而言之,就像在Photoshop里的图层,重叠的两层,上层可以与下层做叠合效果。mix-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;

举个栗子:
比如,我们的底图是这样的

创建4个DOM

<div class="backdrop">
    <p class="text multiply">Taitō</p>
</div>
<div class="backdrop">
    <p class="text screen">Taitō</p>
</div>
<div class="backdrop">
    <p class="text darken">Taitō</p>
</div>
<div class="backdrop">
    <p class="text lighten">Taitō</p>
</div>

设置CSS

.backdrop {
    background: url("https://rpsthecoder.github.io/img-repo/Taitō%20by%20Jezael%20Melgoza.jpg") center;
    background-size: contain;
    margin: auto;
    margin-top: 40px;
    width: 75vw;
}

.text {
    font: bolder 12vw "Alfa Slab One";
    text-align: center;
    margin: 0;
    border: 4px solid;
}

.multiply {
    color: white;
    mix-blend-mode: multiply;
    background-color: rgba(59, 2, 6, 1);
}

.screen {
    color: black;
    mix-blend-mode: screen;
    background-color: rgba(244, 220, 211, 1);
}

.darken {
    color: white;
    mix-blend-mode: darken;
    background-color: rgba(59, 2, 6, 1);
}

.lighten {
    color: black;
    mix-blend-mode: lighten;
    background-color: rgba(244, 220, 211, 1);
}

最终效果:

扩展应用

可以在混合模式的基础上,再对文字施加以文本效果,甚至是动画animation和transition

.text {
  animation:  glow 3s infinite;
}

@keyframes glow {
  0% {
    text-shadow:  0 0 10px white;
  }

  15% {
    text-shadow: 2px 2px 10px rgba(255, 255, 255, 1),
                 -2px -2px 10px rgba(255, 255, 255, 1);
  }
  30% {
    text-shadow: 2px 2px 4px rgba(255, 255, 255, .7),
                 -2px -2px 4px rgba(255, 255, 255, .7);
  }
  50% {
    text-shadow: 20px 20px 50px rgba(255, 255, 255, .5),
                 -20px -20px 50px rgba(255, 255, 255, .5);
  }
}

除此外,使用blend mode跟以往的方式最大的不同,就是通过对蒙层设置 pointer-events ,可以实现让文字被点击和选中。

参考

MDN

发表评论

电子邮件地址不会被公开。 必填项已用*标注