Next-generation CSS allows you to use functions that help you modify existing colors so that you can make a color lighter, darker, more or less saturated, and more.
- [Instructor] Next generation CSS, let's use a color transformation function that will help you modify existing colors. It's pretty awesome, so let's take a look at how that works. Now to use these, all you have to do is specify a color in a couple of different formats. You can use hexadecimal, RGB, RGBA, or HSB and then you add an adjuster inside the function. You can actually add one or more adjusters, and the adjusters are things like hue, saturation, lightness, you can even do things like alpha, there's a full list of them right at this URL.
So let's take a look at how these would work in our project. So what I want to do is change the color of these hovers. I don't like this orange. I want it to be a little bit, maybe brighter. So I'm going to go over to my navigation and find the place where I am modifying this hover value to be orange, and I'm going to use the color function right here and I'm just going to wrap around my color. You can use an RGB color here or a hexadecimal.
We're already using a variable so we can use one of the methods with this, so whenever we hover I'm going to increase the saturation by plus 20%. So you can see that the rollovers are now a little bit brighter than they used to be and that's better, so you can take any color and sort of shift it by adding these different modifiers. So let's go ahead and make these links a little bit lighter.
They're nice, but I think if they were just a little bit lighter, they would look better. So we'll go back into our header, and down here where I modify any link I'm also going to change the color of these. So I'll do color and this is going to look weird, but we're also going to put a color method here and inside that we'll use a variable. We have a variable called color links and we'll adjust the tint by 20% here.
So that should make these a little bit lighter. Tint essentially adds a little bit of lightness or whiteness to an existing color. So that works pretty well. I also want to add a little bit of a gradient in here. I've got a black gradient down here, but I think it would look nice to have sort of, maybe a yellow tint behind this image. So let's go up here to where we add this linear gradient, and right now we've got something that goes from black at 0% opacity to black at 80% opacity, and at these second percentages here, specify when that is happening.
So this black with no opacity happens at 50% and this other one happens at about 90%. So it's kind of a gradient from here to here. Let's go ahead and add one on top, and for that one we will use color and then we'll use a variable. Let's go ahead and use the yellow, and another thing that we can do here is use a modifier or an adjuster that is the alpha of the color. So we're going to modify that yellow and make it alpha by 20% and we'll need to put a comma here.
So you can see that it adds sort of a nice little yellow tint which I think works really well with these links. And that's pretty much all there is to it. You can add as many of these modifiers or adjusters as you want, and notice that some of them will have a shortcut, so instead of writing out alpha, I can just use the letter A and then the number.
- Organizing your CSS into partials
- Creating variables
- Using custom selectors
- Working with flexbox layouts
- Setting up a mobile layout
- Making your features responsive
- Alternating layouts
- Adding animation
- Adding videos