 A little bit about me, as was introduced, my name is Shwetank. I work in the developer relations team in Opera. How many people have used Opera in the past? Use it? Awesome. And the ones who don't, download it now. I'm also part of the extensions team. So if you have any extensions and you want to put it to Opera or something, let me know. My Twitter is Shwetank. Just my first name. And in case you want to talk to me later on on email, it's Shwetanktee at opera.com. So first of all, welcome. Welcome to day two. We'll have a lot of good talks in day two. And if you look at the talks in day two, you'll see that a lot of them are actually doing the same thing. They're diving deep into the topic, going a little bit extra ahead, showing a little bit more detail. And the same thing will be in my talk as well. We'll talk about CSS blend modes. But more than that, we'll also talk a little bit about computer graphics and how and why we need blend modes in the first place. But first, I want to ask you a question. What were your favorite cartoons when you were growing up? Tom and Jerry? Oh, let me just preface. How many of the people who were born before 1995, and this makes me feel very old, what were your favorite cartoons? Swatcats? Dexter? Oh, nice. Johnny Quest? Almost all of those cartoons were probably using something like this. They were probably using something like traditional cell animation. And what exactly is this? Well, before this, and this is way, way before, when animation was in a very, very primitive stage, you used to draw each and every frame. Each and every frame, you had to draw it. Because you had to flip through it. Each and every detail in each and every frame had to be the exact same thing. And it required a lot of effort. So then people came up with this, which was cell animation, which was, you had these transparent plastic cells. And you used to draw on top of that. So what happened was, whenever you had an animation, there were some parts which were moving, like the characters, they were moving. But some parts were not moving, like the background. So in those cases, you just painted one cell for the background, and then for each and every moving thing, you only animated that. And you only painted one cell for the background. So it looked a little bit like this, in which the moving parts you paint for each and every cell on top. And when you compose it in front or at the back of a background, you have an effect like this. So the reason why I talked about this is because to introduce you to the concept of layers, layers is extremely important. And it's a fundamental concept when you're talking about image composition and when you're talking about graphics in general. And this concept of layers and how we deal with different layers is at the heart of blending and composition. About modern graphics, once again, you have the same thing. How many people have used Photoshop or GIMP or any other image processing? And how many people have used layers in them? Everyone, right? Any kind of non-trivial thing they need to do in all these image processing apps, you need to use some kind of layers and mix and match and that kind of stuff. Over there, you might notice there are options like this, screen or something like this. These are the blend modes that we're going to talk about. And what did they do? For example, take a look at the poster at the very left. It's a little bit dark in the projector, but basically, you cannot get this effect with just having a red background on top of a picture and decreasing the opacity. You can't really have that. You need to apply something more. And how you do this is what blending modes is all about. And we now have it in CSS. So we as web developers now have the power that we previously only had in Photoshop or other image editing software. So first, let's talk about compositing, because the spec is about compositing and blending. So compositing is basically how to deal with displaying overlapping objects. Overall compositing, it deals with something called PorterDuffComposting and Blending. So we'll first take a small look, a brief look, at what PorterDuffComposting is. Now, Porter what? So PorterDuffComposting is actually named by, you know, it's based on a very seminal paper by these two people, Thomas Porter and Tom Duff. These two people in the early 80s, they used to work for a very famous iconic company called Lucasfilm. And they were working on all kinds of various things for digital graphics over there. And one of the things they did was come up with stuff like this. It's called the PorterDuffComposting modes. So basically, if two elements are overlapping, there's pretty much just four things you can do. One, you show on that overlapping part, you don't show anything. Second, you show the source, which is the layer on top. The third is you show the layer on bottom. And the fourth is you have a mix of both the bottom and the top layers. Somehow, you do something over there. So the blend modes will work over there. So they have a bunch of different ways to deal with overlapping layers. But the ones that we are interested in specifically is something called source over. It's the most intuitive way to deal with overlapping images. Like, for example, you have a piece of paper, and you have another piece of paper overlapping it. And you look from top, then you'll see the source eclipsing the destination layer. The one on top eclipsing the one on the bottom. This is the default compositing mode when it comes to blend modes and other things. So this was about compositing. But what do we actually mean by blending? Blending is simply blending the colors of the layer on top with the layer on bottom in some way or the other. So there is some calculation happening, or some function or some algorithm happening through which you blend the colors from the top layer and the bottom layer when those two are overlapping to create some kind of effect. For example, you have this layer, and then you have the green layer overlapping it. So in this portion, the yellow portion over here, something must be happening. Some function must happen to get an overall effect, which is different. Or another way to deal with it is like this. On the top, you have the source image. On the bottom, you have the destination image. And according to some function or the other, you get the resulting image, which is on the bottom. So when it comes to blend modes, we basically have about 16 blend modes. And the first one, normal, is pretty much just no blend mode is applied, actually. So it's pretty much just 15 blend modes that you have. In other image editing softwares, you have slightly more blend modes as well. And in CSS, you use it like this. This is the stuff that needs to be paid attention to, which is mixed blend mode and background blend mode. And we'll take a closer look over there. So with mixed blend mode, how you use it, you just say mixed blend mode multiply, or if you're using it in a div, you just say in the div, mixed blend mode multiply, what will happen is that if that div is overlapping something else, then the colors of that div will be mixed with the colors of that background layer in the overlapping portion. So to give you a brief demo of this, let me just pull this out. So you have this, right? But this is actually two different images, right? But when you combine them or you overlap them, then, you know, and you apply a blend mode, then certain, a different effect is applied. And now all I've done is I've used mixed blend mode on the image, that's it, on the IMG element. Same thing with this, you know, it looks like a small boy, like looking through a glass, like a window or something. It's actually two different images. You're just combining them together and applying some kind of effect. And this is just, you know, very simple CSS. So this is what I mean by, you know, mixed blend modes and how you apply them. I'll show you one more demo, which might be, might work, might not work. I think it should work. Let's go to the meta-refresh side itself. We go over here. We have images over here, right, of the speakers. Let's just select one image over here. Apply a mixed blend mode. Let's try hard light, right? So you can see there's this different kind of effect applied to the image. You can do something else as well. You can do screen, or overlay, or even multiply, right? So using this, you can just have different effects on top of your existing images, or on top of even other divs or any kind of block-level elements. So this is pretty nice. How many people know about the stacking context in CSS? How many people have used Zindex? Everyone. So everyone over here has created a stacking context of their own in the browser. So what a stacking context is, think of it as a stack of books, right? Every time you create a Zindex, you create one stack of, one book on top of that stack as well, right? And this is how different layers are interpreted in the browser itself. So this is a little bit like, this is not even a complete list, but whenever you use Zindex, you create a stacking context. If you use opacity, less than one, you get a stacking context. Transitions, FlexItem, Filter, will change. How many people know about will change? So there's a good article on devopra.com, Sarah Swedin has written it about will change. Check it out. All these things will create a separate stacking context. A separate layer on top, right? So this turns out to be a little bit important when you're talking about blending, because we have a property called isolation, right? And what it does is, there are certain times in which you use mixed blend modes and it will mix all the layers which are overlapping it, right? All the layers which are beneath it, basically, right? But sometimes you want that, I just want certain few layers for those colors to mix, but I don't want all of those underneath stacking context to be mixed, right? You just want a few certain things to be mixed. So in those cases, you can actually do it. This image is straight from the spec. So to take an example, on the left you have blending happening normally, right? In which all of the background layers, the colors are mixed, right? On the right, what you have is, I've done dev isolation, isolate, in which only the elements required to make that plane, only the elements of those are mixed. Only the colors of the elements of those are mixed and not the background color, right? So in some certain cases, you want isolation to happen and you can create a container div and say isolation, isolate, in those cases, only the child elements of that container div, those will be mixed together, not the entire thing. The thing, after mixed blend modes, you also have background blend mode. So a lot of times you have background images, right? And you want to add extra style to it, extra possess to it. In those cases, you can actually use background blend mode. So you can define a background image over here, you can define a background color, and you can define background blend mode, multiply or screen or whatever. And in those cases, it'll mix the background image with the background color to create something, to create a certain effect. Now keep in mind, this is also isolated, which means that if there's, say, a div or if there's even a body with a certain background color behind it, the mixing will not happen with those layers. It will only happen within this particular div or whatever thing you're having. You can also have multiple background images. And you can have multiple blend modes for those multiple background images. In this case, sample1.png will have the screen blend mode applied to it and sample2.png will have the overlay blend mode applied to it. Now this is all good and fine, but when it comes to actually understanding blend modes, a lot of people who are really, really good at CSS, even them, they cannot struggle with how to make sense of it. But there are ways to actually make sense of it. You don't have to always do trial and error. Certain amount of trial error is always going to be required, but there are ways to actually make sense of it a little bit more. So blend modes, the ones in CSS, they can be categorized according to these five categories, darkening, lightening, contrast, comparative, and component. And we'll take a look at one blend mode in detail from each of those categories. So before I start that, a little bit about RGB and notations. So when it comes to RGB, there are different notations to define or to specify them. The most common is digital 8-bit, 0 to 255. But you can also define them in, say, percentages, 80%, 0%, 80%, something like this. And when it comes to mathematical analysis or talking about algorithms of functions, then it's a little bit easier to do it in terms of 0 and 1. So instead of 80%, you say 0.8. So when we're talking and when we're going to analyze these blend modes in terms of the functions, we're going to use the mathematical notation of the RGB values. So let's take a look at the first category, which was darkening. So in this case, we take a look at the blend mode called multiply. It's a very simple thing. It's just multiplying the color channel of the source with the background. That's it. But the thing to consider over here is the fact that we're taking a look at the mathematical RGB notation, which is between 0 and 1. So whenever you multiply a fraction with another fraction, you will get a number which is lower than the original ones. So in this case, a number which is closer to 0 is darker. And a number which is closer to 1 will always be lighter. So whenever you multiply 0. something with 0. something, you always get something closer to 0. So in this case, you always get something which is a little bit darker. So that's why it's in the darkening category. Screen does a little bit of the opposite. So in this case, it takes the complements of those and multiplies them together, and once again does the complement of it. The result is you get something closer to 1. And it creates more of a lighter, more of a washed out kind of a look, which sometimes you kind of desire. So this is how you take a look at the lightning category, in this case, screen. Now this is very, very, very interesting. This is the hard light belongs to the contrast category. So in this case, what it's saying is if the color, if the source color is dark, which is 0.5 or less, then use the multiplier blend mode. Otherwise, use the screen blend mode. Multiplier makes things darker. Screen makes things lighter. So in this case, what's happening is if the source color is dark, it'll make it darker. If it's light, it's going to make it lighter. So this is very, very interesting. The effect that you get is something like if you have a big spotlight on someone and certain things will appear a little bit washed out, and certain shadows and stuff will appear extra dark. The next category, one of those is difference. This is very simple. It basically subtracts the darker of the two colors and create a mod of it. Whatever the difference is, that's going to be the final color value of that channel. Now the interesting thing about the difference color blend mode is that if your backdrop is black, then no effect will be applied. Because when you subtract 0 from something, you still get that original number. So no effect will be applied at that time. However, if the background is closer to white, then it'll be like an invert of that image. So it'll be almost like a negative of that image. And hue, hue, color, luminosity, all those kind of blend modes, they come under the category of non-separable blend modes, which means that they don't work exactly on the RGB values. The RGB values have to be converted into HSL values. And it works over there. So in this case, in the hue blend mode, what happens is it creates a color with the hue of the source color and the saturation and luminosity values of the background color. So it works over there like this. So luminosity, it does the same thing with luminosity and stuff like this. So this is how you can make sense of blend modes. You can take a look at how they work. And you can see that my image or my div, the background is this, the foreground is this. So I probably will need to use something with high contrast. I'll go with hard light. So you can kind of make sense and have an idea of where you want to go with blend modes. Now, blend modes can work with other technologies as well. That's the power of the web, that you can mix and match different technologies to create some really, really cool stuff. So one of the most exciting things for me is that you can use blend modes with gradients to create something really nice. So for example, this is just a normal radial gradient. And keep in mind, this is a white to black one, not a transparent to black one. And then you have another image over here. But if you overlap them and apply a blend mode, you can have an effect like this, which cannot really be achieved with anything else. And this can be used in image galleries and all kind of stuff like this. So in terms of practical uses, it's very, very nice that you can use gradients with blend modes on images. It's a little bit out of the scope, but so I won't explain what exactly are masks and animation filters, but you can use all of those things to create something really, really nice. In terms of CSS masks, if you're using them, if you know them, keep in mind that the mask will be the highest layer in the stacking context. So for example, if you have these three images and you want to create something with just these three images, which looks a little bit nice, just using normal, simple CSS masks and animations and all that kind of stuff, let's go over here and try to see what a simple thing that I made. So you can make something like this in which the mask is the Batman image or the Batman symbol. It's doing a CSS animation. And if you hover over it, then you get this text. And this text is using blend modes. So it's blending with the background, not just Batman, but also the Joker image behind it. And all I did was pretty much just with these three images. So you can combine and mix and match all these kind of things to create some really cool stuff. Animated GIFs or GIFs. I don't know how you pronounce it. I pronounce it GIF sometimes, and sometimes it goes ahead and I say GIFs. Anyways, in those cases, you can actually combine them as well, because if you can combine JPG images together using background blend modes or PNG, then GIF images are also game. In this case, I can actually use this three line code to make something like this. Let's just go over here. If you saw this image, and you didn't saw the previous two GIFs, then you would probably expect that this is one single GIF. Instead, these are just two different GIFs that I've combined together using blend modes, using just three lines of CSS. No JavaScript, nothing else. No image editing software required. Just three lines of CSS. I'll talk about that. So the next thing is that the next step is, if you can do it with GIFs, can you do it with videos? And of course, you can. You can do it with videos as well. But the thing which I find really cool is that you can also do it with real time video. How many people over here have worked or played with GetUserMedia, or WebRTC or whatever? A few of you, right? So with GetUserMedia, with GetUserMedia, you can actually get the webcam input. So over here in real time, let's see, here in real time, I can apply a mask and then I can apply a blend mode over here. All of this is working in real time. So using Photoshop or something, you can only do it with images. But with the power of the web, you can actually do it with live video. So this is pretty cool. Let's go back. Of course, you can also use blend modes in Canvas. You're not just restricted to HTML or just in CSS. You can use it in Canvas as well. There's a particular thing called the global composite operation. And it takes, as a value, it takes either a composite operation like source over or destination over or something. Or you can put in a blend mode. For example, over here, you can say context.globalCompositeOperation is equal to screen. So the screen blend mode will be applied over there. Blend modes can also be used in SVG, which is kind of like coming full circle because blend modes actually started out in SVG. SVG had blend modes all the time. So even if you don't use CSS in SVG, you can use blend modes by using FEImage and FEBlend over there. But if you want to use CSS, you can in SVG. So in this case, I've just selected the rectangle element and said, mix blend mode, multiply. And the blend mode will be applied over there. Actually, I'm going really fast, so that's pretty nice. Browser support. So browser support, when I actually started researching and doing stuff on blend modes like a year ago, browser support was actually not very good. But now, browser support is pretty nice. Opera, all the latest versions I'm talking about, the latest stable versions, Opera, Chrome, Firefox do support blend modes. When it comes to Safari, Safari also supports blend modes, but not all of them. The non-separable blend modes that I was talking about, in which the RGB values have to be converted to HSL, those ones right now are not supported by Safari yet. When it comes to IE, IE doesn't support blend modes right now. But the Spartan project, which Microsoft is working on, Adobe has contributed a lot of stuff over there, including compositing and blending. So whenever the Spartan project comes out, it will have support for blend modes over there. Of course, the beauty with blend modes is the fact that it degrades very, very nicely, because it's just extra sugar on top. If you remove the blend modes, you'll still have the image with you, or you still have the div with you. This is just extra styling on top. So it degrades very, very nicely. It's not like your content will not be there if you don't use blend modes. It's just that if it is there, it'll look extra nice. So when it comes to feature detection, there are multiple ways to do it. In JavaScript, you can do CSS.supports and check for that property over there. Using CSS, you can use the add support property, say add supports, mix blend mode screen, or background blend mode screen over there. You can also use Modernizer, which I do in some of my demos. So you can use the test prop function over there. So it'll return true if it's supported, return false if it's not supported. You can use the test prop function for a lot of stuff, not just detecting blend modes. So yeah, I think I finished early, actually. To recap, we've taken a look at compositing. We've taken a look at blending. We've taken a look at categorizing different blend modes. We took a look at the mathematical notation for RGB, the algorithms of certain blend modes. We talked about mix blend mode, background blend modes, stacking context, the isolation, working with different web technologies as well. Browser support and feature detection we talked about right now. And also we had a kickass animation or kickass animated GIF of Snoop Dogg Nancing. So we have that as well. Or in case you're a little bit more Indian-slayer, but we have Sunny Pajee over here. Anyways, further reading, of course, take a look at the spec. The spec is something which you always have to take a look at whenever you want to go deep into a particular topic, especially in CSS. Take a look at the various algorithms or the various functions which are being used over there, not just for blending, but also for compositing. There's also an article written by me on dev.opper.com, getting to know CSS blend modes. I talked about a lot of stuff that I've talked about over here, even though I've talked a little bit more in detail over here. There's a guy called Bennett Feely, which has also done a lot of work in evangelizing blend modes. Of course, there's an article by Sarah Swaden, which also goes very in-depth into compositing and blending. So take a look at all those things. If you have any questions regarding blending, compositing, or how to use this in CSS, crowd support, and all that kind of stuff, I'm here. Cheers. Hello. I'm considering three different types of content, one being raster images, which is JPEG, PNG, and GIF. The other being SVG kind of vector images, and the third being video and live video. Do you have any information or data around the performance impact of using blend modes on all the three of these? It does use quite a lot of the GPU. So especially on mobile right now, the performance is lagging, especially in Firefox for some reason. But this is being worked on by the browser makers right now, especially, I can say, we're taking a look at also memory optimization and that kind of stuff. We know that it is a little bit intensive, but at the same time, if you have that kind of thing that I want a particular effect applied, I think it's worth the effort to actually go, especially if you're not doing real time video and that kind of stuff. It's just a static image. I think it's OK if you don't overuse it. Thank you. Hi. First of all, thanks for the wonderful talk. I do have a question. So you explained about the different blend modes, right? So say I use one of the blend mode and it matches as close to my design, but it's not the exact one. So can I apply some more CSS parameters like opacity? We apply some values, right? Is there anything that I can do? Instead of just saying blend mode, I can apply some more number so that I can fine tune it. Is that possible? Yes and no. You cannot change the actual function of the blend mode. What you can do is apply certain effects on top. You can add, for example, filters or something on top or you can use opacity to tweak it a little bit. So you can do those things on top, but you cannot change the actual functions being used for a particular blend mode. You can't do that. OK. Thank you.