Check out a free preview of the full CSS In-Depth, v2 course:
The "Shape, Size & Sizing KeyTerms" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Radial gradients can be a circle or ellipse. The ellipse can be resized to be more tall or wide.

Get Unlimited Access Now

Transcript from the "Shape, Size & Sizing KeyTerms" Lesson

[00:00:01]
>> Estelle Weyl: Now that we've talked about where we're going to place it, let's talk about its shape and its size. So you have two options. You have circle and ellipse. If you didn't know this, a circle is an ellipse. But it's an ellipse that is the same height as width.

[00:00:17] So ellipse is the default. And if you have a square, right? A square size background image. It's probably gonna be a circle, if it's positioned in the middle. The circle or the ellipse can be declared explicitly or implied via a declaration size. If you declare the size and you only use one value, then that's the radius.

[00:00:44] If you declare two values, it's the width and the height in that order. And the percentage size is only for ellipses, though you might end up with a circle if it's, you know. So here we have an ellipse.
>> Estelle Weyl: That is in the center because we didn't actually say at 50 50, but we could have said ellipse at 50%.

[00:01:06] 50% right?
>> Estelle Weyl: We could've said circle at 50% 50%, and we could have said 20% 20%, okay.
>> Estelle Weyl: Notice that it got bigger, right? The circle got bigger.
>> Estelle Weyl: Right now it fits in the page, and when we did 10%. It was way bigger that the height of the page, we'll cover that in a minute, but just notice that that happened.

[00:01:46] So you can have circle, you can have ellipse. Ellipse by default, we'll have the same aspect ration as the image size.
>> Estelle Weyl: But it's usually not by default. So you saw here when I had it at 10%,
>> Estelle Weyl: That it was now taller than was wide. That's because it goes to the furtherst corner and we'll cover that in a minute.

[00:02:20] But just want to point that out. Okay, so in this example I just said ellipse or circle. I didn't give it a size, you can actually give it a size. Here it's a 640 by 490, which is actually the size of the slide. And that's why, if I actually did this.

[00:02:47]
>> Estelle Weyl: This and this are the exact same because I gave it the size of the slide. But if I gave it 300 or 200, 100. 200, right? It's basically 200 pixels tall. And 640 pixels wide. It's 200 pixels from here to this point here, the outside of the purple.

[00:03:18] Rebecca purple.
>> Estelle Weyl: Okay, so you see it's going to be on the bounds of the parent. Because it's 640px from this point, to the end of that gradient. So if I wanted it to fit. I think I would have to do 320. No, I don't know how big my thing is.

[00:03:59] It's probably 500. 960 would be 480. Yeah okay, it's closer to 480. And not, it's closer to 960. I think the [INAUDIBLE] is 900, right? 450, yep. It's 450 pixels. My screen, the slide area is 900 pixels by, I believe, 470. So that would be 230, except for it's not, so I don't know how tall it is.

[00:04:31] So, that's sizing, you can size it any way you like. However, if you want a circle, you just give one. Since that's too big to really see, let's do two hundred and fifty pixels. We can make this five percent and five percent. Actually lets make it 15%. [INAUDIBLE] 15%.

[00:04:57] We now have a 45. Does anyone know here what a 45 is? Some people are old enough. Okay, it's like a little record.
>> Estelle Weyl: Okay, percentages only work wit ellipsis. Because they're relative to the Background size. So it'll turn into a circle if you have the same background image that's a square.

[00:05:25] But by default, it will be in ellipse.
>> Estelle Weyl: Okay, so the thing to notice, however If you're using percentages, right? As a length, you need to.
>> Estelle Weyl: So now it's 50% of the width and 50% of the height. When you only declare one, it fails. Because the first value is the horizontal and there is no vertical

[00:05:57]
>> Estelle Weyl: That could be one pixel. And there you have a line at 200 pixels, there. That's ugly. Okay, that's better. Okay next, you can also size, right now we've done lengths. Percentages, you can also use key terms. And the default, when you don't use any size whatsoever it's farthest corner.

[00:06:22] So right now, the center of my thing is right here. And it goes all the way to here cause that's the farthest corner. You could say basically make the edge the closest side. But 100% mark the closest side, the closest corner, the farthest side, or the farthest corner.

[00:06:39] We used to have contain and cover. These are no longer supported.
>> Estelle Weyl: So you can barely see it but there's a tiny bit of purple here. Because at the 98% mark it hits It hits the farthest corner, right here at the 100% mark. So we just have a teeny bit of purple.

[00:07:01]
>> Estelle Weyl: If I do closest corner
>> Estelle Weyl: it's gonna be kind of small cuz the closest corner is right down here. And it's pale goldenrod all the way till two pixels to the end, right? So you can't see it cause there's the scroll bar, but you can see a dot of purple.

[00:07:23] So let's just make this 96 and then 96, and you can kind of see a little bit more. But look at all this Rebecca purple. So the end of our gradient is actually here. But it continues on with the last value and fills up the whole screen. Let's move this from bottom 40 pixels to center.

[00:07:47] Actually no, 40%.
>> Estelle Weyl: Actually, let's do 30, 30.
>> Estelle Weyl: Okay so here, our circle got much bigger because the closest corner. It's still the closest corner is down there, right? But the size of the circle is whatever the length is from that dot to that corner.
>> Estelle Weyl: And so for 90%, 6% which is of the 100%, it's gonna be and run.

[00:08:27] So let's try, close this side.
>> Estelle Weyl: There, it's smaller because the closest side is closer than the closest corner, right? This From this dot to the end, it's closer today from this dot to that. You're always gonna have closest side be shorter than closest corner. And farthest corner is always gonna be farther than farthest side.

[00:09:02]
>> Estelle Weyl: Farthest-side is here. Farthest-corner is gonna be a point in my screen that's [INAUDIBLE]. It's gonna be up here. So those are the key terms. A closest corner, closest-side, farthest-corner, and farthest-side. And here are the explanations if you want them.
>> Estelle Weyl: So here I'm using background size to actually make something slightly cute that you would never ever want.

[00:09:35] If we actually did five pixels by five pixels, that might make a decent background, right? Because if I pick better colors because it's subtle. Could be subtle if we do light gray. That's a decent background, right?
>> Estelle Weyl: 50 pixels by 50 pixels. Not really.
>> Estelle Weyl: So what I did here is it does background image is a radial gradient.

[00:10:14] I want it to be a circle. And the I said the background size should be 50, 50. So the circle. Is basically saying, from the 0% mark to the 50% mark, make it purple. And from the 50% to the 100% mark, make it gray. So we basically have a purple area that is 25 pixels wide and a but it looks more like 3020.

[00:10:41] It's the radius. So the radius is 50% of, it's a radius, it's not the diameter.