 A very good evening everyone. I see my friends and colleagues here. Thank you for coming over and thank you for the support. Next time can consider speaking. There's a place for everyone who sits here. If you found anything interesting about CSS, please come share with us. A little bit about myself. I am a, my name is Wei. You can find me almost anywhere with this non-syllable screen name. I am a React web developer. And before that, I have been creating websites since I was a kid. So I love anything that allows me to spam the world with websites. A little bit about the talk today. So it comes from a dribble design that I saw a few months ago. So this is a Nintendo Switch design. It looks really nice. So I wanted to try implementing this in CSS. Most of the features look pretty straightforward, except for this intersection here. So there's a curved border that stops me from writing the intersection with a div. So eventually I did this with manual div intersection that I'll show you how to do now. So what you do is you put the two divs side by side. So these two are siblings. They do not contain each other. But one is on top of the other. So you play with the one that's on top. You put another div inside. But then you offset this div to match the dimension and the offset of the purple div. And because this div lives inside this yellow div, if you put overpull hidden on the yellow div, you get this nice intersection here. So this is how I implemented the intersection of my Nintendo. But I'm not happy here because I needed to manually write that intersection. I cannot stop but wonder. So by the time the browser renders the second div, whichever that is, the second panel, it should already know the information about the first panel that it rendered. So it should have a chance to say, hey, I already have this blue pixel down here. And you're rendering this red one. So is there anything you need me to do to somehow combine the two colors and render another color? So it turns out the question is, there should be a CSS property that does exactly that. And it turns out there is. So compositing and blending, module level one, specifies exactly the situation. So compositing talks about how shapes combine based on the alpha values of each pixel, which means the opacity or transparency of each pixel. And then blending talks about how colors mix when you stack graphics on top of each other. So the majority of this talk comes from the blending section of the specs that I just talked about. I encourage you to read the specs. It is not just words. It has many illustrations that tells you what's going on intuitively. So before we go talking about the actual blending modes, there are a few terminologies that I need to introduce you to. The first one is backdrop. So backdrop means the content that is already on the screen when you are rendering the incoming element that you want to render. And then the incoming element is simply called the source. So when you use mixed blend mode, you want to put mixed blend mode on the source. Then it will try to apply some kind of blending function on the source, taking into consideration the backdrop that is already beneath it. And then the blending function is this mathematical function that takes two parameters. The color of the backdrop and then the color of the source. And then it will spit out another color, which is going to be the final color. But not quite. Before it get rendered on the screen, it will be justified to the transparency of the backdrop. So if the backdrop is completely opaque, you will get that color. And if your backdrop is rather transparent, it will only contribute partially to the final color. But for today's talk, we're going to assume that our backdrop is fully opaque so that we can focus on the actual blending function, which is associated with each of the blending mode that we'll talk about. So now we're finally ready to talk about the blending modes. The first non-trivial blending modes I want to talk about is multiply and screen. So multiply and screen will allow you to render your combined image that takes into consideration both the backdrop and the source rather linearly and equivalently. Another thing you can do with backdrop and screening is you can do this knockout text effect, which I'll show you how to do in just a minute. So multiply. The definition follows pretty straightforwardly from its name. The blending function says, I get backdrop and I get source. And then I'll spit out the product of the two colors. And then if you read this back, it says that multiply darkens the graphics. But I'm not really happy with this because what do you mean by multiplying colors? And if I did my math correctly, if I multiply two numbers, if I get a larger number, that means I'm getting closer to white, right? So why is it getting darker? So we need to understand a little bit more about the CSS color space we're using. Once again, this is the specs. You can read this. So one of the color spaces that CSS uses is called the standard RGB color space. So when we write a number in hex string, which we do quite commonly, let's all agree that we're actually talking about three numbers instead of one number because the hex string is simply a concatenated version of three hex numbers. Furthermore, the standard RGB color space is an additive color space, which means we're thinking about light beams. And when we have a combination of light beams, we kind of mix them together to get a composited color. And the stronger the light beams are, the stronger our final color will become. So since we're talking about the strength of a light beam, we're actually not really talking about an integer value between 0 and 255. But instead, we're talking about a value between 0 and 1. Where 1 represents our light beams are at their strongest strength. And 0 means there's nothing there, which gives us black. So now we're ready to understand multiply. What multiply really is doing is they're taking the color components separately. And then they're multiplying the percentage values together to get a final value. And because we're multiplying two numbers that are likely, very likely less than 1, we are almost always getting a number that's smaller. So in our world with CSS standard RGB color space, smaller number means closer to back. So that's how it gets the graphics darker. So there are a couple of intuitions I'd like to share with you. First, black multiply anything gives you black. Why? Because if we replace black with 0, 0 multiply any number is 0. And then white multiply anything gives you that anything. Why? Because y is 1. And 1 multiply any number gives you that number. And furthermore, multiplication is commutative. So it doesn't matter whether you put your graphics on backdrop or source, you can swap them. And if you do multiply, you're going to get the same result. There is one more intuition I'd like to share with you. This is not exactly right because that final pony is kind of like losing the unicorn here. But what I want to share with you here is that multiply is a linear operation. So when you do multiply, your final color is going to take into consideration or preserve the highlights and shadows or say the texture from both backdrop and source equivalently and proportionally. We'll see this in action in just a minute. OK, screen is the complement operation with multiply. What do I mean by that? So when we look at multiply, we're thinking of what is the distance of our color to 0. And then we're taking that distance, we are shrinking them proportionally, and we get our new color that lives closer to 0s. So what screening does is instead of looking at the distance between my color and blackness, I'm going to look at instead the distance between my color and 1. And we're going to shrink that number proportionally. And so we're getting closer to whiteness. And then we're taking the complement again. So that's how we get screen. Screen is exactly the complement of multiply. It will almost always get back a lighter color. So we get similar intuition here. Black screen anything gives you anything. And white screen anything gives you white. And then screening is, once again, commutative. So now we're ready to get some demos going on to show you what's really happening here. OK, that works. So I hope you can still hear me. Oh my god, OK, thanks. So here I have some utility classes that I've written out already. Full screen is a full screen. And backdrop is an image. And then inside this div, I'm going to have another full screen. And I'm going to call it source. And now I'm going to add some styling to the source. So I will add a background color, which will be a linear gradient to right. And from yellow to teal. OK, now I'm going to multiply to the source. So now you see the resultant graphics takes both the backdrop. It still preserves my uncle Wat here. And it also preserves the linear gradient that is present in the source. So let's take a look at what screen does. So instead of getting the image generally darker, it's getting the graphics lighter. But likewise, it still preserves the colors pretty nicely. OK, so with the edge cases, with screening and multiply, you can do knockout text. So let me remove the background and add some extra styling. So with knockout text, with screening, I want a white background. And I'm going to have some text here, talk about CSS. I will give it a larger font size and a more visible font family. OK. Oh, I already have the mix plan mode here. So we can see the knockout effect already, but without the knockout text. OK. So what happens is, because screen anything with white gives you white, but screening anything with black will give you that anything. And that anything is my uncle Wat here. And if you want to do this with black background, you can do it with multiply. So we'll have background black. And then color will be, oh, yes, black. And then color will be white. And now we lose this knockout already, but if we change it to multiply, we get this nice knockout text with multiply. OK, thanks. Next, I want to talk about a couple of two more blending modes. So both multiply and screen we mentioned earlier are commutative, which means multiply A with B is the same as multiply B with A. But highlight and overlay are two blend modes that are not commutative. So the order of your backdrop and source will matter in this case. However, these two are the so-called commuting operations. So overlay A and B is defined to be the same as highlight B and A. If you look at the specs, there is a scary mathematical function that defines what it is. I have the math part justified at the end of this slide as well. You can read those if you're interested. But for today, I'm just going to share with you the intuition of what they're doing right there. So what highlight does is it will look at the source first. And it will condition on source, whether it's greater than or less than 0.5. So it's going to say, if the source is dark, then I'm going to darken the backdrop using multiply. And if the source is bright, I'm going to brighten the backdrop using screen. So overlay is similar, but the order is reversed. It's going to look at backdrop first and condition backdrop. So if backdrop is dark, it's going to darken the source. And if the backdrop is bright, it's going to brighten the source, also using multiply and overlay. And because they're both doing their actions using multiply and overlay, they're going to preserve the textures of your graphics pretty nicely and evenly. Like I mentioned already, overlay is commuting operation with the highlight. Oh my god, it's not working. Why? Oh, I think I know why. Hang on. So I think we don't need this. This is really short. So I'm losing. OK. OK, can we see this gentleman here? So thanks. So in my source, I have this oil paint here. And I do highlight here. It's preserving. It's going to look at the texture of the source first. And then depending on what source is, it will darken or brighten the backdrop, which is why we can see this. We can still see pretty clearly of our oil paint. But if we do overlay, you can slightly see the guy. But it's going to take priority of the backdrop first. So let's look at some. OK, does anybody take? OK. So let's look at some more real implementation of overlay. So you have a video on the background. And then you can overlay the text on the video. So it's going to take the texture of your backdrop. But you can still see the text here. There are some interesting UI that you can implement with this. The next one I will share with you about is blending local difference. So once again, the definition follows pretty straightforwardly from its name. But I claim that our human eyes are not very good at perceiving what's going on with difference. So I'd like to share with you this. So I have only two layers here. Let's take a look one by one what's going on. So the first layer are simply vertical stripes of red and whiteness. And then my second layer are only horizontal stripes of red and white. But if I put them together with mixed one more difference, we get this teal and black here. Why? Because the difference between white and red, if we think about that, that's actually the complement color of red, which gives you those teal colors. And then if you take the difference again, you get black. So this is something that is pretty easy to follow mathematically. But we might not be able to imagine until we see it. But since we create stuff on the web, not all of them are coming from the nature. So we can create something that's pretty interesting UI effect with difference. So now I'm going to show you how to create a dark mode for my personal website. So dark mode is really hot recently. You can implement this with any other implementation. You can use CSS variables, or you can just write separate classes to implement this. But this is just one more useless trick that I learned. So this is my personal site a couple of days ago. I dumped all the HTML and CSS here. And furthermore, I have put here a toggle. So one of them is just a toggle. The other one will expand when I click on the toggle. So how does this give me dark mode? So this expanded layer is completely white. So if I do mix and mode difference, it's going to compute the difference between this whiteness with my current background, which is somewhat white as well. So white minus somewhat white gives you nearly nothing. So nearly nothing means nearly black in this situation. And then the text is black. So black means nothing in our vocabulary now. So white minus nothing gives you white. So we should expect the new background to be somewhat black and then the new text to be white. And then my links are blue. So with this blending mode, it should become some color, which I'll guess yellow. So let's see. I'll remove the offset. I'll remove the outline as well. Then I'm going to add mix, blend, mode difference. Refresh. Then boom. OK. So we've talked about a few blending modes. There are a lot more, which I'll not have time to go over all of them. But I'd like to mention to you that all of these 12 are something called the separable blending modes. What this means is the RGB channels are computed separately like I have shown you already. And there are four more blending modes that CSS supports that belong to the non-separable blend modes. They are computed in the HSL color space instead of the RGB color space. And they are useful when you're working on an effect that is due to changes on hue, saturation, color, or luminosity follows their name. I'd like to share with you one more useless skill that I learned. So if you see this phone that I'm using, this is a color phone called Gilbert Color. Color phone is currently supported by Firefox and Safari on my Mac machine. So it's not yet supported with Chrome. So if you open my slides with Chrome, you won't see this color phone. But anyway, one very spectacular feature about this phone is that when the strokes intersect, there is some interesting blending happening, like you can see here. So I want to figure out what blending mode it is. So I started doing this, like doing this all over. And it turns out there are six colors that I listed out here. And then I want to figure out what the blending mode is used. And because I do not have any other inductive tool, what I'll have to do is probably my favorite college method, which is guessing. So I'm just going to guess multiply. It's really easy. It's the easiest one to follow on the specs. So if we look at this character, it has orange and blue. So it has orange and blue. And in the intersection, I want to figure out what this is. And it seems that I got good luck because in the first channel, the red channel, orange is 255 and blue is 0. So because 0 multiplies anything gives you 0, then I'm in good shape, right? Because I don't have to compute this anymore. And then similarly with the third one, so it seems that I only have to figure out the second number. And I do my math correctly. I'll get 29%. And then 25% converted to 255 gives me 75. And if you convert that to hex, it will be 4B. So my guess is this color is 0, 0, 4B, 0, 0. And let's take a look. So it's still a guess because in other intersections, you can have different colors, right? And shit luck might not happen twice. But it turns out that all of the intersections follow multiply. I've also had this code pen that contains all the Gilbert color colors that you can play with. During this process, I was playing with Chrome and Firefox. And I realized that sometimes the numbers don't match. And sometimes the numbers are off by two digits. If you realize, two digits are the maximum three-digit number. That's quite a lot, right? So I thought there is magic somewhere. But turns out there is no magic. There is a bug. So blending mode is not blending correctly with Chrome. So when we're learning something, it's common for us to be not sure about ourselves. But maybe sometimes a mistake is not with us because browsers can have bugs. OK, great. Now I got a few more questions. I realized when I play with mixed-band mode, my laptop is always very hot. Not always, but quite often. It becomes very hot. And the flame is blowing. And so if you realize the blending mode, when we play with blending mode, we're actually playing the feature from Photoshop. And we're doing it on the browser, right? So if we're talking about an image that's 200 by 200 pixels and if we're doing overlay, that's a lot of work. I guess that's fine to compute this once. But if we're doing animations on a high resolution screen with mixed-band mode that's rather complex, then I think they don't go well with each other very well. Does it work on MODs? Yes. OK. What about this NDS switch? So it turns out that the choice of this color is rather by choice. It's not the result of any blending mode based on these two colors. So no, I did not solve my original problem. But this whole process is fun. And I hope you have fun, too. Here is a long list of references. So this whole talk, I have consulted many friends who helped me. And it was originally inspired by a project I was working with Coding Girls. And then I've done this talk multiple times with friends for drawings. And I've done this with my company's internal sharing. And I've heard a lot of feedback from my lovely friends here. So it cannot have happened without all of you. Thank you.