Instructor: So, in this lecture, we're gonna learn
how we can actually create shadows using CSS.
And in order to demonstrate how shadows work in CSS,
what we're gonna do is to add a shadow
to each of these cards here.
And remember that,
that is one of the common uses of shadows.
So, to add a medium sized shadow to a product card
like these ones here, right?
Now, adding shadows in CSS is actually quite simple.
All we need to do is to use the box shadow property.
So, in order to add shadow to a box,
then remember how I said that 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 used 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 save, then...
Well, we get a huge, black and terribly looking shadow.
Now, actually, we want the shadow not to be
just on this part, but on the entire card.
So, let's see if there's a class on that.
And it is, so the chair class.
So here, and,
yeah, doesn't matter.
I think all of them will have the chair class.
And what I'm also noticing here is
that each of them is actually a figure element.
And a figure element I think I hadn't described before,
but, basically, it's a common element
that we use for a product card like this.
But we could also have used the article HTML element,
such as we used in the coding challenges
of the previous section.
Remember that?
So, there we had a shoe which was also,
kind of, an article like these ones here.
And so there, we used the article element.
So again, we could have used that here as well,
but figure is also, kind of, a standard
for displaying any card like these ones.
But anyway, let's now go back,
select the chair class here and move our shadow there.
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 RGBA notation for that, right?
So, we can easily convert that by hovering over this color.
And then, here in the color picker,
we just need to keep clicking on this title.
One more time.
Yeah, so now we have RGB, and if we then change this slider
it will add the A here and the fourth value,
which is for the opacity.
Now usually ,for shadow we use a very low value,
something like 0.1, 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 high 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 the 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.
All right?
And so, I think that this looks
a lot more natural right now.
Then, the other value actually looks okay,
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, let's 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 four,
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.
And 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 at 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, while, 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.
Okay? 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 CSS.
Okay? 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 page.
And I think we can actually go a little bit lower, even.
So, what happens if we give it 5%?
Then it becomes even subtler, but it is still enough
that we, basically, get this border here.
So, without the 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 0.5,
and maybe that's a little bit too little.
Let's put it at seven.
So, this is, basically, a 7% opacity.
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 box 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 there.
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 H1 element.
So, instead of being called box shadow,
it's called text shadow,
and this one doesn't have this fourth value of the spread.
So, it's just like this.
Let's add 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 values 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 text 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 in CSS.
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 gonna talk about border radius,
which is yet another one of those,
a little bit more modern CSS properties,
that we use in the real world all the time.