1
00:00:00,000 --> 00:00:02,220
[treehouse presents]

2
00:00:02,220 --> 00:00:05,480
[Box Shadows In CSS with Guil Hernandez]

3
00:00:05,480 --> 00:00:07,160
Hi, everyone.

4
00:00:07,160 --> 00:00:09,020
Guil here for another Treehouse CSS quick tip.

5
00:00:09,020 --> 00:00:11,310
In this quick tip, we’ll learn how to add drop shadows

6
00:00:11,310 --> 00:00:14,610
to HTML elements with the CSS box-shadow property.

7
00:00:14,610 --> 00:00:16,830
Let’s get started.

8
00:00:16,830 --> 00:00:18,400
Similar to the text-shadow property,

9
00:00:18,400 --> 00:00:20,280
we can enhance parts of our design

10
00:00:20,280 --> 00:00:24,430
by casting shadows off certain elements with the box-shadow property.

11
00:00:24,430 --> 00:00:27,250
So let’s create a basic box-shadow for our div element

12
00:00:27,250 --> 00:00:29,330
on the page with a class of box.

13
00:00:29,330 --> 00:00:33,050
In our box CSS rule, we’ll create the box-shadow declaration

14
00:00:33,050 --> 00:00:36,740
by writing "box-shadow" followed by its values.

15
00:00:36,740 --> 00:00:40,230
So let’s go over what the values mean.

16
00:00:40,230 --> 00:00:42,750
The first value is a horizontal offset.

17
00:00:42,750 --> 00:00:45,120
It can be any valid CSS length unit,

18
00:00:45,120 --> 00:00:47,520
and it can be positive or negative.

19
00:00:47,520 --> 00:00:50,140
So here we’re offsetting it by 4 pixels.

20
00:00:50,140 --> 00:00:52,900
A positive value will move the shadow to the right,

21
00:00:52,900 --> 00:00:56,080
and a negative value will move the shadow to the left.

22
00:00:56,080 --> 00:00:59,090
The second value is the vertical offset.

23
00:00:59,090 --> 00:01:03,810
Like the horizontal offset, it can be any valid length value, positive or negative.

24
00:01:03,810 --> 00:01:06,850
A positive value will move the shadow down,

25
00:01:06,850 --> 00:01:08,950
and a negative value moves the shadow up.

26
00:01:08,950 --> 00:01:11,800
So here we also made it 4 pixels.

27
00:01:11,800 --> 00:01:16,740
The third value is an optional value that sets the shadow’s