Bummer! This is just a preview. You need to be signed in with a Basic or Pro account to view the entire video.

Start a free Basic trial
to watch this video

Sign up for Treehouse
Advanced Box Shadows

Advanced Box Shadows

5:19

In this video, you'll learn about additional box-shadow features, such as multiple shadows and inset shadows. You'll also learn some advanced techniques, such as how to create a sunken well effect.


Video Transcript

  • 0:00

    [? music playing ?]

  • 0:02

    [Think Vitamin Membership, membership.thinkvitamin.com]

  • 0:07

    [CSS3 Borders, Advanced Box Shadows with Nick Pettit]

  • 0:13

    Now that you know the basics of the Box Shadow property,

  • 0:16

    let's take a look at some more advanced box shadow techniques.

  • 0:20

    An interesting thing about Box Shadow is that you're not limited

  • 0:23

    to a single shadow per element.

  • 0:26

    You can actually have up to six shadows per element.

  • 0:30

    Now, in order to do that, we're going to jump down to the next line

  • 0:33

    and just tab over here .

  • 0:35

    For the sake of clarity, I'm going to put my shadow

  • 0:38

    on the other side of the element.

  • 0:41

    So I'll put in some negative offsets here,

  • 0:46

    and then again, for the sake of clarity, I'll

  • 0:49

    make it a slightly different color.

  • 0:51

    I'll add in some green there.

  • 0:54

    And a very important piece to remember is that you need to have

  • 0:57

    a comma between each one of your shadows

  • 1:00

    in order for it to work.

  • 1:03

    Now let's switch over to Google Chrome.

  • 1:06

    And you can see that I've created a green shadow

  • 1:09

    on the opposite side of our element.

  • 1:12

    Now, fortunately, this also works in Firefox.

  • 1:15

    So we'll go ahead and copy our second line there,

  • 1:19

    we'll replace the semicolon with a comma,

  • 1:22

    and we'll paste in our line.

  • 1:25

    And switching over to Firefox, you can see that

  • 1:28

    we've created the same green shadow.

  • 1:30

    Pretty cool.

  • 1:32

    Now, of course, you probably won't use multiple shadows

  • 1:35

    very often, but it's nice when you need to create

  • 1:38

    flame effects or other complex shadowing.

  • 1:40

    Now there is one more bit to learn about Box Shadow.

  • 1:43

    Switching back over to our text editor,

  • 1:46

    we'll go ahead and clear out our second shadow.

  • 1:53

    And right before the first argument,

  • 1:56

    we'll go ahead and add the keyword 'inset'.

  • 1:59

    And we'll do this for Mozilla, as well.

  • 2:02

    And just so you can see things a little bit better,

  • 2:05

    we'll take off our rgba function,

  • 2:08

    and we'll set this back to a nice,

  • 2:11

    dark hexadecimal value.

  • 2:14

    Save that out, and we'll refresh our browser,

  • 2:17

    and you can see that we now have a shadow on

  • 2:20

    the inside of our element.

  • 2:23

    I'll switch over to Firefox,

  • 2:25

    and you can see that it looks exactly the same as Google Chrome.

  • 2:28

    Pretty cool.

  • 2:30

    Now, of course, to create this effect without Box Shadow would be very difficult.

  • 2:33

    You'd have to use background images and

  • 2:36

    all sorts of unnecessary markup just to get the

  • 2:39

    look that you're going for.

  • 2:41

    There is a pretty neat effect that you can create using the inset shadow.

  • 2:45

    This is one of the many settings panels in MAC OS 10,

  • 2:49

    and you can see that they have a very subtle

  • 2:52

    effect around the border here.

  • 2:55

    These are called sunken wells and they're a really nice way to

  • 2:58

    separate various pieces of content from one another.

  • 3:02

    And of course, we can create this effect using CSS3.

  • 3:05

    Now let's go ahead and switch back to our text editor.

  • 3:09

    To create this effect, we're going to keep inset,

  • 3:12

    but we're going to delete everything else.

  • 3:15

    We'll set the X offset to zero,

  • 3:18

    because if you look at the way sunken wells look in MAC OS 10,

  • 3:22

    you can see that they're the same on both sides

  • 3:25

    and we want to maintain that effect.

  • 3:27

    And we'll set the Y offset to about 2 pixels

  • 3:31

    so that will push it 2 pixels from the top,

  • 3:34

    we'll set a very small blur radius of 4 pixels,

  • 3:37

    and then we'll use the rgba function

  • 3:40

    to create a nice blunted shadow.

  • 3:43

    We'll set our shadow to black, and we'll dial down the

  • 3:46

    opacity to about 40 percent.

  • 3:49

    And we'll copy and paste this so that it also

  • 3:52

    works in Firefox.

  • 3:55

    And if we switch over to Google Chrome, you can

  • 3:58

    see that we've created a very close replica

  • 4:01

    of the system preferences panel.

  • 4:04

    Now, you will also notice that they have these

  • 4:07

    slight, rounded corners.

  • 4:09

    And using CSS3, we can create that effect, as well.

  • 4:12

    So we'll switch back to our text editor,

  • 4:15

    and we'll add a small border radius.

  • 4:18

    And so I'll type webkit-border-radius:,

  • 4:23

    and we'll give it about 5 pixels.

  • 4:27

    And we can copy and paste that to make that work in Firefox, as well.

  • 4:32

    And if we switch back to Google Chrome and refresh the browser,

  • 4:35

    you can see that we've created those very

  • 4:38

    subtle rounded corners.

  • 4:41

    And putting these two windows side-by-side, you can see

  • 4:44

    that they actually look pretty close.

  • 4:47

    Now we'll switch over to Firefox,

  • 4:50

    and it looks exactly the same.

  • 4:52

    Pretty cool, huh?

  • 4:54

    Currently, Box Shadow does not work in Internet Explorer.

  • 4:57

    Additionally, at the time of this recording, the Box Shadow

  • 5:00

    property has been removed from the CSS3 Borders and Backgrounds Module

  • 5:04

    by the W3C for further discussion.

  • 5:07

    However, not to worry.

  • 5:09

    The Box Shadow property is expected to reappear in a different

  • 5:12

    CSS3 module in the future.

  • 5:14

    [? music playing ?]

  • 5:16

    [Think VItamin Membership, membership.thinkvitamin.com]

Show full transcript

Workspace

You have to sign up for Treehouse in order to create workspaces.

Sign up

Downloads

You have to sign up for Treehouse in order to download course videos.

Sign up

Instructor

  • Nick Pettit

    Nick is a designer, public speaker, teacher at Treehouse, and co-host of The Treehouse Show. His Twitter handle is @nickrp.