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.

  • 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
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">