1
00:00:00,000 --> 00:00:05,040
[MUSIC]

2
00:00:05,040 --> 00:00:10,080
In our previous stage, we learned
to apply shadows to text using CSS.

3
00:00:10,080 --> 00:00:16,160
It should be no surprise that CSS
offers a box-shadow property.

4
00:00:16,160 --> 00:00:22,190
That works in a similar fashion for
applying cast shadows to any CSS box.

5
00:00:22,190 --> 00:00:25,866
Looking over the CSS Tricks
article on box-shadow,

6
00:00:25,866 --> 00:00:31,679
the accepted values look almost the same
as the values belonging to text-shadow,

7
00:00:31,679 --> 00:00:36,830
with the main exception being
an optional value called spread.

8
00:00:36,830 --> 00:00:39,010
which increases the size of the shadow.

9
00:00:40,680 --> 00:00:44,736
As we style our wildlife div,
let's add a box shadow and

10
00:00:44,736 --> 00:00:47,340
see how the different values work.

11
00:01:18,234 --> 00:01:23,210
The first four declarations shouldn't
need a lot of explanation here.

12
00:01:23,210 --> 00:01:27,241
We increase the padding,
added an orange top border and

13
00:01:27,241 --> 00:01:30,080
change the text and background color.

14
00:01:31,670 --> 00:01:35,449
For the box shadow,
you'll notice I left the horizontal and

15
00:01:35,449 --> 00:01:37,830
vertical offset at zero.

16
00:01:37,830 --> 00:01:42,481
So the shadow is not to the left or
the right of the box, nor the top or

17
00:01:42,481 --> 00:01:44,908
bottom, but straight behind it.

18
00:01:49,372 --> 00:01:53,920
It's the 10 pixels of blur
that makes the shadow visible.

19
00:01:53,920 --> 00:01:58,586
We're using a bright red with 80% opacity for the shadow color.

20
00:02:01,670 --> 00:02:07,454
Now let's add a fourth length value
to increase the spread of the shadow.

21
00:02:12,531 --> 00:02:18,258
The red shadow shape is now significantly
larger than the wildlife div itself,

22
00:02:18,258 --> 00:02:20,430
which looks a little odd.

23
00:02:20,430 --> 00:02:25,342
But as I said previously, it's helpful to
create an exaggerated shadow first and

24
00:02:25,342 --> 00:02:27,490
to figure out what each value does.

25
00:02:28,500 --> 00:02:30,870
Then we can gradually make it more subtle.

26
00:02:32,840 --> 00:02:37,619
The CSS Tricks article also explains
that shadows can easily be made in

27
00:02:37,619 --> 00:02:43,200
the inner shadows, and positioned
inside the box rather than outside.

28
00:02:43,200 --> 00:02:48,098
To do that, we simply type the inset
keyword in front of the shadow's

29
00:02:48,098 --> 00:02:49,202
other values.

30
00:02:59,403 --> 00:03:04,689
Now that we've seen the box shadow in
action, let's adjust a few of the values,

31
00:03:04,689 --> 00:03:08,590
especially the color to make
the shadow less distracting.

32
00:03:15,895 --> 00:03:22,090
That's better.

33
00:03:22,090 --> 00:03:23,690
Our text is readable but

34
00:03:23,690 --> 00:03:28,980
our box containing the text has a subtle
shadow effect to add visual interest.

35
00:03:30,190 --> 00:03:35,387
The one thing we haven't done yet is fix
up our link colors, which is important

36
00:03:35,387 --> 00:03:40,060
now that our hyperlinks can no longer
be read inside the wildlife div.

37
00:03:41,290 --> 00:03:46,354
Let's start by making our links orange and
removing the default underlines.

38
00:04:03,413 --> 00:04:08,334
Make sure whenever using text-decoration: none to remove underlines

39
00:04:08,334 --> 00:04:12,920
that your link color is
distinct from your text color.

40
00:04:12,920 --> 00:04:15,494
Otherwise users won't
recognize your links.

41
00:04:19,972 --> 00:04:25,278
These links look good
on a white background,

42
00:04:25,278 --> 00:04:30,866
but they can't be read
within the dark wildlife

43
00:04:30,866 --> 00:04:38,281
div. A descendant selector will
help make those links lighter.