CSS Box Shadows

[treehouse presents] 0:00 [Box Shadows In CSS with Guil Hernandez] 0:02 Hi, everyone. 0:05 Guil here for another Treehouse CSS quick tip. 0:07 In this quick tip, we’ll learn how to add drop shadows 0:09 to HTML elements with the CSS box-shadow property. 0:11 Let’s get started. 0:14 Similar to the text-shadow property, 0:16 we can enhance parts of our design 0:18 by casting shadows off certain elements with the box-shadow property. 0:20 So let’s create a basic box-shadow for our div element 0:24 on the page with a class of box. 0:27 In our box CSS rule, we’ll create the box-shadow declaration 0:29 by writing "box-shadow" followed by its values. 0:33 So let’s go over what the values mean. 0:36 The first value is a horizontal offset. 0:40 It can be any valid CSS length unit, 0:42 and it can be positive or negative. 0:45 So here we’re offsetting it by 4 pixels. 0:47 A positive value will move the shadow to the right, 0:50 and a negative value will move the shadow to the left. 0:52 The second value is the vertical offset. 0:56 Like the horizontal offset, it can be any valid length value, positive or negative. 0:59 A positive value will move the shadow down, 1:03 and a negative value moves the shadow up. 1:06 So here we also made it 4 pixels. 1:08 The third value is an optional value that sets the shadow’s 1:11

You need to sign up for Treehouse in order to set up Workspace

Sign up