CSS blending mode in web design

People who have used Photoshop or illustrator know that there is a blending mode for a layer.

For example: Multiply, screen, overlay and soft light, and so on, use these blending modes, with a certain degree of transparency, so that you have a better effect. However, can web designers make good pages by mastering "blending mode"? Yes, transparencyopacity, that's him.

Cool things are not difficult, if you want to achieve these effects with CSS is still difficult, or a bit impossible. As shown in the following illustration, the first line is from left to right: Doublenaut, Graham Hicks, Jonathan Quintin and Geoff Teehan. The second line is from left to right: Ben Johnson, Claire Morales, Alan Defibaugh and Jess Barlow.

blending modes and Web pages

Unfortunately, there can be no more mixed-mode properties that areopacitysupported by many browsers, and it is proving that it is a difficult task to get browsers to achieve the same effect as a layer blending mode in Photoshop. Some hybrid modes are available through filters in SVG, but these are limited and rarely used in actual projects.

In spite of this, things are fast moving towards the good, and now a draft of the CSS mixed-mode specification is being developed. The Adobe Web platform team is aggressively promoting the CSS blending model. (The team is also promoting some other interesting CSS features, such as regions and shaders).

For now, there are three attributes in the draft specification for CSS blends:background-blend-mode,mix-blend-modeandisolation. Let's explore them together.

Canvas 2d: Does he have a blending mode?

First, here's a little secret. The application of mixed mode in the canvas of HTML5 is supported in addition to all the latest browsers in IE browser. Even on the mobile side of Chrome and Safari browsers are supported. But why should we stop? Blending mode is useful in CSS.

blending mode for CSS: Background-blend-mode

background-blend-modeproperty allows you to specify a blending mode for the background layer of an element. Whether it is the background color of an elementbackground-color, a background imagebackground-image, or a background picture that is implemented with a gradient, you canbackground-blend-modespecify the blending mode by.

Don't think this attribute will get much use? Don't let your pages go further. When you upload a big picture from the background for an article, use the blending mode value for the background toMediummake your title appear more prominent. However, the browser does not support CSS blending mode, there is still a long way to go for browser support. Upload six different colors of the image to fit everyone, the backend server to complete a certain process. This is slower for readers than using the CSS blending mode directly. This attribute can also be used in a number of other places:

Background blending modes may be used to make these similar effects even better.

Mix-blend-mode Property

Althoughbackground-blend-modethe attributes are very strict with the background, we like to mix the background layer like the layers in the PSD on HTML and SVG elements. That'smix-blend-modewhere the attributes are strong.

mix-blend-modeYou can mix the elements with his background. Maybe you can try it on the background using the blending mode, which is better thanscreenusing the background colorrgba(). You can also use an infinite number on both the load animation and the blending mode.isolationproperty can be used to isolate themix-blend-modeblend of elements and background images by using attributes on the element.

It's more complicated to use than it ismix-blend-modebackground-blend-mode, so it's more time-consuming to talk about him, but it doesn't let you down. Because the CSS blending mode is coming soon.

can we now use CSS blending mode?

Not yet, but hopefully this year it will be supported. The specification has been supported by the SVG specification team and is now supported by the CSS specification team, and is also a candidate recommendation standard. Once this happens, the pace is fast and you can expect the browser to support CSS blending mode.

As for browser support, here's a short summary: (ended in January 2014)

• Firefox: start supporting properties in version 29,background-blend-modebut there's also a bug (like demo) that they're still studying. And the usemix-blend-modeof attributes needs to be opened in "About:config".
• Safari: can be supportedbackground-blend-mode, but not supported, in "Webkit Nightly"mix-blend-mode.
• Chrome and Opera: usemix-blend-modeandbackground-blend-modeneed to open "experimental Web Platform Features" in "Chrome://flags" or "opera://flags".
• Internet Explorer: CSS Blending mode is not supported in canvas, and no development information is currently found.