Up next in 10
CSS Tutorial For Beginners 50 - Box Shadow
2K views
Feb 7, 2024
In this CSS tutorial tailored for beginners, the topic of box shadows is explored. The video likely covers how to use the `box-shadow` property to add depth and dimension to HTML elements on a webpage. Viewers can expect to learn about the syntax for applying box shadows, adjusting parameters such as blur, spread, and color to achieve desired effects, and implementing multiple shadows for more complex designs. This tutorial serves as a foundational resource for beginners seeking to enhance their web development skills by mastering the use of box shadows in CSS.
View Video Transcript
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
0:15
so I'm 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
0:22
shadow onto that button. Now what is a box shadow? Well in simple terms it gives
0:27
an element a shadow. So basically what that does is give it some depth, it
0:31
appears as though it's coming away from the page, and we can control that shadow to have different kind of effects. Now how do we do this? Well the first thing
0:40
we need to do is come to the element rule here, a button, this is what we're
0:43
styling, and we say we want a box-shadow property, and then we pass
0:48
various values into this property. Now the first two values we pass through
0:53
are the horizontal and the vertical position values. This is how far from the
0:58
element that you want the box shadow to appear. Now because this is just a small
1:03
button, I'm just going to say just two pixels for the horizontal and vertical
1:08
position. Okay so that's going to position it two pixels to the right of
1:11
the button, and two pixels below the button. We can use minus values if we
1:16
want to go left and upwards. Okay but automatically plus values are going to go
1:21
to the right and the bottom. Now the third value that we pass through is the
1:25
blur radius, and the blur radius is essentially saying how blurry we want
1:29
the box shadow to be. Now a low value is going to be not blurry, and a high
1:34
value is going to be 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
1:42
what's called the spread, and the spread is essentially saying over what distance
1:46
do you want that to be blurred out. Do you want it to be blurred out over a large distance? If so put a high value. Do you want it to be spread over a very
1:54
small distance? If so put a low value. I'm just going to put two pixels for that as
1:59
well because I want a quite a low value. Now then the last property that or the
2:05
last value that I'm going to supply to this property is going to be the color of the drop shadow, the box shadow. And we can do this via hex code or RGB or HSL
2:15
I'm going to use RGB because I'm going to pass through an alpha channel, RGBA, so
2:20
that I can give it an opacity as well because I think most shadows are a little bit transparent. So I'm going to give it a deep gray color, I'm just going to
2:27
say 40, 40, 40, that's going to be a deep gray. 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:39
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 side 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
#Programming
#Technical Reference