CSS Box-Shadow tutorial: the basics

Key Takeaways

hi my name is Kevin and here at my channel we learn how to make the web and I make it look good while we're at it and this week we're gonna be celebrating me getting a green screen by learning how to make some box shadows the Box shadow is a super cool property that can do a lot of nice subtle effects that can just really make your designs stand out and be a little bit nicer or you can also use some sort of hockey stuff with them as well to do stuff you wouldn't otherwise be able to do instead of covering all of this in one big long video though I'm gonna break it up into three different videos in the first video we're gonna be looking at how the box shadow property actually works the you know the values that we can give it and different stuff we can do with it to make sure you really understand what's going on in video number two we're gonna be taking a look at how to actually make box shadows look good to avoid things like we see behind me right now and to look at examples and ways to make box shadows just not ugly because box shadows well they're cool or maybe one of the easiest ways to make your design just look like crap if you don't use them properly in the third video we're looking at three hacks that we can use with the box shadow property and they're just different ways that are gonna make stuff look awesome and avoid extra markup and stuff like that but that's a little while away we're starting off today just on learning the basics so let's jump right into that box shadow isn't a complicated property but there are lots of parts to it so I'm gonna dive into all the values we can place here discussing how they were and some important details on each one and then we'll look at how we can apply multiple shadows and box shadow is a bit of a weird property because it accepts between two and six values we're gonna start with two and we'll work our way up from there so here I have a box then is here I have some other styles going on to set this up but they don't matter too much for that this video but this is uncle pen so you can always go and check out the link to that it's in the description below if you want to see the finished version of this and all my other code that is hiding up the top um so we're gonna add a box shadow so the property is like that just a hyphenated box shadow and as I mentioned we have to give it at least two values so the first two have to mean numbers I'm going to do 20 pixels and 20 pixels and look at that I already have a really nice and sort of cool stylized to shadow it actually looks pretty good right now now these values can be m's they can be REMS they can be pretty much any number value you want the only thing you can't do is percentages its percentages they won't work just so you know so let's just go back to the 20 pixels and 20 pixels because I thought that looked pretty nice um now what these are is this first number is the horizontal offset and the second number is the vertical offset so I'm just going to switch this one over to zero I'm going to see it's only moving down now so it's moved down 20 pixels but the left and right is at zero and I make this 100 pixels that's gonna shoot off more to the right and then 50 pixels and it's 50 pixels to the right and we can do the same thing with this 200 and it will move down 200 pixels from where it originally was and if you want to move things up or to the left you just have to make these negative values and then you can have them up and to the left so yeah that's how that works let's shift this back to 20 and 20 and that's the first so again this is the horizontal offset and the second one here is the vertical offset the third property here is another number something used 20 once again now that's looking a lot more like a shadow as you can probably guess this value is the blur this is the blur radius or the size of the blur when it's set to 20 pixels like this what it means is it will go from solid color so right you're wherever it was a solid color and saying take 20 pixels from being solid black to where the blur ends and it's gonna be a gradual decline in opacity as you go along now you can make the blur as big as you want and it's gonna make it softer and softer and softer at one point it would get too big and it's you know you're not really getting the effect you're probably after um the one thing unlike the vertical and horizontal offsets we cannot make the blur a negative value it just won't work it does not accept negative values here you can have a zero that's the default that's what we had before and any positive number will work and just like before if I want to do this in ms or REMS I can easily do that as well now the fourth property I can add in here let's just put that back to 20 I'm going to do another 20 here and so I'm on my fourth property now this is an often misunderstood one and what it is is it's the spread what it pretty much means is take 20 pixels and then start the blur so how far are we going before we start to create a blur to help understand what's actually going on here I'm gonna take this off and let's do a 0 so 0 0 so I have no horizontal and no vertical offset I'm gonna put a glare of 20 pixels so you can see that I have my blur coming on there and I'm gonna add a spread of 20 pixels it's pretty much making my blur start further out so it's pushing everything away a little bit and then it's starting the blur so it's pushing it 20 pixels in all directions I can make that 200 I think we'll get much bigger so it's gonna go to 200 pixels and then I get my 20 pixels of blur now one thing unlike this property which cannot take a negative this one can take a negative and you can see now my blur is there but it's really really subtle because it's been pulled underneath my box a little bit more and the negative value on the spread here can be very important and very useful for some once you start getting into some more advanced stuff sometimes you will be using negative spreads from time to time finally we can add a color but there are a few things to know about color before we play with it first off if you haven't put a color you'll notice right now mine is black it's possible yours isn't because the default is not black it's actually matching the color property I bet you didn't know that if I come on here and I do color red my shadow will actually change to red so it's always inheriting that except well not exactly as useful as this could be don't rely on it for some reason Safari defaults the color of a shadow to transparent so here is really quickly becoming the new ie everyone so why they're different I don't know but just know that if you you want a red shadow what you might want to use is the nice little current color property on here which does what that's sort of what the default is in here but it's going to make sure that its default in all browsers so just to show you if I change this over to blue now it will change the blue current color grabs that you can use this anywhere it's not only for box shadows you can use that you know I could use it for my board or - just to show you what it's doing order five pixels solid current color and actually we should take off this we can see what's happening and now my border is on there and it's the current color and if I change this to green so it change it uses the color of what I'm doing here but we're not here to look at current color we're here to learn about box shadows so instead of current color I can just write in the color and one here so I get red and now I get a nice or not very nice red shadow and of course what you can also do on this is use our GBA values or hsla and so I can come on to a zero zero zero point five and that will just give me a bit more of a subtle drop shadow because it has some transparency in there and if we bring this off no more spread it's a little bit nicer now the very last thing that we can use another value that we can do in this one actually has to go all the way at the beginning here it's called inset and I'll do that and you'll see what it is right away it moves the shadow to the inside of the box instead of the outside of the box one thing that's important to know about an inset shadow it will always be on top of the background color but under the content so the inset shadow always goes on behind any text or images you might have but it will always cover your background because if not you wouldn't really see it and that can be a nicely used you can see here it makes it look like this is sort of cut there's a hole in it and it's this is showing behind my original background so the inset you don't see it used very often it can be used in really nice fun and creative ways to get some nice effects now one thing that's important is that as we so at the start the only required properties are the vertical and horizontal offset after that you can skip the blur and spread and just put a color so I could write this let's just erase what we have here and make a new box shadow so I can do a box shadow of 20 pixels 20 pixels red and it's going to work but what I can't do is I can't skip the blur and put in a spread because they're all number values I can skip the inset because the inset just doesn't default to anything but if I add the inset to the beginning I'm just skipping it if not but yeah we can skip the blur and the the offset if I want so I can do vertical horizontal blur skip the offset which will stick to zero as a default and then put my color now one thing that's fun to do is to apply multiple box shadows so let's change this over to black for the moment and one thing you can't do though is I cannot come here and do a box shadow and you say 30 pixels 30 pixels red because the red one is going to win the way the Cascade works this property is going to get taken off and this one is going to get used instead so instead of trying to do it this way I'm going to delete that we're gonna I'm just going to expand this out for the time being and we just have to come and separate them so now I can do 30 pixels 30 pixels 30 pixels red and now as you can see I have a black and a red shadow and you can add as many in here as you want and to make it a little bit easier for yourself in general you can put each one on a new line so after the comma you can just do it like that even better comma and add in more so let's play around with this a little bit and come up with something a bit more interesting say we do 100 pixels and 100 pixels 100 pixels red then we can go 100 pixels negative 100 pixels and I'm going to illustrate something important here with this example as well we'll do negative 100 negative 100 100 green and negative 100 100 100 per Pole so what I wanted to illustrate with this is a we can have multiple box shadows the second one is how they order and overlap each other the first one here um the first one that I put is the one that's on top of all the other ones so I have my big red one and then my blue one then I have my green ones my green one is actually being hidden a little bit by this blue one and then I have my purple last one over here that's getting hidden under everything else so it's just important to know and maybe if I make my blurs a bit bigger on this it will illustrate it even more but just the red one is always gonna be on top of everything else then the blue one and then the green one and then the purple one all the way down over there at the end and there you have the box shadow property so I hope that helps further your understanding of what the Box shadow property is how it works and the different values you can give it and sort of the way you might want to go about using it a little bit if you like this video please hit the thumbs up if you have any comments any questions whatsoever please leave a comment down below thank you so much to my patrons who help support this channel and make all of this content possible and of course until next time don't forget to make your corn on the Internet just a little bit more awesome