This article follows the previous article: the incredible mix-blending-mode. Due to the powerful attribute of mix-blending-mode, many application scenarios and motion effects are constantly improved and discovered. Therefore, another article continues to introduce some cool motion paintings made by mix-Blending-mode.

CSS3 has added a new feature called mix-blend-mode, which is a blend mode.

Blending mode is most commonly found in Photoshop and is one of the most powerful features in Photoshop. Of course, anyone can mess around with blend mode. Just use blend mode to get a new effect, or use blend mode to get some effect in CSS requires a deep understanding of blend mode and constant experimentation.

Introduction to the mix – blend mode

For a basic usage and description of mix-blending-mode, take a quick look at the incredible mix-blending-mode in the previous article.

Background – blend mode

In addition to mix-blending-mode, CSS also provides a background-blending-mode. That’s the blending of the background.

  • It can be a mixture of background images and background images,
  • It can also be a mixture of background images and background colors.

The value of background-blending-mode is the same as that of mix-blending-mode.

Background-blending-mode basic application

The easiest way to use background-blending-mode is to overlay two or more images in blend mode. Suppose we have the following two images, which can be superimposed using background-blending-mode:

After background-blending-mode :lighten treatment:

CodePen Demo — image mix by bg-blend-mode

Background-blend-mode :lighten lighten (lighten lighten) background-blend-mode:lighten lighten (lighten lighten)

<div class="container"></div>
Copy the code
.container {
    background: url($pic1), url($pic2);
    background-size: cover;
    background-blend-mode: lighten;
}
Copy the code

We can try other combinations, that is, varying the values of background-blending-mode, to get different sensory effects.

usebackground-blend-mode: differenceMake black and white reverse animation

The two colors of black and white are undoubtedly the most frequently used and the two colors that I think are the most compatible. When these two colors are combined, they always create a different spark.

The difference value mixing mode can produce wonderful effects with black and white GIF. Suppose we have such a GIF image (image from network, delete) :

Using background-blending-mode: difference, overlay it to a different black and white background (the black and white background is drawn by CSS) :

CodePen Demo — https://codepen.io/Chokcoco/pen/vpLWBW

We can try other combinations and get different sensory effects.

usebackground-blend-modeHover Effect

Imagine, in the first example above, if the black and white layers of the background were not initially superimposed on the GIF, but were superimposed by some interactive means.

In this way, we can use background-blending-mode to create a mask effect when clicking or hovering.

Suppose we have an original image like this (black and white works best) :

By mixing the gradient background color with the Hover effect, we can give these images some of the colors we want:

CodePen Demo –background-blend-mode && Hover

The code is very simple, as follows:

.pic {
    width: 300px;
    height: 200px;
    background: url($img),
        linear-gradient(#f00, #00f);
    background-size: cover, 100% 100%;
    background-position: 0 0, -300px 0;
    background-blend-mode: luminosity;
    background-repeat: no-repeat;
    transition:.5s background-position linear;
}

.pic:hover { 
    background-position: 0 0.0 0; 
}
Copy the code

Here are a few things to note:

  • Here we useBackground color gradient animation.Gradient animation of background colorThere are several ways to do this (click here to learn more), but displacement is used herebackground-position
  • Used to achieve the above effectsbackground-blend-modeThere is no limit to a specific blend mode, and you can try it yourself

Using mix blend – mode | | background – blend mode changes the color of the icon

If we use the knowledge introduced in the previous article to realize the arbitrary color rendering technology of the image with two lines of CSS code, we can realize the dynamic change of the color of the ICON.

Suppose we have such an ICON image, note that the main color is black and the background color is white (the background color is not transparent), so JPG, PNG, GIF images that meet the requirements can be:

Background-blend-mode: lighten dynamically change the main color of the icon:

And here the specific color (gradient, solid color can be), animation direction can be arbitrary control.

CodePen Demo — bg-blend-mode && hover

Or this hover fadeIn effect:

CodePen Demo — mix-blend-mode && hover

usemix-blend-modeCreate a text background

Let’s extend the scene of the above ICON. The ICON can be extended to any picture with black main color and white background color, while the color can be solid color, gradient color or picture.

Then we can try to make the text gradient, or make the text reflect the image. Of course, this effect can also be done with some CSS properties.

For example, background-clip: text clipping allows the text to become gradient or show the image.

In this case, mix-blending-mode can also be easily implemented. We just need to create a div with black text and white background, overlay the image, and then apply mix-blending-mode. The simple principle is as follows:

The core code is as follows:

<div class="container">
    <div class="pic"></div>
    <div class="text">IMAGE</div>
</div>
Copy the code
.pic {
    position: relative;
    width: 100%;
    height: 100%;
    background: url($img);
    background-repeat: no-repeat;
    background-size: cover;
}

.text {
    position: absolute;
    width:100%;
    height:100%;
    color: # 000;
    mix-blend-mode: lighten;
    background-color: #fff;
}
Copy the code

CodePen Demo — mix-blend-mode && TEXT IMAGE

The last

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

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

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.