WEBVTT

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