Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Enhancing Design with CSS

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Box Shadows

4:49 with Anwar Montasir

In our previous stage, we learned to apply shadows to text using CSS. It should be no surprise that CSS offers a box-shadow property that works in a similar fashion for applying cast shadows to any CSS box.

Further reading

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [MUSIC] 0:00
    In our previous stage, we learned to apply shadows to text using CSS. 0:05
    It should be no surprise that CSS offers a box-shadow property. 0:10
    That works in a similar fashion for applying cast shadows to any CSS box. 0:16
    Looking over the CSS Tricks article on box-shadow, 0:22
    the accepted values look almost the same as the values belonging to text-shadow, 0:25
    with the main exception being an optional value called spread. 0:31
    which increases the size of the shadow. 0:36
    As we style our wildlife div, let's add a box shadow and 0:40
    see how the different values work. 0:44
    The first four declarations shouldn't need a lot of explanation here. 1:18
    We increase the padding, added an orange top border and 1:23
    change the text and background color. 1:27
    For the box shadow, you'll notice I left the horizontal and 1:31
    vertical offset at zero. 1:35
    So the shadow is not to the left or the right of the box, nor the top or 1:37
    bottom, but straight behind it. 1:42
    It's the 10 pixels of blur that makes the shadow visible. 1:49
    We're using a bright red with 80% opacity for the shadow color. 1:53
    Now let's add a fourth length value to increase the spread of the shadow. 2:01
    The red shadow shape is now significantly larger than the wildlife div itself, 2:12
    which looks a little odd. 2:18
    But as I said previously, it's helpful to create an exaggerated shadow first and 2:20
    to figure out what each value does. 2:25
    Then we can gradually make it more subtle. 2:28
    The CSS Tricks article also explains that shadows can easily be made in 2:32
    the inner shadows, and positioned inside the box rather than outside. 2:37
    To do that, we simply type the inset keyword in front of the shadow's 2:43
    other values. 2:48
    Now that we've seen the box shadow in action, let's adjust a few of the values, 2:59
    especially the color to make the shadow less distracting. 3:04
    That's better. 3:15
    Our text is readable but 3:22
    our box containing the text has a subtle shadow effect to add visual interest. 3:23
    The one thing we haven't done yet is fix up our link colors, which is important 3:30
    now that our hyperlinks can no longer be read inside the wildlife div. 3:35
    Let's start by making our links orange and removing the default underlines. 3:41
    Make sure whenever using text-decoration: none to remove underlines 4:03
    that your link color is distinct from your text color. 4:08
    Otherwise users won't recognize your links. 4:12
    These links look good on a white background, 4:19
    but they can't be read within the dark wildlife 4:25
    div. A descendant selector will help make those links lighter. 4:30

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

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up