Some interesting CSS questions (17th) -- incredible mixed color mode mix-blend-mode and cssmix-blend-mode

Some interesting CSS questions (17th) -- incredible mixed color mode mix-blend-mode and cssmix-blend-mode

Start this series and talk about some interestingCSSQuestions and question types are not empty. What to think of is not only to broaden the problem-solving ideas, but also to involve CSS details that are easy to ignore.

Compatibility is not taken into consideration in solving the problem. The question is just a blank question. What do you think of? If you have the uncommon CSS attribute in solving the problem, please study it.

Update, update, and update important things three times.

Some interesting CSS questions (1) -- Implementation of the vertical bar on the left

Some interesting CSS questions (2) -- about the box model from the implementation of the striped border

Some interesting CSS questions (III)-How much do I know about the stacked sequence and stack context?

Some interesting CSS questions (4) -- Starting from reflection, talking about how CSS inherits inherit

Some interesting CSS questions (5) -- center a single row, center two rows to the left, and omit more than two rows

Some interesting CSS questions (6)-fully compatible multi-column uniform layout

Some interesting CSS questions (7) -- The Disappearing line

Some interesting CSS questions (8) -- The Tab switching solution for the pure CSS navigation bar

Some interesting CSS questions (9) -- cleverly implementing CSS diagonal lines

Some interesting CSS questions (10) -- structural pseudo-class selector

Some interesting CSS questions (11) -- reset.css

Some interesting CSS questions (12) -- In-depth discussion of CSS Feature Detection @ supports and Modernizr

Let's talk about some interesting CSS questions (13)-cleverly create a background color gradient animation!

Some interesting CSS questions (14) -- pause and play CSS animation in pure CSS mode!

Some interesting CSS questions (15th) -- about CSS keywords initial, inherit, and unset

Some interesting CSS questions (16) -- wonderful background-clip: text

All questions are summarized in my Github.

The text starts from here:

CSS3 adds an interesting attribute --mix-blend-modeHere, both mix and blend are mixed, so the function of this attribute is the mixed mode. Of course, we usually call itHybrid mode.

The hybrid mode is most common in photoshop and is one of the most powerful functions in PS. Of course, anyone can use the mixed mode to mix multiple layers to get a new effect, just to use the proper method, in other words, it is necessary to have a deep understanding of the mixed mode and keep trying to make some results by using the mixed mode in CSS.

My personal understanding of the mixed mode is also very simple, this article only leads everyone into the world of CSS mixed mode, a little understanding of the mixed mode and try to use it to make some results.

 

mix-blend-modeOverview

As mentioned above,mix-blend-modeDescribes how the content of an element should be mixed with the content of the element's immediate parent element and the background of the element. We replace the concept of layers in PS with elements in HTML.

See what values are available:

{Mix-blend-mode: normal; // normal mix-blend-mode: multiply; // mix-blend-mode: screen; // mix-blend-mode: overlay; // overlay mix-blend-mode: darken; // darken mix-blend-mode: lighten; // brightens mix-blend-mode: color-dodge; // fades mix-blend-mode: color-burn; // color deepens mix-blend-mode: hard-light; // strong light mix-blend-mode: soft-light; // soft-light mix-blend-mode: difference; // differential mix-blend-mode: exclusion; // exclude mix-blend-mode: hue; // mix-blend-mode: saturation; // saturation mix-blend-mode: color; // color mix-blend-mode: luminosity; // brightness mix-blend-mode: initial; mix-blend-mode: inherit; mix-blend-mode: unset ;}

RemoveinitialDefault,inheritInheritance andunsetIn addition to the values that can be taken for all three CSS attributes, there are 16 other values that correspond to different mixing effects.

If it is not a professional PSer that deals with the hybrid mode every day, it is still difficult to remember so many effects. However, some of our predecessors have helped us to summarize how to better understand or remember these effects. This is taken from the principle of Layer Mixing Mode, one of the intermediate and advanced series of Photoshop:

Of course, it is a hybrid mode in PS. The number is several more than that in CSS, but the classification is still common.

 

mix-blend-modeInstance

See for details.mix-blend-mode, The key is to take this step. Here I wrote a simple Demo, including all the mixed modes. You can try the effects of each mode:

CodePen Demo (-webkit-Only)

Of course, this is just a way to feel the charm of the mixed mode. Below we will list several CSS animations created using the mixed mode.

Use mix-blend-mode: screenMake loading effect in color filter mode

In order to take care of some slow users who access codepen, They specially made the Gif to see the effect:

CodePen Demo (-webkit-Only)

Used heremix-blend-mode: screenColor Filter mode, which is a mixture of brightening images. The English Color of the filter is screen, that is, the synthetic color that two colors are projected to one screen at the same time. The specific method is to reverse, multiply, and then reverse the two colors. The simple memory is "make the white more white, but the black remains unchanged ". (Not necessarily accurate. please correct me if there is any error)

We set the three divs according to different latency (animation-delay) To achieve a very conspicuous and magical effect, suitable for loading graphs.

Use mix-blend-mode: differenceDifference Mode

For another example,mix-blend-mode: differenceDifference mode. View the color information in each channel, compare the background color and drawing color, and subtract the pixel value of the darker pixel from the pixel value. Blending with white will reverse the background color; blending with black will not change.

In general, the brightness area of the top layer will reverse the color of the lower layer, and the dark area will display the color normally. The effect is exactly the opposite of the color of the source image.

Let's take a look at the mixed mode, which can be used in some multi-layer effects to produce a very brilliant mixed effect:

CodePen Demo (-webkit-Only)

It seems complicated. In fact, it is very simple to understand the principle. After six rotating Divsmix-blend-mode: difference.

Use multi-mixed mode to create text fault results

Finally, I think of a text fault that I made earlier, and can also combine the hybrid mode to produce the following effects:

CodePen Demo (-webkit-Only)

You don't have to worry about your eyes. The effect is achieved by pure CSS. You can use a variety of color mixing modes to achieve color superposition, brightening, and other effects.

This article involves very little professional theoretical knowledge and does not take a long time to describe the effects and functions of each mixed mode. I have a rough understanding of the mixed mode. This article aims to use some demos to help readers learn how to use these mixed modes. As the saying goes, practice on the individual, if you are really interested, you can study it on your own.

 

Compatibility

Finally, let's take a look at the compatibility. This wonderful attribute compatibility is usually not very good. As I mentioned in previous articles, it is intended for future programming. Therefore, the CodePen Demo in this article requires-webkit-View in the kernel Browser:

At the end of this article, if you have any questions or suggestions, you can have a lot of discussions, original articles, and limited writing skills. If there are any mistakes in this article, please kindly advise.