This article will introduce a small skill, through the mix mode mix-Blending-mode cleverly realize the hollow wave effect of the text.

The cause of

One day, a group of friends asked me privately. How to use CSS to achieve the following effect, a text wave effect:

Without thinking about it, I said, “That’s easy.”

Turn on the CodePen expertly, and, boy, it’s not that simple. It’s very tricky to implement with pure CSS.

Pure CSS implements wave effects

Before we get to the point, let’s review that using CSS to implement waves, if not in hollowed-out text, but in a div container, you can use scrolling large circles, something like this:

The container applies Overflow: Hidden to get something like this:

If you don’t understand this trick, just click on this article: Wave effect with PURE CSS!

How do I apply this effect in text

OK, back to the subject, so how do you apply this effect in text?

What’s the problem?

Let’s first try black text on a white background with this effect:

<div class="g-container">
    <p>TEXT WAVE</p>
</div>
Copy the code

The core CSS pseudocode is as follows:

p {
    background: #fff;
    color: # 000;
    
    &::before,
    &::after {
        content: "";
        position: absolute;
        border-radius: 45% 48% 43% 47%;
        background: rgba(3.169.244.85);
        animation: rotate 10s infinite linear;
    }
    
    &::after {
        border-radius: 43% 47% 44% 48%;
        animation: rotate 10s infinite .5slinear; }}@keyframes rotate {
    0% {
        transform: translate(-50%, -50%) rotate(0);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg); }}Copy the code

It looks something like this:

Of course, we can also place it under the text layer to make it more straight:

p{... &::before,
    &::after{... +z-index: -1; }}Copy the code

Oh, too bad, that’s not going to work — it’s just the text being hollowed out so it has a wavy effect inside.

Try using transparent text

We’re going to try to make the text transparent

  1. You can usecolor: transparentMake text transparent
  2. Try to usebackground-clipimplementation

Emmm, try them one by one. If the font is set to transparent, the font color will turn white due to the white background set to

. The whole thing is white, failure.

What if the background is set to black and background-clip: text? The font is still black, and the waves still cannot penetrate the hollowed out font

p{+background-clip: text;
}
Copy the code

And that’s it:

Powerful hybrid mode

It seems that this road is blocked, we have to find another way.

One of the other things you can do with colors in CSS is filter, and the other is mix-blending-mode. Hybrid mode, though, is something to try.

There are also mix-blending-mode and background-blending-mode in CSS. Blending mode is most commonly used in Photoshop and is one of the most powerful features in PHOTOSHOP. It is well supported in CSS.

We tried to add a blend mode to the two large circles, and under the current color scheme, that is, black text on a white background, filter out the blue under the white background.

You can only see the blue wave effect on the black font when you add mix-blast-mode: lighten to the two wave circles.

Of course, another blend mode, mix-blending-mode: screen, works similarly:

So far, through the hybrid mode, we have cleverly achieved such a wave effect of hollow text. The blend mode feature filters out some of the colors we don’t want to see in the effect, leaving only the right colors in the right places.

Complete the code you can swipe: CSS Inspiration – Use blending mode overlay to achieve the text wave effect

The last

Well, the end of this article, I hope to help you 🙂

This article does not cover the basic usage of mix-blending-mode in detail. Interested students can study it by themselves.

Want to Get the most interesting CSS information, do not miss my public account – iCSS front-end interesting news 😄

More wonderful CSS effects can follow my CSS inspiration

More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.

If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.