Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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 upRelated 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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up