Preview

Start a free Courses trial
to watch this video

Box Shadows

Name: Box Shadows
Uploaded: 2014-12-08T22:46:34Z
Duration: 382 s
Description: Like text-shadow, we're able to cast shadows off elements with the box-shadow property.

6:22 with Guil Hernandez

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

Teacher's Notes
Video Transcript
Downloads

Quick Reference

The order of values for box-shadow is exactly like the order of values for the text-shadow property:

.wildlife {
    box-shadow: 15px 15px 10px 20px rgba(0, 0, 0, .8);
}

The first value sets the horizontal offset of the shadow. The second value sets the vertical offset. The last value sets the color of the box shadow.

The optional third value defines the blur radius in a box shadow. The optional fourth value defines the spread distance of a box shadow.

Inner shadows
By default, box shadows are created as drop shadows outside of the element. To create an inner shadow, we can add the keyword value inset:

.wildlife {
   box-shadow: inset 0 0 50px 10px rgba(0, 0, 0, 1);
}

Multiple values
Just like the text-shadow property you can use multiple box-shadow values separated with a comma like so:

.wildlife {
    box-shadow: 15px 15px 10px 20px rgba(0, 0, 0, .8),
                            inset 0 0 50px 10px rgba(0, 0, 0, 1);
    }

So just like the text-shadow property, 0:00

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

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

container in our design. 0:10

So, back in our style sheet, 0:12

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

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

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

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

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

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

a negative value will move the shadow to the left. 0:45

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

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

a positive value will move the shadow down, 0:58

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

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

Then we can specify the color of the box-shadow. 1:08

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

we're gonna set the alpha to .8. 1:16

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

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

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

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

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

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

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

So just like the text-shadow property, 1:53

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

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

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

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

the background of the page. 2:14

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

surrounding elements. 2:20

It doesn't push any element down or up. 2:21

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

The shadow could be as tall or 2:29

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

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

defining the spread distance of a box-shadow. 2:39

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

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

And it does it equally in all directions. 2:51

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

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

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

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

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

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

left sides of our container. 3:20

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

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

change the spread value from 20 to negative 5. 3:31

When we save our style sheet and refresh the page, 3:35

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

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

And this can create some interesting shadow effects. 3:46

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

we change the x offset to 0. 3:54

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

change the spread value to negative 12. 4:03

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

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

So finally, by default, 4:20

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

But if we want to create an inner-shadow, 4:26

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

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

Otherwise, the line will be ignored. 4:38

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

let's add the inset keyword as the first value. 4:44

And so we can really see how this works, 4:48

let's change the horizontal offset to 20px. 4:49

Let's also make the vertical offset 20px. 4:53

And we're gonna remove the spread value. 4:57

And let's make the blur value 5px. 5:00

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

So we can see the full inset shadow. 5:07

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

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

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

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

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

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

the horizontal offset to zero. 5:41

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

So, let's change the blur to 50. 5:48

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

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

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

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

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

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

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

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

You need to sign up for Treehouse in order to download course files.

CSS Basics (2014)

Box Shadows

Quick Reference