5.3 Implementing Blend Modes

Hello, and welcome back to the CSS of the future. In our last lesson we talked a little bit about this new feature that hopefully will soon find full support in CSS. And that's the idea of using Blend Modes in CSS. And Adobe, as I mentioned is working on this specification. And Adobe, obviously makes Photoshop. And Photoshop makes use of these blend modes, which is a creative way of blending colors together on different layers. So let's take a look at how this works in CSS. So we're gonna jump back into our blend modes start.html file. And again we have four divs, with background images applied to them, and here are our background images. Now what I'm gonna do is, I'm first gonna give our image backgrounds a background color. So they are gonna have a background color and a background image. So I'm just going to come up here to this image class. Again, if we look at our HTML, each of these divs have two classes applied to them. They all have the same image class, but then they also have a separate class that's basically numbering the images. So image one, image two, image three, and image four. So they all have this image class in common or this img class. And we've already given it a few rules here. Width and height, box sizings, border box, background sizes, cover. I also wanna give it a background color. For now, I'm gonna give it a color of green. So I'm going to save this as, blend-modes.html. We're no longer using the start file. And if we were to refresh this in the browser, let's get rid of the hyphen start. You wouldn't see any difference because that green shows up behind the images. You might have seen a flash of green there for a second before the images actually loaded, but we don't see it once the page is done loading. However, with the use of blend modes, we can blend that background color in with the image in a number of different interesting ways. So let's take a look at how to do that? So we've given it a background color. Here, and now I also want to apply a property called background-blend-mode. So there a number of different values we can give to this property. The default value is normal. When you set it to normal nothing really happens, we just see the images as they are. But once we change this value to something else, such as for example, multiply, we'll see the colors start blending together. So let's save that, jump back into our file, and refresh. And now we can see that green coming into the image, and all of the rest of the colors from the image are now gone. You see the dark and light values of the image, but the green has taken over. So those colors are now blending together. Now there are a number of different blend modes we can use. So let's take a look at some of the other ones. So multiply is an option. We can also use screen, which we'll brighten up our image a little bit. There you go. Now we can see a little bit of a green tint, the image is a little bit brighter, the colors are washed out a little bit. But it gives it kind of a neat atmosphere. So if you're familiar with Photoshop, you can imagine what some of the other values are. We have the option to use overlay, for example. We could refresh and see what that looks like? That looks a lot like multiply. It does look a little bit different. If you experiment with different colors, you might see some different results. But that's the overlay. Property value. We also have things like darken and lighten. So there's the darken value. The lighten value, as you can imagine up, is going to lighten up the photo a little bit, still using that green shade to really change the atmosphere of the image. We also have color dodge and color burn. We can experiment with those. Those have a hyphen in between them, so color-dodge, save that and refresh. There you go. Color-burn is gonna darken it up a little bit, like so. We also have hard-light and soft-light. So we can experiment with those as well. Again, these have a hyphen in between, refresh and there we go. This keeps a lot of the original colors from the image itself, but as you can clearly see it also works in that dark green from the background. We can also completely change the feel of this by changing that background color. So instead of green, we can change it to red, save it and just see how it changes the feel of the images. So some colors work with some images, some colors don't work as well. So I'm gonna change that back to green. I really liked the way that particular overlay looked. And again, that was the value of hard-light. We can also change this to soft-light. And we'll get that. So you'll notice the color is now gone again, but each one of these obviously gives us a little bit of a different feel. We also have values like exclusion, and save that and refresh, and there we go. We also have saturation, color and luminosity. Again, if we want to reset it, we can just set that value to normal, refresh it and now our original images are back. So let's say that we wanted to give these a value. I really liked the hard-light one, so we'll give it a value of hard-light. Save it, and refresh. And let's say we wanted these to change whenever we hovered over them. So when we hover over them we can simply set the value back to normal. So we can create another rule here for .img:hover. And inside that rule we can set our background-blend-mode to a value of normal, and let's see how that works. Save that, refresh our page. And now when we hover over our images they return back to their original color. So that's a cool effect. If you wanted some kind of graphical menu, you could use an effect like this to really pull it off and make it work. So those are the basic blend mode options. And again this requires us to use a background image. Now, what if we had some text hovering over our image, such as the text we've already discussed? So I'm gonna go to this food class here, and again right now it's set to a displace of none. I'm gonna get rid of that line. Save it, and refresh. So we've got this text hovering over our images now. And now I want to blend the colors of the text with the background colors. How can we do that? Well let's try using the blend mode that we've done before. So I'm gonna go into the h2 for this food class. So if we go back down here in our HTML excuse me, we can see this div with the class of food and inside it we have an h2. So for that h2, let's try giving it a background blend mode, and we'll see that this is not going to work. But I just wanted to show it to you. So let's give this a but background blend mode, excuse me of color dodge for example. Save that, refresh our page and you see that it doesn't really work. Well, there's actually another property specifically for this. Remember if we want our background image to blend with our background color we had to set a background image. We couldn't use an image tag to make that happen. If we want another item, a separate item such as this text to blend with our background, then we do it using a different property. And that property is called mixed-blend-mode. So we have mixed-blend-mode. Now if we set that to color-dodge, save our file, and let's refresh our page. Now we can see our text blending in, and that doesn't look too good with the color-dodge option, so we might try something else. Let's change that to screen. See how that looks. That looks a little bit better. But you get the basic idea. You can play around with all the same blend modes using this mix blend mode property. And that will blend in whatever layer your dealing with. With whatever is behind it. With whatever else it's touching. And that's how you use blend modes in CSS. Again, this is not fully supported yet, it is still a work in progress. But Adobe is working on it as I mentioned before. So this originated with them and Adobe is still working on it. And I have very little doubt, that we will see full support for this sometime in the near future. This is a really, really exciting new feature. You can really do a lot to bring out the colors in your website, and to really do some amazing stuff without having to do a bunch of photo manipulation in the process. So thank you for watching. And I'll see you in the next lesson.