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 bore 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)
