5.2 Introducing Blend Modes

Hello and welcome back to the CSS of the Future. In the next couple of lessons, we're going to talk about a new feature of CSS that will hopefully find full support in the very, very near future. It's a feature that I'm really excited about and it's a feature that's actually being worked on by Adobe. And this feature is the idea of using blend modes in CSS. Now, if you've never used Photoshop before then you might not have any idea what a blend mode is. But if you are familiar with Photoshop then your probably already really excited about this idea of using blend modes in CSS and HTML. Now, the idea behind blend modes is that your can blend colors together in interesting ways. In Photoshop for example, you might have on one layer an image and on the layer above that a piece of text. And if you play around with the blend modes of the text layer, then you can see that text blend into the image. Images or the color of that text mix with the color of the images in really interesting ways. And there's really no adequate way of explaining what blend modes look like without actually showing them to you. So before we jump into making blend modes work in CSS, let me go ahead and show you out file setup. So, I've got our blend modes start.HTML file opened up here. And you can find that in your projects file folder. I'm gonna jump into our projects files folder here. And here's our start file. We also notice a folder called images. If we open that up, we can see four images here and then there's a license in that folder as well. So if you want to use these images for any reason, make sure you go ahead and read that license. It's a really short license, it's just one page, it's an easy read but it gives you an idea of what's allowed with these images. So I just wanted to point that out, let you know that that's there. I'm gonna wanna take a quick look at the HTML. So I'm gonna jump into brackets here and scroll down. And as you can see, there's not much mark up here. We just have 4 images on the stage so we have this container div, this div with a class of container. Inside that, we have 4 image divs and then another div that has some text in it. Right now that text is not appearing as you can see in our browser. We don't see that text here because if we look in our code, notice we have a div with a class of food here. If we scroll up, we can find that food class here in the display is set to none. So I want that to be invisible for now, because I don't want it to get in the way of the first few things I'm gonna to show you, but we will turn that back on later on. But all of those items are contained inside this container div. And if you want to see that text, let's go ahead and delete that display none and save our start file there and refresh. And it's just some text that's hovering over the image. And it's hovering over it with the use of absolute positioning. So we can see up here the container has a position of relative and the child of that container, this food class, has a position of absolute. We've set the left-top position, line-height to 400 pixels, width to 600 pixels, text-align to center in order to get all of that centered over the images. So, that's how we get that working. I'm just gonna hit Ctrl+Z to undo that deletion, so that we can keep that, display none there. And I'm just gonna jump back and refresh to make sure that it goes away, and it does. So we have those four images here, and you'll notice we're using background images, these divs are for all intents and purposes empty. There's nothing inside these divs, we're using background images for those divs so each one of these divs has a different background image in it and again we can see that here. Now, the reason I'm using background images instead of image tags is because if we use image tags, the blend modes wont work like we want them to. So now that we have talked about the document and we talked about what blend modes are. In the next video, I wanna jump into our code and start showing you how they work in CSS. So, thank you for watching and I'll see you then.