Box Shadow

Transcript

Now that my website is complete, I'm going to teach you some expert tips and tricks so that you can step up your code game. You can give your pages the kind of 3d like feel with the box shadow property. Let me show you what I mean on my home page. I have a box shadow underneath my header. I also have a box shadow around my figure.

And the sections below my figure. See, it looks like they're kind of popping out of the page.

I'll use the header for my first example. I gave it the box shadow property. The first value controls how far the shadow sticks out to the right. If I give it a negative value, it goes to the left. I'll keep this at zero pixels because my header takes up 100% of the width of the page. This means we wouldn't be able to see a shadow on the left or right anyway.

The second value controls how far down the shadow goes. A negative value reverses the direction and makes the shadow go up.

The third value sets how blurry the shadow will be. This is really what makes it look like a shadow.

The fourth value extend the length of the shadow. Look what happens when I give it a big value.

Finally, you can give it a color but it defaults to black. I made my headers box shadow gray. Now for my figure, I gave it a box shadow of four pixels. Then six pixels. I blurred the shadow 30 pixels. And I didn't want to extend the length of the shadow so I made the fourth value zero pixels. Since I was fine with the default color black, I didn't give it a color.