![]() ![]() ![]() 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. 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 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |