Video Summary

In this lesson we’re about to learn about the basic box shadow property. And before I get in, we start playing with this property, I just want to explain what we have going on with the code. So right here, I just have a simple p tag with a little paragraph here. I put a class here and label that basic. And I’m calling to that CSS property over here, using using the basic class for that I just pretty much copy and paste that over here. And what I have right here is I have a border of one pixel solid black when we are using a box shadow, it is best to have a border of some kind to make that effective look, to really give it the effect that it needs. And I’m going to show you why. So if we take this border off, we got Chateau borrow box Chateau here, but it doesn’t really look like anything. It just looks like we’ve just kind of outlined basically what this looks like if we put aboard a thick border at the bottom and a thick border at the right. So instead, we want to have a border all the way around. And so we have that levitating effect. I put in padding so that way we could get a little bit of spacing between the border and the paragraph. I’ve made the width 50 so that way it’s not taking up the full screen and we can really play around with this effect. 

We made the margins as 30 so we can, you know, get a little bit of spacing from the top and the left side. So let’s just hop into the box shadow and the values here and what we’re looking at as we got the five pixels, 10 pixels, and a color. And what I want to specify here is that this five-pixel is what we’re talking about. If it’s positive, we’re talking about it moving to the right and if it’s negative, we’re talking about moving to the left in that increment. So if it’s five pixels and moves five pixels to the right, if it’s negative moves at five pixels to the left, so if we come here and put a negative, we just moved the shadow over here. And when we’re thinking about the shadow, think of it like if you have a light you’re trying to light on something or you’re out. If you’re outside and you’re thinking about the sun cast and a shadow. What we’re setting up here is is that the sun might where my cursor is, that might be over here, right? But now if I put this as a negative, the sun might be over here. And the same thing works with this, the 10 pixels, a second unit of measurement. 

And what we want to do here is, is that if it’s positive, it goes to the bottom and if it’s negative, it goes to the top. Right. So more times than not you’re going to want to have your shadow property at the bottom or the left or the right depending on how you are styling. 

Time but for the most part, this is just the intro into this box effect. You might be able to utilize this maybe if you want to have just a little, maybe a little shadow effect right here. Just something just to add a little bit more pizzazz to it. But before we hop into the next box shadow effect and talk about the blur, where we’re going to be able to wear this a little bit and make it look more like an actual shadow. 

I do want to say that you might be thinking that well if I do a blur or instead of using the blur effect, which we’re going to talk about in the next lesson. Maybe I can do an RG RGB color. And let’s just say if it was I’m just going to make this up 100 100 100 All right. So now we have that fact but now what happens if we you know, make it a transparent color? So let’s just put in point four. 

Now, even though it’s a fairly transparent color, there’s nothing behind there to give it transparency. So basically what we just did is we made a very dark gray into a lighter gray, and we’re still not seeing that blur. So I just wanted to point that out before we got into the next lesson, and we started talking about the blur effects so let’s talk, let’s head over there, the server the slides and talk about the next blur effect for the box shadow.