Shadows

[00:00:00]
>> Kevin Powell: Now we can move into the world of some decorations and effects, and the first couple here, it's going to be a little bit of a breather. We can relax a little bit, we've done a lot of really heavy lifting for the last few lessons, bringing back grid, flexbox responsiveness, positioning, there's a lot there, there's a lot to wrap your mind around, so let's tone it down and look at some fun stuff. And the first one is box shadow, or even I say here there's 3 ways to create shadows, once again, CSS, there's lots of ways to do the same thing, but they're all different, so there is a reason that we have 3 of them.

[00:00:32]
Box shadow is a really interesting property, because I think it's the only one. If somebody in the chat or somebody here wants to look this up while I'm talking, I would love to know, but I think it's the only one that has multiple values, and it's not a shorthand. So I think so. I could be wrong, because with a box shadow you have to provide it with a minimum of three values and usually you give it more.

[00:01:05]
So I'm going to do 20 pixels, 20 pixels, 20 pixels, 20 pixels, and then give it a color, or we have a color, but you'd normally give it a color. Let's just do red for now, so we see it show up. You don't need all of those, but this is how many values it accepts. This first one is the, actually there's another one. We're missing one value that we could potentially be giving it. So it's a lot of values and this is not a shorthand.

[00:01:32]
There's no way of breaking these down into less or into a bunch of different properties. The first one here is the offset X on the X axis. So if I said this is 100 pixels, it's going to move further over to the right. If I do, it's -100, it's going to move off to the left. The second one is my Y axis, -200, we'll move it up. Positive 200, we'll move it down. The next one here is the blur. If I make this really big, it will get very blurry.

[00:02:07]
And if I make it really small, it will be not very blurry at all, almost looks like it's a solid box. Let's just change these offsets a little bit, it's maybe a bit much. Something like that looks a bit better. And then this one is the spread. Spread means how far are we going until we start making a blur. It actually makes more sense to do this if we have a 0 here. So let's do 0, 0, 2 pixels, 20.

[00:02:40]
So normally. Let's say this is 0. This is just my blur, so if I add a blur, we have a shape, it's getting blurry. It's called box shadow, as you can see, you can also use this for glows if you're using bright colors. If I come here and I add a spread, we're going 30 pixels out, then the blur starts and it does a 20 pixel blur from there. This can also accept negative values. There's times where you want to sort of pull things in as well.

[00:03:07]
The other value that we can add, I mentioned there was a missing one, is inset. Inset makes an inner shadow instead of an outer shadow. Looks really bad when it's red, but you might come in with an HSL 0, 0%, 0% over 0.2 for like a more subtle shadow with zero spread on there, and you can sort of create like this cutout effect where the shadows coming on the inside, so it looks kind of more interesting.

[00:03:39]
The only values you have to give, if I'm not wrong, are the first 3. Just because if not, the first value will always be the offset X and Y or X, then Y, then the blur. If you don't want to spread, you don't have to include a spread, and obviously if there's no inset, you just omit that. And if you don't give a color, it will match the color of the text. So you could do a box shadow this way if you wanted to, and then I get pure black, if I were to change the color of my text.

[00:04:09]
I hope I'm right on that. It feels like it's right, but we'll find out. Yeah, OK. So the default color is the same as a border, it will match the color of your text. Really quickly actually, I got this tip from Ana Tudor, I think it was. I always would mix up, is the first one the X or the Y? I meant to mention this already, but the X is, it goes in alphabetical order, X, Y, Z, so it's X is always first, Y is always second.

[00:04:33]
That's how I remember it now. So you have the full list here, that's the order they have to go in. You can't, you might be able to move the color around actually, but I always put them in that order. Here's a really quick example just on how we can create depth by using shadows. So the blurrier it is, it tends to make it look like it's higher up. If it's less blurry, it looks like it's a little bit closer.

[00:04:58]
So you can use shadows to create a lot of, it's the main reason you're doing it is to make it look like the element is off the background, and by making things blurrier, larger blurs, offsets, you can give that effect. This is where you might actually come in with a negative on the higher one, where instead of a zero pixel spread, you come in with like a -20 pixel, because the blur is so big, even though it's getting sucked in, you still have a really big blur behind there, so it still comes out and it softens the shadow even more.

[00:05:31]
It's one of the times you'll use it. Making nice shadows is really hard though. Oh, actually, before we get to that, you can have multiple shadows, which is really fun. You just create a comma separated list. I thought I had the demo there, but we'll create one really fast. We'll do it with our high shadow here. So that's shadow higher. We'll keep that one. We'll come in with a second 10, 25 pixels, 75 pixels, no spread, I'm just going to omit it, and then we could say something like, let's say red, just so we can see that we have two shadows on there.

[00:06:11]
And it's a bit darker, the order of these also matters, it paints them in the order that you've created them. I'm just going to fix that, so it's a comma separated list, so now my red one's actually on top of the black one, and we don't see the black one, because there's no opacity in this red here. Shadows are visual only. If there's other elements, it will cover them, it won't cause overflows, it won't cause any issues.

[00:06:36]
So one time you might want to do this, not often, but sometimes, you will do it. If anyone here has ever played a CSS battle, you can look it up, CSSbattle.dev. Lots of people are successful at them just by using box shadows and gradients in very creative ways. So 0 offset, 0 offset, 0 blur, 20 pixel spread, and we'll get a black box around it, as we just said, spread by 20 pixels but don't blur. Underneath that, we can say we have another 0, 0, 0, oops, 0, 0, 0, 40 pixels, this one's red.

[00:07:15]
Underneath that one, 0, 0, 0, 60 pixels, and this one is going to be green, and we have a very ugly layout starting to come together. But you can have as many shadows as you want and do what you want with them, and you can even offset them differently, you can get creative with it and come up with some interesting effects. And those will not show up. I mean, they're not elements. They're not elements, correct.

[00:07:37]
They're decorative only. That's why it's not affecting the box that's next to it. Yeah. So debugging that could be tricky because you can't even select it. Yes, there's no way of seeing it. It's not part of the box model, it's just this visual only thing that's floating around there, yeah. So we have multiple ones. Next up is text shadows. Text shadows work in a very, very similar way. The big difference is you make the text a shadow instead of making it on the box.

[00:08:09]
The one difference is there's no spread value. So if you want to spread, you don't have one, is basically what it comes down to. X offset, Y offset, a blur and a color, and you can add that, and just like with other ones, you can come in with multiple shadows on a text shadow by creating a comma separated list of them. So here I have a whole bunch, just creating a bit of a weird effect. Probably not something you'd want to do, but a personal project, maybe you could have some fun with that, or do some interesting things.

[00:08:42]
Again, visual only, so if I had other content around there, it might be overlapping, playing with that content, won't cause any overflows, but it won't shift layouts around or anything like that when you're doing it on your text. Could you do that with emojis? Yeah. A Windows, what's the emoji picker on Windows? There it is. Windows period is the emoji picker for Windows. Should work. Yeah, there we go.

[00:09:15]
Fun fact, don't do it unless you're just having fun, but you can also use emojis as class names. They're valid characters, so. Yeah, I've seen people use it for grid area names, grid area names, yeah, yeah, you can use them, just be really to see if you can pass one through on a pull request one time. I'd love to know if you can manage that. The last one that we have is a drop shadow. Drop shadow gets the least amount of attention, but it's actually pretty handy.

[00:09:45]
It's a lot more like text though, X, Y offsets, blurs, colors, but we do not have a way to add a spread in. It's the one limitation of it. It's using a filter property instead, so let's open this up, we're going to see. I was going to hide the results for a second, but we're going to see the difference. This is a box shadow. This is using a drop shadow. And I'm doing this with an SVG. If you had a PNG that had transparency, it would be the same thing.

[00:10:16]
Pretty clear the difference, box shadow around the box of the element, it adds a shadow. Drop shadow looks at the transparency of what you're creating it on and will create the shadow around that transparency instead. And as I said earlier, bright colors can make glows instead of them being shadows, we'll just do black now because it will stand out a little bit more. And to highlight the difference between them.

[00:10:45]
So it's a filter, drop shadow coming in like this. Technically speaking, because it's on filter, this should be more performant. Box shadows are, I'm talking about CSS performance not long ago, box shadows are one of the things that can cause performance issues because it's a lot of work for the browser to create those. Filter is one of the properties, it's hardware accelerated, meaning the GPU can get involved with it when it comes to rendering the shadow.

[00:11:14]
The problem with it is the complexity of the shapes then makes it more work, because a box shadow is a lot less complex than trying to map the opacity and make a shadow around a complex shape. So do be careful with shadows. And if you have to animate shadows, do lots of testing, because we're going to look at transitions and animations later. People like the thing gets bigger, so the shadow moves, that can, especially on lower end devices, cause some really janky animations.

[00:11:45]
It's a lot of work for the browser, even these days on modern web browsers and everything, shadows can cause some performance issues. I mentioned that it's hard to create nice shadows. I'd encourage people that want to to check out Josh Comeau's shadow palette generator, and he also has a full article that I've linked here on the explanation on how like the thought process and why he's done it the way he has.

[00:12:10]
There's a few others that are a bit similar, but just to look really quickly, he provides multiple elevations. He has an oomph slider, how oomphy is your shadow, and a crispiness slider to make it crispier less crispy. You can change your light position, so it's pretty cool. And you can also change the background color, and in his the background color becomes very important because he's using a little bit of the background color in the shadow's color, which makes it more natural, and we'll get it to work a little bit better.

[00:12:40]
So, some sites that you're doing that might not be an option, but if you have a consistent background color, it's a nice way to add details, and he can turn off the shadow tint if you want here. And there's the resolution. Resolution, you'll notice a small change as I play around with it, and the way he's doing it is lots, he's giving you custom properties. It's layering multiple shadows on top of each other.

[00:13:03]
You just have softer and softer shadows going out, especially for the bigger ones, and it creates much more natural shadows. The problem being it's more work for the browser. So the higher up your resolution goes, then generally speaking, the more realistic and nicer the shadow will look, but then the browser has to figure out all of those shadows for one element. Your computer that you're developing from, it might be fine.

[00:13:24]
Lower end devices might not like it as much. So just do be careful with shadows, but that's a really nice resource for if you do want ones that don't look really bad, because if you just make a black shadow, it can look bad, and people don't like ugly sites usually, so just be careful with them.