3 Fun Box Shadow Hacks

so you've seen the basics of the box-shadow property we've seen how to use them in your designs effectively and now we're gonna see three unconventional ways you can use them in your website today hacks you might even say that we'll just make you be able to write less markup and have really cool designs so let's go check those out so what we're gonna be looking at in this video the first one is being able to add multiple borders or something which is really cool I can be handy depending on your design there's also this here where we have it like peeled corners instead of having it just like a flat shadow down at the bottom which I think looks pretty good and the last thing is if ever you're doing modal's you can see on this model here I have the background is getting grayed out and we can do that without actually having to use any markup so let's go and check that out we have nothing else I just have my little box right here so let's see how we can create a fake border to start with so here on my box I'm gonna add in a box shadow let's make only one D and shadow let's make this a little bigger just to make it easier to see what we're doing so box shadow so to create a fake border we just need a whole bunch of zeros in there and then a spread and you can see right away that it's working so that's pretty handy you might have remembered from really early on if I just did like 20 pixels 20 pixels something like that with an offset you're gonna get the same type of thing right we're getting the shadow so we saw it in the very first video I was doing so it's coming with the black shadow like that so if I come in and do so instead of doing it like that I want to keep that same one so I have to do the zero for my blur because if I ignore that number nothing's really gonna work and then I'm gonna do 20 pixels and then I can put the color or we can just leave it as black like that if we want to let's go with red for now just so we have a color on there so right away it's creating a fake border and that's really really handy and if I want to create more fake borders as we've seen we can have multiple shadows if we want just by comma separating them so I can come in and now let's do 40 pixels and we'll go with pink I'm just gonna come here and actually push return just to make it a bit easier so we're not side-scrolling a little bit so I have my pink and that's come in and let's another one here is zero zero zero sixty pixels and let's go with a green or something like that just to have multiple on there now one thing you'll notice is each one is twenty pixels thick is this first one is twenty pixels this one is underneath that so it actually needed to be forty pixels because it's starting at the same place as the last one so if you do want to have multiple shadows like this you do have to play around with it a little bit just to get it to work properly another thing that's really important to consider when you're doing this is if you do have some extra content it's possible that that content gets covered by your shadows let's just make this last green one really big so we can see here that it's I'm exaggerating here just because we had a big space in the content you can see that it's covering up the content that I had and that can be a problem and the reason this happens is because with shadows they're not part of the Box model they're not getting added into the total size of my document they don't go with the flow of the document which is really handy that's really good because if not it we would just never use the Box shadow but it just means to be careful with that one solution so you don't have to worry about it as much it's just to make them all in set shadows in set and in set so if I do that it works now if you do that the only thing is you'd probably want to increase your padding a little bit just to make sure that you can you know you still have enough space on the inside but at least when you do that you know that it won't cover the things you know it won't cover up other things that are on the outer content so just by makes it a little easier just use a bit of padding and it will fix any issues on the inside so yeah I think that's a nice one to be able to do just to add multiple borders if ever you need it and another cool thing you can do with this it's exactly the same idea I'm going to put them back on the outside but what we can do is if I go with negative spreads on this so say I did negative 20 negative 40 and negative 60 so they're all hiding underneath but now I come on to this one here which is the or not that one sorry I come on to these which are my sets I could do something like forty pixels sixty pixels actually that should be say 80 and 120 pixels and we can sort of get this cool type of effect going on and you could add a whole bunch more here and just have them sticking out the sides the top or doing different things like that so that is another option to get this sort of interesting stepped effect so what it's pretty much doing is it's negative twenty pixels so it's going here by 20 but it also means it's coming in and in by 20 pixels and then I'm moving it down 40 so it sticks out by 20 because it's 40 minus 20 and then here the same idea it's moving 40 in 40 up so that I'm pulling it all the way down so it's actually sticking out 40 so I only see 20 and then I do the same thing with the green one there so you're pretty much doubling the values each time but that could be a fun little effect same type of idea again if this one was really big it would cover the content after so just be aware of that and be careful with that moving on to the modal background fill this is the really easy and simple one to be able to do this is really really really basic I am using a little bit of JavaScript to do this if you're curious and you want to see that JavaScript or to see how I've done any of this I forgot to mention it earlier but this is all done with code pen so the link to this is in the description below you can go check it out it will be the finished version of whatever I finish working on right here that you can take a look at and play around with a little bit because I'm not going to get into the functionality of all that I just want to be looking at the box shadows for now so here on my modal that's popping opened that modal is just created right here I just have a div class of modal and I looked down I was hiding all the styles for that but what I could do is on my modal have a box shadow now if I just did say I don't know 0 0 20 pixels 0 type of thing already my modal is like standing out over everything else if you remember back from the last video where I looked at how to make them look good you wouldn't want necessarily one that's this dark but at least it gives you the since that it's sitting on top of the content but a lot of sites like to darken out with the content they're adding an extra markup just to darken it sort of sucks in my opinion I like just having my moto like that so one thing you can do is I'm actually gonna put my blur to zero now if you remember when I was doing my these shadows I mentioned that there the page and other content ignores the shadow it pretends it's not there it's just a visual element but it's not actually like content on the page so you can sort of take advantage of that by coming on the spread and just making it ridiculously big so now it's covering everything my my spread is actually way bigger than what I'm seeing 100 vertical width means starting here it's going a full-screen length in every direction so it's insanely big you could get away with a much smaller number but by making it that big I'm not getting any scrolling because of it because it's being ignored by everything else it's not actually so it's not a Content element so it's not causing any issues and if I wanted to tone that down I just have to come with an RGBA don't know what TG ba is of zero zero is zero and then I don't know point five and then we have a transparent black background on my modal when it's open so it sort of will make sure the the focus is on what's in here and then it goes away you can make that fade off and do all those other things as well yeah that's a nice one that I I think is really useful and it's nice that it means you don't have to add in some decorative markup and things that you wouldn't actually be using so I think that is a nice handy one now onto the peeled corners for the peeled corners I'm going to delete this and for the code the final version of code pen that I end up sharing the link below I'll make sure to turn them back on and I'll probably pretty them up a little bit at the same time but let's just get rid of that because it's gonna hide what I'm doing and let's look at how I can do these peeled corners now for this we do need to bring in pseudo elements this is less of a box shadow hack itself and it's more of just a cool way that we can use box shadows and without extra markup once again so I'm going to be starting out by putting these pseudo elements on top of my box so we can actually see what's going on and when I'm done I'll move them over to the back we're gonna need both a before and a box after for this one just to be able to do everything we need so if you know about suit elements you know you always need the content property a position app so loot will help and I'm already had my position:relative here because I want to make sure that this position:absolute is in relation to the position of my box and not my body if you're not comfortable with positioning I do have some videos on that and I do also have videos that cover the pseudo elements in quite a bit of detail as well links to those will be down in the description below if you're curious um so top I can't see them right now actually it's just leave it like that and now let's come on to style these separately so box before I'm gonna do a couple of things here I'm gonna give it a background of light blue so we can see it and let's come up here I want both of them to share the same top so if I do let's just do a top:0 bottom:0 to start with just so we can see what we're working with left:0 right:0 so it's covering up my whole my whole thing which I don't want I only need something that's gonna be down close to the bottom so I'm going to switch my top over to ninety percent so it means it's gonna push down ninety percent of the way from the top so the top of this is ninety percent of its total height away from the top which is a perfect so it's just a little bar here and that's sort of what I'm after actually the other thing I think I'm gonna do on this is I'm gonna move it a little bit off of the sides and a little bit off of the bottom so let's I'm gonna start with point I don't know I start with about five pixels but I might have to play around with this number a little bit on the left I'm gonna go with that same five pixel number and on the right I'm gonna go with it quite a bit bigger let's just do like forty pixels forty five pixels basically I don't want it too close to this because I want this to only be doing the shadow here and then my after it's copy and paste that to make my after pseudo-element on this will make it pink so it's a different color and I'm just gonna switch these around so this one become 45 and this one become five and now let's add a shadow to those so I'll come back the shadow will be the same on both of them so we're gonna go back to here where I have my selector for both my before and my after and let's add in a box shadow let's go with zero zero I don't know 15 pixels we don't need a spread so we'll just put the color and we'll make it a black I'm gonna start with point five and we'll sort of tweak it from there so you can see both of these have a shadow on them now but obviously it's not doing what we want it to do at all so we're the real magic this comes in is you can do a transform rotate now the rotation in this case is gonna be pretty small I'm gonna start with four degrees and we'll tweak it from there and I actually want that one to be a negative four because I want this side to be closer and my spacing on everything is off actually let's go with three fours too much and I'll have to move them up a little bit too so this one will get the same thing but the transform will be three degrees so you can see that they're how they're working like that so what this is going to do is create the peeled effect on this side this other one is going to create the peeled effect on that side now the problem is you really need to make sure these are hiding a hundred percent completely behind the white thing so my bottom here is gonna have to be a much bigger number um there we go so now that they're hiding completely behind that it's already going to be working now it looks weird because we have the big X that is on top of that like that so what I'm also gonna do on here is just give them a z-index of negative one to push them into the back so now I can't see them the only thing I see is their shadows so that's exactly what I want I only want to see their shadows but I can't see enough of their shadows I can barely barely see theirs it's giving me sort of the effect that I want but I want to make that a little bit more emphasized so to do that um you could try playing around with a lot of things but the easiest thing to do we have horizontal offset and vertical offset I'm just gonna add a little bit to my vertical offset here to pull it down and right away look at that it already looks pretty good I think it's a little bit dark so you can play around the numbers a little bit to lighten it up and you start getting them so playing with the vertical offset your blur you can make your blur a bit bigger you can make your blur a little bit smaller and play around the numbers a little bit this is one where you're probably using magic numbers of it which is numbers that work only in these specific use cases and it's sort of perfect for your design but maybe are you're just especially on the positioning of everything to get them where you want you could also come in on the box itself and add a really subtle shadow back shadow was zero five pixels so I want to move it down a little bit you can see it there the black is the right color so let's just give it a blur of I need it to be a lighter black anyway but box shadow I'm gonna give it a blur of a pretty big blur actually and rgba 0 0 zero point I'm gonna start with point five so we can see what's going on and I'm gonna give it a negative 15 or so spread because I don't want it to be on those ones a sorry yeah I should it's make it bigger and then I use my vertical offset just to pull it down so we can start seeing it just showing up a little little bit here but I'd want it to be a really subtle subtle subtle shadow you need that no I'm just saying if you do want a little bit more on that you'd want to come in with that we're using a negative spread so you're not getting the shadow all around like that a pretty big blur and then an offset just to get it sticking out just a little bit along the bottom just be aware it will make these slightly darker when you do that as well maybe I could even make that a little later but there you go a nice cool little effect we can get like that for some peeled corners one thing that's really important with this actually that I forgot to mention when you're doing your vertical offset here make sure you don't make it too big because when you start making that number too big you might start getting something looking really weird and strange so just it is a little bit finicky you got to sort of just find the right number and play around with it a little bit then bigger it is the more peeled off the look but once you go too far it just starts looking really strange that's it for this one but before you go if you enjoyed this video and you liked playing around at the box shadows and you'd like to seeing what I was doing with them here I strongly suggest checking out my video and using position:absolute in the wild if you haven't already seen it of course in that one I take a look at how we can use box shadows to create a nice little sliced type of look where it looks like the you know one box is going into another box type of thing it's interesting if you haven't seen it and you liked this video I think it would be your cup of tea so you can check that one out too and that wraps up my series on the box shadow property I hope you like this series if you have any other hacks or just unconventional ways of using box shadows please leave a comment down below and let us know about it of course if you're reading this and you want to see if anybody else has any suggestions go and check out those comments down below and I just want to give a big shout-out to my patrons for helping support this channel and making videos like this possible and of course until next time don't forget to make your economy internet just a little bit more awesome

Channel: Kevin Powell

Views: 48,178

Keywords: Kevin Powell, tutorial, html, css, shadow blur, box shadow, css effects, css box-shadows tutorial, css box shadow tutorial, css3 box shadow, css box shadow basics, css3 box shadow basics, css3 box-shadow, how to use css box shadow, css box shadows, css box-shadows, css box shadows explained, css box-shadows explained, how to use box shadows, box shadows explained, box-shadow hacks, box shadow hacks

Id: TZRSXNc0T1k

Length: 17min 4sec (1024 seconds)

Published: Wed Apr 18 2018