By Ahmad Shaeed, author of csS-Tricks

Like it and see. Make it a habit

In this paper,GitHub Github.com/qq449245884…Has included more categories of previous articles, as well as a lot of my documentation and tutorial material. Welcome Star and Perfect, you can refer to the examination points for review in the interview, I hope we can have something together.

What is blending?

According to Wikipedia:

Blend mode (or blend mode) in digital image editing and computer graphics is used to determine how two layers blend with each other. In most applications, the default blend mode simply hides the bottom layer by covering it with the top layer’s content.

In CSS, there are two properties responsible for mixing. Mix-blending-mode is used to blend DOM elements, and background-blending-mode is used to combine multiple CSS backgrounds.

Enter themix-Blend-Mode

Based on sample

Let’s take a basic example to see how it works. I have a circle above my title. What I’m going to do is mix the text with the circle.

HTML

<div class="circle"></div>
<p>Blend Me</p>
Copy the code

CSS

Added mix-blending-mode: overlay to blend the text elements with the circles.

Codepen. IO /shadeed/pen…

Pictures with text

I think this is a widely used hybrid model. The text is at the top and the picture is at the bottom.

The following was added to the title:

.hero-title {
    color: # 000;
    mix-blend-mode: overlay;
}
Copy the code

It’s not just about changing the mix. For example, we can improve creativity by creating animations.

In this example, I want to explore how the text blends with the foliage background. Since the image contains dark spots and bright spots, this can be very useful in making the text look like it’s moving under each leaf.

Codepen. IO /shadeed/pen…

Text with SVG graphics

An interesting effect is a caption on a background with vectors and shapes. When the shapes are different colors, it becomes more interesting.

What can we do with these speckled shapes? I used the MorphSVG plugin to change the path of each blog shape. This led to an interesting result.

Codepen. IO /shadeed/pen…

Mixing real elements

The effect that caught my eye was when the element had a white background and a black foreground using mix-blending-mode: screen.

Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.

Magnifying glass class

I used SVG and applied the following to it. Notice how the black areas become transparent when using the screen.

Codepen. IO /shadeed/pen…

Video cover

This is a very useful use case for me. I often needed to add a play icon to indicate that there was a video in the article, so I ended up using SVG transparent from the center.

This may sound right, but there are limits. What if you want to add a hover effect to fill the triangle? Since shapes are subtracted from SVG, this is not possible. One solution is to place a circle behind the SVG and color it while hovering.

That’s not enough for me. I want it the other way around. The triangle must be white and the rest blue.

Thanks to the blend mode, I was able to quickly implement changes by controlling embedded SVG while hovering.

.article__play {
    mix-blend-mode: screen;  
}

.article:hover .article__play {
    mix-blend-mode: normal;
}

.article:hover .article__play {
    .play__base {
      fill: #005FFF;
    }
    
    .play__icon {
      fill: #fff;}}Copy the code

Codepen. IO /shadeed/pen…

The CARDS

Another case is to use cropped images and merge them with the background underneath them, and the results are very interesting.

img {
    position: absolute;
    right: -15px;
    top: 0;
    width: 110px;
    mix-blend-mode: screen;
}
Copy the code

The idea is to put the picture on the right, with a caption and description on the left.

Again, it can be better by adding multiple backgrounds to each card:

Codepen. IO /shadeed/pen…

Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.

Remove white from the logo background

I’ve known this trick since the early days of Photoshop. Sometimes I need a brand logo and it is hard to get a transparent PNG version. With hybrid mode, this is easy to solve.

I modeled the Facebook and Amazon logos and added a white background under each one.

Now to solve the problem, add the following CSS:

img {
    mix-blend-mode: multiply;
    filter: contrast(2);
}
Copy the code

Notice that I added Filter: Contrast (2) to increase the contrast of the logo. Apply the blend effect to make them darker than the original color.

Problem solved! Of course, I don’t recommend using this feature. However, if I am forced to do so, I will use it to save time and when the original logo arrives, I can replace it and eliminate the blending effect.

Codepen. IO /shadeed/pen…

Isolation

The ISOLATION CSS property defines whether a new stacking context must be created for the element.

The main purpose of this attribute, when used with the background-blending-mode attribute, is to blend only the background of a given stack of elements: it allows a group of elements to be separated from the background behind them and blend only the background of that group of elements.

html

<div>
  <span>CSS is Awesome</span>
</div>
Copy the code

css

div {
  isolation: isolate; /* Creates a new stacking context */
}

span {
    mix-blend-mode: difference;
}
Copy the code

As you can see, the text “CSS is great” only merges within the boundaries of its parent. Things out there don’t mix. In other words, it is isolated.

Codepen. IO /shadeed/pen…

Isolation can be achieved by using properties that create a new stack context. For example, if the parent element has a opacity property, this affects the result.

html

<div>
  <img src="cake.jpg" alt="">
</div>
Copy the code

css

Div {opacity: 0.99; /* Creates a new stacking context,which result to an isolated group */
}

img {
  mix-blend-mode: difference;
}
Copy the code

Codepen. IO /shadeed/pen…

Into the Background – Blend Mode

It works like mix-Blending-mode, but with multiple background images. Each background can have its own blend mode, for example.

In this example, three layers are mixed together: the base image, Solid Fill, and radient Fill.

.elem {
    background: linear-gradient(45deg, #000 10%, transparent), 
              linear-gradient(#3754C7, #3754C7), 
              url(nature.jpg);
  background-size: cover;
  background-blend-mode: overlay, color;
}
Copy the code

In CSS, each background should be sorted in the correct way. Stack from top to bottom, as shown in the figure above.

Codepen. IO /shadeed/pen…

Color image

By using radial gradients, there are some interesting results than useful. The idea is to add a colored image and make it blend with it.

:root {
  --color: # 000;
  --size: 250px; /* Gradient Size */
}

.elem-1 {
  background: radial-gradient(circle var(--size) at center, transparent, var(--color)), 
              url(nature.jpg);
}
Copy the code

By applying background-blending-mode: color to the element, the result is a de-saturated version of the image.

Codepen. IO /shadeed/pen…

Browser support

Original text: css-tricks.com/basics-css-…

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

communication

This article is updated every week, you can search wechat “big move the world” for the first time to read and urge more (one or two earlier than the blog hey), this article GitHub github.com/qq449245884… It has been included and sorted out a lot of my documents. Welcome Star and perfect. You can refer to the examination points for review in the interview.