Original subtitles

So in this lecture, we're going to learn how we can actually create shadows using CSFs.

And in order to demonstrate how shadows work in cases, what we're going to do is to add a shadow to

each of these cards here.

And remember that debt is one of the common uses of shadows, so to add a medium sized shadow to a product

card like this one here right now, adding shadows in excess is actually quite simple.

All we need to do is to use the box shadow property.

So in order to add a shadow to a box, then remember how I said dead, we can also add shadows to text,

but a bit more about that later.

But anyway, the box shadow property actually requires multiple values.

Here we can specify four or five values, and the first one is basically the horizontal offset of the

shadow.

So here in the first value, we can specify a length which will then be the horizontal offset between

the box and the shadow.

So let's just try 20 pixels here.

Then the second value is the same, but for the vertical direction, so basically the offset of the

shadow from the box in this direction here.

So let's also use 20 pixels.

And for now, I'm just putting any values here.

And later I will then explain how we can create small and medium and large shadows by tweaking these

values.

All right.

Next up, the third value is the blur of the shadow.

So if we use a small value, it will be almost not blurred.

And if we used a very large one, then, of course, the blur will be huge.

So, again, I'm using 20 pixels here and we will then tweak these as we go.

Then value number four is actually optional, but what it allows us to do is to basically scale the

shadow up.

So let's use, let's say, 10 here.

All right, but remember that this one is optional, and if we don't specify it, it will simply be

zero.

Then the last one is the color of the shadow, and here let's just for now use black, which will look

terrible.

But this is just to fill it up with some values.

So if we give it a safe, then, well, we get a huge black and terribly looking shadow.

Now, actually, we want this shadow not to be just on this part, but on the entire card.

So let's see if there is a class on that, and it is so the chair class.

So here and.

Yeah, it doesn't matter.

I think all of them will have to take their class and what I'm also noticing here is that each of them

is actually a figure element and to figure element, I think I hadn't described before.

But basically it's a common element that we use for a product like this.

But we could also have used the article HTML element, such as we used in decoding challenges of the

previous section.

Remember that?

So there we had a shoe, which was also kind of an article like this one here.

And so there we use the article element.

So, again, we could have used that here as well, but figure is also kind of a standard for displaying

any cards like these ones.

But anyway, let's now go back.

Select the chair classier and move or shadow their.

Nice, or maybe not so nice, because we now need to fix that first problem, which is that the shadow

is very dark, which makes it look very unnatural.

Now, remember from way back how we learned that when we want to display a color with some opacity,

we usually use the RBA notation for that.

Right.

So we can easily convert that by hovering over this color and then here in a color picker.

We just need to keep clicking on this title.

One more time.

Yeah, so now we have RGV, and if we don't change this later, it will add a here and a fourth value,

which is for the opacity.

Now, usually for a shadow, we use a very low value, something like zero point one Max.

So this is the shadow that you get in that situation.

However, to demonstrate all the other values, let's put it back at a higher value so that we can actually

see the shadow when we manipulate the rest of the values.

So usually in user interface design, we want the light source to basically come from the top.

So basically from here shining down on the element basically from here.

So what that means is that the shadow cannot be like it is right now, because having a shadow that

goes the same amount to the bottom and right kind of means that the light source is here shining in

this direction where I'm moving the mouse.

Right.

So that's quite intuitive, I think.

And so but if we want a light source to be here at the top.

So in this direction, then we do not want any offset here to this side.

And so usually we do set this value here to zero now.

Right.

And so I think that this looks a lot more natural right now.

Then the other value actually looks OK, so the vertical offset, so for a medium sized shadow, that

is a reasonable amount.

Then this one here, remember, is the blur, and for example, that set it to something smaller just

to see and at the extreme, if it was zero, then the shadow would be completely a box.

So just like this.

All right.

However, you see that the box.

So this shadow is bigger than the original box itself.

And so the reason for that is this value number for which, remember, is the radius, which remember

is basically a value to scale the box shadow up.

So usually I actually leave this at zero and so then it will look like this.

So right now the shadow is only here behind the box and then coming out a little bit here because of

these 20 pixels.

If we increase those, then this part here, of course, becomes bigger.

Right, so I usually leave this here at zero, which is the same as leaving it out completely, but

I will just leave it here so that, you know, for reference that there are five possible values.

So, of course, this now doesn't look at all like a shadow, so let's add back some blur here.

So a 10, for example, it would look like this, which still looks quite unnatural.

And while this makes it a bit better, but still we can go bigger like 30 pixels and so well, in my

opinion at least, that looks a lot better.

We could go even bigger, but then the shadows would start to overlap each other here.

And so let's not go there.

OK, so if we now decrease this value here, it will start to look quite natural, which is always what

we need to strive for when we design a shadow here in excess.

OK.

So this now looks like a nice and clean and especially natural looking shadow, and it does the job

well of highlighting these cards here just a little bit, but without adding too much visual clutter

to our picture.

And I think we can actually go a little bit lower even.

So what happens if we give it five percent?

Then it becomes even subtler, but it is still enough that we basically get this border here, so without

a shadow, this was simply all white, which we can see by doing this.

Right, but as we start adding some more shadow, then, of course, that starts to create a separation

between the element itself and the background.

So, of course, that's zero point five and maybe that's a little bit too little.

Let's put it at seven.

So this is basically a seven percent capacity.

And so this is a value that I like to use in these situations.

And this looks quite nice.

And hopefully with this, you learned how this box shadow property actually works.

Now, this kind of property, which requires so many values, is actually a good candidate to look it

up on the MDN documentation.

So MDN Fox Shadow, if you're interested in learning more about this particular property, there's also

a lot of examples, for example, for creating that kind of glow that I mentioned before.

So of course the shadow doesn't have to be some kind of gray.

So like a variation of black, but you can use a color to create this kind of glowing effect, their.

And you can move the shadow around, of course, using even negative values here.

And yeah, you can even actually add multiple shadows, as we have on this element by adding a comma

here.

Right, you can also read about all of them, but we're not going to do that, but this is exactly what

the documentation is for.

And now, just to finish, let me very quickly also show you how we can use shadows on text.

So I will just copy this because it's very similar.

And let's just do it here on our one element.

So instead of being called box shadow, it's called text shadow.

And this one doesn't have this fourth value of this, Brett.

So it's just like this, let's get some more here.

Just to see the effect and there we go now, this is a lot of blur, that's why we cannot really see

it.

So here, the valleys need to be a lot smaller and now you can see it, right?

So something like this might be possible.

And so in this situation, of course, this doesn't look really good, but actually tax shadow is quite

useful for situations where you have text on top of an image.

So that's something I didn't discuss when we talked about image, but that would be yet another technique

of handling text on top of images.

All right, but let's turn it off, because that looks kind of crazy, and so, yeah, that's it for

working with Shadows and hope that made sense and that it was fun to keep adding some real world effects

that you see on other pages that you visit every single day.

And next up, we're going to talk about border radios, which is yet another one of those, a little

bit more modern as properties that we use in the real world all the time.