Summary of Box Shadow and Text Shadow

So that's tax shadow. Now there's also box shadow. And can you guess what it does? Let's do that for the first paragraph. I'm going to go to the first paragraph. I'm going to add a new property here called box shadow. Let me decrease this so you can see the text. So similarly we can do the same here, box shadow. You can have offset x and then add y, the blur and the color. Let's try just one pixel each and then we can calibrate. And click run. Because we need some line there. It's a bit weird. But let's see. So if I inspect that, another way you can inspect something when the DevTools already opened is you can click this mouse pointer that's on a square, usually on the top left. And then you click the element that you want to select and then it will highlight it for you here under the elements tab in the Chrome or Inspector in Firefox. Now you can go here on the right hand side, scroll down to my box shadow and I can play around the first one of my mouse. So the first one, like I said, it's x offset. I don't know if you see, if I make this bigger here, it actually doesn't matter. Because the thing is sticking over the whole line. So it's the offset there. Maybe it's easier for you to see when the element doesn't occupy the whole line. So let me just do something real quick. I'll change the display to inline block. So it doesn't occupy the whole line. So it's better for us to see. Okay, now go back to box shadow here. I'm going to change the first one is the x. If you want the shadow, the box shadow to go to the right to increase it. If you want the y there, let's do 10 for x offset and then 10 for y. And then the third is like the blur, same thing as text shadow. It kind of blurs the thing, the more I have it. And it doesn't become like a zero, it's like a real rectangle, a box. And then as you increase it, it becomes a little bit blurry. So that looks cooler, more interesting. And then you can choose the color here. Now this one looks weird because I add background color white instead of transparent. So let me remove that. And you can see it will look better. Maybe. Oh, I see every fresh without copying my property. So I lost them. I'm like, let me type it here. So don't forget to copy them over before you refresh. 1010 3 like that. Okay. And then you can choose the color like we did for text shadow. Background, that's weird. Let me see if this works. No, that doesn't work. Anyway, we could play around and make it better than what I have here. All right, anybody have any questions? That's text shadow, box shadow. And again, if you don't remember them, just look at how to make text shadow, automatic box shadow and good website is MDN. I like to reference this a lot. MDN Mozilla developer network. You know, I was find something useful there. Usually when you search for something, it probably on the top results. Like if I see. Back shadow. It'll give me lots of examples to try and click here and see what it looks like. And this is what the code looks like. And then it can go down for the syntax. What, what do these all property means? Like I told you offset X, Y, blur and color. If you do it this way, you realize it can give different values, not just for it can be different ways. And this is what it means. And scroll down, it'll talk more about in depth about the values, what they are, what they mean, and then more documentation here. And you can see some simple examples with the code and everything. I think it can change the code like play or something.