So just like the text-shadow property,

we're also able to cast shadows off elements with the box-shadow property.

So let's see how a box-shadow will look when applied to the wildlife content

container in our design.

So, back in our style sheet,

right under the Layout Styles, let's scroll down to the wildlife rule.

And we're going to add a box-shadow property by typing box-shadow.

So the order of values for box-shadow is exactly like the order of values for

the text-shadow property, except for one optional value we'll use later.

The first value in a box-shadow sets the horizontal offset of the box-shadow.

And like with text-shadow, a positive value moves the shadow to the right, and

a negative value will move the shadow to the left.

So, let's set our horizontal offset to 15 pixels.

So again, like with text-shadow, the second value sets the vertical offset, and

a positive value will move the shadow down,

while a negative value will move the box-shadow up.

So let's set our vertical offset to 15px as well.

Then we can specify the color of the box-shadow.

This time, we're gonna use an RGBA value of black, and

we're gonna set the alpha to .8.

So just like text-shadow, if the box-shadow color is not defined,

the color rule will render the shadow according to the element's color property.

All right, so let's save our style sheet, go back to the browser, and when we

refresh the page, you can see how it renders a shadow behind the wildlife div.

And it's offset by 15 pixels to the right, and 15 pixels towards the bottom.

But as we can see, the shadow seems a little flat and lacking depth.

So let's add a blur radius value to sort of soften it up.

So just like the text-shadow property,

the optional blur value is the third length unit in the list of values.

So if we give it a blur radius value of 10px, when we save and

take a look at it again, notice how this softens up our box-shadow.

>> And there now seems to be a little more depth between the div and

the background of the page.

And notice how the box-shadow has no affect on the layout of

surrounding elements.

It doesn't push any element down or up.

Well, that's because box-shadows, like text-shadows, have no influence on layout.

The shadow could be as tall or

as wide as we want it to be, and nothing around is affected by it.

So there's one more optional box-shadow value that's extremely useful for

defining the spread distance of a box-shadow.

So the fourth length value in a box-shadow property is called the spread value,

because it moves or spreads the shadow away from an element.

And it does it equally in all directions.

So it gives us a little more control over the size of the box-shadow.

So if we want to spread our box shadow by 20 pixels in every direction,

while maintaining the 10 pixel blur radius, let's set the value to 20px.

And when we save our style sheet and refresh the page,

notice how it spreads the shadow by 20 pixels on every side of the div.

Now we can even start to see parts of the shadow on the top and

left sides of our container.

But we can also contract the box-shadow, depending on the spread value we define.

So for instance, if we go back to our box-shadow value and

change the spread value from 20 to negative 5.

When we save our style sheet and refresh the page,

notice how the shadow sort of shrinks and contracts by five pixels on each side.

Now we're only seeing the soft blur of the box-shadow.

And this can create some interesting shadow effects.

So, for example, if we go back to our box-shadow declaration, and

we change the x offset to 0.

And let's pump the blur radius up to 20px, and

change the spread value to negative 12.

When we save and refresh the browser, this sort of squeezes in the box-shadow,

and we get this subtle floating box effect at the bottom of the Wildlife div.

So finally, by default,

box-shadows are created as drop-shadows outside of an element.

But if we want to create an inner-shadow,

we can do that with a box-shadow by adding the keyword value, inset.

The inset value must be declared either first or last, in our box-shadow value.

Otherwise, the line will be ignored.

So let's go back in our box-shadow value, and

let's add the inset keyword as the first value.

And so we can really see how this works,

let's change the horizontal offset to 20px.

Let's also make the vertical offset 20px.

And we're gonna remove the spread value.

And let's make the blur value 5px.

And finally we'll pump the alpha up to 1.

So we can see the full inset shadow.

Okay, so when we save our CSS file and refresh the page,

now we're able to see that the shadow is inside the border area of the div element.

And it's offset from the top by 20 pixels, and over to the right by 20 pixels.

But what if we want our inner shadow to be even on all sides, right.

Well, we can do that by setting both offsets to zero, so let's do that.

We're going to change the vertical offset to zero, and

the horizontal offset to zero.

Then we can use the blur and spread radius values to adjust the shadow.

So, let's change the blur to 50.

So that it's really blurry, and let's widen it by ten pixels.

So we're gonna set the spread distance to 10px.

So when we save and take a look at it again, now we can see that the shadow is

inset evenly on all four sides of the div, which gives us a nice inner shadow effect.

Now, we're also able to use multiple box-shadow values,

just like we were able to do with text-shadow.

So, go ahead and play around with these values on your own to see

all the interesting effects you can create with box-shadows.