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 Silver trial
to watch this video

Sign up for Treehouse
Basic Box Shadows

Basic Box Shadows

5:52

This video will teach you how the box-shadow property in CSS3 allows you to put drop shadows around your elements. A drop shadow effect on a dynamically sized element can be tricky to pull off, but box-shadow can do it with just a single line of code.


Video Transcript

  • 0:00

    [?upbeat music?]

  • 0:03

    [Think Vitamin Membership] [??]

  • 0:07

    [CSS3 Borders - Basic Box Shadows - with Nick Pettit] [??]

  • 0:13

    Box shadow is a new CSS3 property that allows you to put drop shadows

  • 0:17

    behind your page elements.

  • 0:19

    If you've ever tried to create this effect before without the use of box shadow,

  • 0:23

    you know just how unnecessarily difficult it can be.

  • 0:27

    Box shadow aims to make it a whole lot easier.

  • 0:29

    Let's check it out.

  • 0:31

    Here you can see I've created a basic page for us to work with.

  • 0:34

    There is a div in the center of the page

  • 0:37

    that we'll be applying our box shadow to.

  • 0:40

    Switching over to my text editor, you can see that the markup is also pretty standard stuff.

  • 0:45

    There's a wrapper div, and there's the div right in the center of the page.

  • 0:50

    I've also applied some basic styling just to bootstrap the page

  • 0:54

    and make it a little bit prettier for us to look at.

  • 0:57

    We are going to be working in a separate style sheet just for the sake of clarity.

  • 1:03

    First I'm going to select my div,

  • 1:06

    and then I'm just going to apply a basic box shadow,

  • 1:09

    and then after it's been applied I'll step through it one piece at a time with you.

  • 1:14

    So we'll type WebKit box shadow,

  • 1:20

    and I'll set the X offset, Y offset,

  • 1:23

    and we'll apply color.

  • 1:28

    And we'll switch back to Google Chrome,

  • 1:30

    and you can see that a very rough shadow has been applied.

  • 1:36

    We can also do this in Firefox just by using the same syntax

  • 1:41

    and switching the browser prefix from WebKit to Mozilla.

  • 1:47

    You can see that this works in Firefox as well.

  • 1:50

    Pretty cool.

  • 1:52

    The first thing you probably notice are the browser prefixes, WebKit and Moz.

  • 1:57

    That's just there so that should the W3C decide to change the box shadow property

  • 2:02

    in the final specification, that we don't have compatibility problems down the road.

  • 2:07

    The first two parts of box shadow are the X offset and the Y offset.

  • 2:13

    In this case I've set them both to 10 pixels,

  • 2:16

    but you can also use ems as your unit of measurement.

  • 2:19

    However, you cannot use percentages.

  • 2:22

    Each one of these values measures from the upper left-hand corner of the element,

  • 2:26

    and the higher the number, the greater the offset will be.

  • 2:31

    You can also apply negative values to each one of these,

  • 2:35

    and I'll show you what that looks like in Google Chrome.

  • 2:39

    Just by applying a negative value, you can see that the shadow

  • 2:43

    has been flipped over to the upper left-hand side.

  • 2:46

    Now, what we've done so far is pretty interesting,

  • 2:48

    but it doesn't look very realistic.

  • 2:50

    We can add some realism by adjusting the blur radius and the opacity.

  • 2:55

    The first value is always the X offset.

  • 2:58

    The second value is always the Y offset.

  • 3:01

    But the third value is optional, and if you leave it blank,

  • 3:05

    there will be no blur radius.

  • 3:07

    However, if we were to add a value like 10 pixels here, for example,

  • 3:13

    we could switch back to our browser and see that the shadow has been blurred slightly.

  • 3:19

    Of course the higher the value for the blur radius,

  • 3:22

    the fuzzier the shadow will end up looking.

  • 3:26

    This also works in Firefox.

  • 3:30

    [clicking]

  • 3:32

    Next up is the color of the shadow.

  • 3:35

    In this case I've set it to a hexadecimal value,

  • 3:38

    and I've set the color to black,

  • 3:41

    but this can actually be any color that you want.

  • 3:45

    We could use a solid color like normal,

  • 3:48

    but CSS3 introduces several new color models.

  • 3:52

    The RGBa color model allows for more subtle effects,

  • 3:56

    so let's give that a try.

  • 3:58

    RGBa is a function just like the URL function,

  • 4:03

    so you type RGBa and then you put parentheses right after that.

  • 4:08

    The RGBa function accepts four values.

  • 4:11

    There's the red value, the green value, the blue value, and finally, an alpha value.

  • 4:20

    The first three values are numbered between 0 and 255.

  • 4:26

    In this case I've set them all to be 0.

  • 4:29

    But the alpha value is a bit different.

  • 4:32

    Alpha has to be a number between 0 and 1.

  • 4:36

    We probably don't want our shadow to be 100% opaque,

  • 4:41

    so we'll take the alpha value down a little bit from 1 and we'll try 0.8.

  • 4:48

    Switching over to Google Chrome, you can see that the shadow

  • 4:52

    has lightened up a little bit, and when it's against patterned backgrounds

  • 4:57

    or other solid colors, this allows the shadow to blend in with the background,

  • 5:01

    and it makes it look a lot more realistic.

  • 5:04

    Just to show you some of the other things that you can do with the RGBa function,

  • 5:09

    we'll add in a little bit of blue,

  • 5:14

    and we'll dial down the opacity a little bit more.

  • 5:19

    Switching back to Google Chrome, you can see that our shadow

  • 5:23

    now has a slightly blue hue to it.

  • 5:28

    Of course this also works in Firefox,

  • 5:32

    so I'll just go ahead and copy and paste here

  • 5:34

    and change the browser prefix to Mozilla.

  • 5:39

    Switching over to Firefox, you can see that our shadow is also slightly blue in Firefox.

  • 5:45

    Pretty cool.

  • 5:47

    [?upbeat music?] [Think Vitamin Membership]

  • 5:50

    [??]

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.