Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Enhancing Design with CSS!
You have completed Enhancing Design with CSS!
Preview
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