The result produced by the two blend modes we discuss here doesn’t depend on which of the two layers is on top. But this is something we’ll go a bit more into in future articles. For example, we can use difference to blend the first two layers from the bottom, then use multiply to blend the result with the third layer from the bottom. Of course, we can use a different blend mode at each stage. Blending the third layer with the result of blending the first two gives us the destination for the third stage, where the fourth layer from the bottom is the source. These two layers blend together and the result becomes the destination for the second stage, where the third layer from the bottom is the source. In a first stage, the second layer from the bottom is our source, and the first layer from the bottom is our destination. How blending two layers works at a pixel levelĪlright, but what happens if we have more than two layers? Well, in this case, the blending process happens in stages, starting from the bottom.
For example, the illustration below uses the multiply blend mode to combine the two layers, represented as grids of pixels. How exactly we combine the two layers depends on the particular blend mode used, but it’s always per pixel. I’d expect the destination to be an output, but instead they’re both inputs and the resulting layer is the output. This is something I just take as it is because these names don’t make much sense, at least to me. When blending two layers, the layer on top is called the source, while the layer underneath is called the destination. And when it comes to background layers, it’s not just the background-image layers I’m talking about - the background-color is a layer as well. Note that when I talk about blending “siblings,” this includes blending an element with the pseudo-elements or with the text content or the background of its parent. They could also be two background layers, in which case the CSS property we use is background-blend-mode. These two layers could be two siblings, in which case the CSS property we use is mix-blend-mode. Let’s discuss the “how” of blend modesīlending means combining two layers (that are stacked one on top of the other) and getting a single layer. A few examples of what we can achieve with these two blend modes. Today, we’ll focus on how blending generally works, then take a closer look at two somewhat similar blend modes - difference and exclusion - and, finally, get to the meat of this article where we’ll dissect some cool use cases like the ones below.
#DARK AND LIGHT TAMING LAVA TIGER SERIES#
And now that I know better, I’ll be sharing this knowledge in a series of articles. This meant I could finally understand how this stuff works in the back and where it can be really useful. So I had a lightbulb moment when I came across the spec and found it also includes mathematical formulas according to which blend modes work.
And verbose artistic descriptions feel like penguin language to me. Then Photoshop comparisons are pretty much useless for someone coming from a technical background. I find examples great, but when you have no clue how things work in the back, adapting a nice-looking demo into something that would implement a different idea you have in your head becomes a really time-consuming, frustrating and ultimately futile adventure. Pretty much every article I’ve seen on the topic is based on examples, comparisons with Photoshop or verbose artistic descriptions.
The problem stemmed from not really knowing how they work in the back. And taking the “try it and see what happens” approach seemed to always leave me horrified by the visual vomit I had managed to create on the screen. Up until 2020, blend modes were a feature I hadn’t used much because I rarely ever had any idea what result they could produce without giving them a try first.
0 kommentar(er)
