How to add a css drop shadow to a website button div tags and text fonts headings

Hi everyone, this video is all about Drop Shadows. Drop shadows off, drop shadows on. Off, on, off, on. Problem with me is, they're like nice subtle drop shadows, so it's a little bit harder to see on screen, so I'm going to toggle between them, make it go crazy, but you get it, right? Drop shadow on text, we'll do it on buttons, we'll do it on big old Div-tags. It's a Drop shadow extravaganza. Let's jump in now and work out how to do it in CSS. 

We'll start by adding at 12 button. So we've got our button, there he is there, he's not there, where is he? He's this one here. So there's our A-tag wrapped in our Class, called My Button, there's my button. And all we need to do is add box shadow, which is weird, right? Box shadow. The syntax works, there's X, Y, blur, and then color. So you can just put in X and Y. So you can say, actually I want it to be 5 pixels to the right, and then I want it 5 pixels down, don't put commas in, just put in spaces. It just assumes that, and you can leave it there. 

So you can just put Drop Shadow, kind of down bit, and right bit. Let's have a little look. You can kind of see it in there, basically what it's using is, it's really hard, I'll get the editor to zoom in. You can see the little pink thing in there, it's because it's using the same color as my text. So in this case I'm going to need to add a color, which is the third one, so I'm going to say Black. There we go. I can add another one because that's just like a drop shadow, ugly. What we want is to blur it a little bit. So X, Y, and then the third one is going to be blur. So I'm going to say, I like to blur it by 5 pixels as well, and it just puts a kind of a fuzziness to it. 

What you can also do with Drop Shadows is, we've used black, right? So black's cool, but if I click in black, and wait for that weird Color Picker to appear, I want to play around with the opacity. So I'm going to use an RGB-A color just to get the opacity down. So that it's just not as, like violent. And then again, I think that's a big giant button. You might like it, I prefer like real simple. So I don't like anything on X, this is what I do normally. You don't have to do, but something like this gives me a nice, like-- so 0 across, so it only comes out the bottom. It's got a very short little blur, and the opacity is down low, kind of like 22%. Let's give that a test and see what it looks like. 

Can you see, just like a little subtle button. Sometimes you need it, like, I think this is pretty clear that it's a button, but often I'll design something that just doesn't look like a button. So you got to give it some, like drop shadow, just to kind of make it feel like it's clickable. Now we've done it for this button here, well, actually not for a button, we've really just done it for an A-tag. So you can do it for any tag, let's say, H1. Let's grab all of this, copy it, find our H1. Where are you, buddy? There he is there. And paste, and we've got the same thing. Kind of, and by kind of, not kind of, it's done it to the block. So we've done Box Shadow. 

So Box Shadow is going to work good for boxes, text is going to work good for Text Shadow, look at that, there you go. Now I got that subtle little gradient, I'll put it up real high, So if you're watching, and that quality's not great, now put it up to 90%, you can see a real strong Drop Shadow. So box for boxes, text for text shadows. I'm going to go back to my nice little subtle Drop Shadow. Save it. What else we want to do? We can do it for--

We've done it for our A-tag, we've done it for our H1, we'll do it for our cards as well. So I'm going to do the same thing. Card1, 2, and 3, where are you, boys? There you are; cool. There's 1, and 2. I don't want to apply it to the cards, plural, or the wrapper, because it will be right around the outside. You can see, these guys all have a Drop Shadow, and it's not probably strong enough even for me. So I'm going to go through and actually push this down, left and right. So I'm going to go, maybe, I don't even know. Let's go crazy 10, and let's have a blur of 10. And hopefully if the opacity is low enough for Card1, probably the distance for this is too high. Remember, with a blur, 5 and 5, you can move on now. I'm just going to go back and forth until I'm happy with the card. 

So that white strip down the outside, you're like, "That's annoying," I've been ignoring it too. It's actually from the image that I made, yeah, I just made a bad image. So it can't be getting rid of, I have to go in and edit that JPEG. I like that one, let's do it for all of them. Copy. Cool, Drop Shadows on all these guys; looks nice. 

Now one thing I will show you though is, we've done the basics, and there are more. You need to prepare yourself for the amount of Drop Shadows you can do. So I've gone to w3schools.com/css, you can see the URL there, I'll put it in the text for your project. It's under Drop Shadows, if you want to have a look. There is some terrible stuff you can do. So it just goes through all the different syntax. You can do Drop Shadow, there's like a blur around it. Can you see, if we put 0, 0, it's kind of a blur around the outside, if you need that, might be good if you got text above an image. 

What else have we got? Multiple shadows. Look at that, you can put a comma in, and put in two shadows. They look very similar, those two colors, but anyway, you get the idea. Look at this, there's a shadow plus another shadow. You can kind of put a border around the outside. There is lots, does it get worse? I feel like it did. I remember looking at this, going-- I don't know, they're bad. So know that we've covered bits of it but not the whole thing. I like that Box Shadow. 

Not so much of a fan of that one. We'll do the Hover in a little bit. We're going to look at Pseudo Classes in an upcoming video. Not quite next though, very soon. All right, that's it, Text Shadows, Box Shadows. It goes X, Y, blur, color. That's it, I will see you in the next video.