Gradients

[00:00:00]
>> Kevin Powell: The other one we have is our gradients. There's 3 types of gradients: linear gradients, radial gradients, and conic gradients. Does anyone know what a conic gradient is here? Comes out from the center. Sort of spiral. It's, yeah, more like a spiral. Yeah, they're weird. Conic gradients are like the one that not enough people know about. So for all of these, I have a linear, radial, conic, and they all have just this gradient class on there, so it's just giving them the size.

[00:00:24]
We'll start with the linear. All of them, it's the function, so background image because it is an image, and then I can say linear gradient. I'm going to say red, blue. So you give it two or more color values and it makes a gradient. Figures the rest out for you. I could add in a red, let's make it ugly, green, blue. And then it just takes those and it figures it out for you. We can do the same thing with a radial gradient.

[00:00:55]
So radial gradient, red, blue. And it's a circley thing, oval, starts in the middle, goes out toward the outside, and conic gradient, red, blue. As I said, it's more like a spin from the middle, it goes around and to the end. We'll start with the first one. It's probably the one that you'll use the most often. So back up to the linear. One thing you can do is provide what angle you want it to be at.

[00:01:22]
So I'm going to say 90 degrees. And then it's going to go from left to right instead. Or I could say it's going to be at, I don't know, 15 degrees. You can manipulate the angle, it's going from 15 degrees red to blue. With radial gradients, you can do a little bit more. You can actually put a circle keyword here and it will become a perfect circle all the time instead of becoming a weird ellipse that doesn't always look so nice.

[00:01:49]
You can't give these a degree because it doesn't make sense to have a degree in this situation, but you can say where they are at top left, like a background image. Go to the top left, comes out from there, or I could say at specific values at 20 pixels, 50 pixels and the center of it will be 20 pixels across, 50 pixels down. The last one down here, I'm going to throw a few extra colors in here. We'll add a yellow.

[00:02:20]
So we have that. It looks kind of weird. People are always like, what would you use conic gradient for? There's crazy stuff. You can do checkerboard patterns and stuff with them. We don't have time to dive into that, but you can do stuff like pie charts with them. Actually, let's go up to this one really fast to start with. This will make more sense here, and then we'll bring it into the other one, where you can add positioning to these.

[00:02:44]
So I could say it's red to 50%. So it's red until we get to 50%, then I'm going to start my gradient. And then I could say that we have a yellow at 75%. It's going to go from the 50% pure yellow at 75%, then do the rest of the gradients. You can play around with the numbers a little bit. What's interesting when you're playing around with the numbers is if two of the numbers are the same, it will create a hard line.

[00:03:13]
So, because red is up to 50%, blue has to be at 50%, so it creates this type of thing. You could create some interesting things with that, I guess, but where that comes in more is with these conic gradients, where I could say this is at 33%. Blue 33%. Blue. Say 70%. And then yellow at 70%. So we get some hard stops coming around, some sort of cubism type thing or I don't know, there's a style to that.

[00:03:49]
And we're going to learn about these a little bit later on, but I could do a border-radius of 100% and a width, let's just say 500, height 200 pixels and you could use it for like pie charts and stuff like that as well. So there's some interesting things you can do with gradients that aren't super straightforward. We don't have time to dive into everything, but definitely one of those worlds where they seem really simple.

[00:04:12]
For most stuff you will use them in simple ways, but I just wanted to let you know, sort of tease you and give you something else to look into a little bit to take a look at them.