0:00
What's going on guys? You're watching CSS for Beginners Lesson 50, and in this
0:10
video we're going to take a look at the box shadow property. Alright there, so I'm
0:15
back here in the code, and I've still got all of these styles from last time where we made a button with a cool gradient, and we're going to add a box shadow onto
0:23
that button. Now what is a box shadow? Well in simple terms it gives an element
0:27
a shadow. So basically what that does is give it some depth, it appears as though
0:31
it's coming away from the page, and we can control that shadow to have
0:35
different kind of effects. Now how do we do this? Well the first thing we need to
0:40
do is come to the element rule here, a button, this is what we're styling, and we
0:45
say we want a box-shadow property, and then we pass various values
0:50
into this property. Now the first two values we pass through are the
0:54
horizontal and the vertical position values. This is how far from the element
0:59
that you want the box shadow to appear. Now because this is just a small button
1:04
I'm just going to say just two pixels for the horizontal and vertical position
1:08
Okay, so that's going to position it two pixels to the right of the button and
1:12
two pixels below the button. We can use minus values if we want to go left and
1:17
upwards, okay, but automatically plus values are going to go to the right and
1:22
the bottom. Now the third value that we pass through is the blur radius, and the
1:25
blur radius is essentially saying how blurry we want the the box shadow to be
1:31
Now a low value is going to be not blurry, and a high value is going to be
1:35
very blurry. I'm just going to say four pixels for this, I want it a little bit blurry but not much. And the next value we pass through is what's called the
1:42
spread, and the spread is essentially saying over what distance do you want
1:47
that to be blurred out. Do you want it to be blurred out over a large distance? If
1:51
so put a high value. Do you want it to be spread over a very small distance? If so
1:56
put a low value. I'm just going to put two pixels for that as well because I
2:00
want quite a low value. Now then the last property that or the last value that I'm
2:06
going to supply to this property is going to be the color of the drop shadow
2:10
the box shadow. And we can do this via hex code or RGB or HSL. I'm going to use
2:16
RGB because I'm going to pass through an alpha channel RGBA so that I can give
2:21
it an opacity as well because I think most shadows are a little bit transparent. So I'm going to give it a deep grey color, I'm just going to say 40,40,40
2:29
that's going to be a deep grey, then give it an alpha value of 0.6
2:34
That's going to make it a little bit see-through as well. Now this is a fairly
2:40
new property of CSS. I used to use vendor prefixes for this, some people still do
2:44
I've now stopped using those vendor prefixes because pretty much all of the
2:49
browsers now support it out of the box. So I'm going to save this anyway and I'm
2:54
going to view it in a browser. So this is what we had last time, this button here
2:58
with the hover effect. I'm going to refresh the page and now you can see this little blurry box shadow here and that's giving it some depth, it's bringing it
3:06
away from the page. Okay so that's what box shadows are all about and there's
3:12
many different things you can do with them, much like the gradient. Now much
3:16
like the gradient properties I like to come to a generator sometimes if there's
3:21
something I want to play around with, I don't want to keep putting values in and saving and refreshing, I just want to see a preview here, change the values
3:29
like this and have it generate the code for me. I can do that at
3:36
So this is a little nifty site that you can use to generate that
3:42
code for you. That still does put in the vendor prefixes here, you can see the
3:46
WebKit one and the Mozilla one. Like I say I don't use those anymore but feel
3:51
free to keep them in if you like. So that's about it for the box shadow, if
3:56
you have any questions whatsoever feel free to comment right down below and I'll answer all of those. Otherwise if you enjoy these videos don't forget to
4:03
subscribe to catch all the updates or share or like these videos and I'll see
4:08
you guys in the next one
