Box Shadows

So just like the text-shadow property, 0:00 we're also able to cast shadows off elements with the box-shadow property. 0:02 So let's see how a box-shadow will look when applied to the wildlife content 0:07 container in our design. 0:10 So, back in our style sheet, 0:12 right under the Layout Styles, let's scroll down to the wildlife rule. 0:14 And we're going to add a box-shadow property by typing box-shadow. 0:19 So the order of values for box-shadow is exactly like the order of values for 0:26 the text-shadow property, except for one optional value we'll use later. 0:31 The first value in a box-shadow sets the horizontal offset of the box-shadow. 0:36 And like with text-shadow, a positive value moves the shadow to the right, and 0:41 a negative value will move the shadow to the left. 0:45 So, let's set our horizontal offset to 15 pixels. 0:48 So again, like with text-shadow, the second value sets the vertical offset, and 0:53 a positive value will move the shadow down, 0:58 while a negative value will move the box-shadow up. 1:01 So let's set our vertical offset to 15px as well. 1:04 Then we can specify the color of the box-shadow. 1:08 This time, we're gonna use an RGBA value of black, and 1:11 we're gonna set the alpha to .8. 1:16 So just like text-shadow, if the box-shadow color is not defined, 1:20 the color rule will render the shadow according to the element's color property. 1:25 All right, so let's save our style sheet, go back to the browser, and when we 1:29 refresh the page, you can see how it renders a shadow behind the wildlife div. 1:33 And it's offset by 15 pixels to the right, and 15 pixels towards the bottom. 1:39 But as we can see, the shadow seems a little flat and lacking depth. 1:44 So let's add a blur radius value to sort of soften it up. 1:48 So just like the text-shadow property, 1:53 the optional blur value is the third length unit in the list of values. 1:55 So if we give it a blur radius value of 10px, when we save and 2:01 take a look at it again, notice how this softens up our box-shadow. 2:07 >> And there now seems to be a little more depth between the div and 2:10 the background of the page. 2:14 And notice how the box-shadow has no affect on the layout of 2:16 surrounding elements. 2:20 It doesn't push any element down or up. 2:21 Well, that's because box-shadows, like text-shadows, have no influence on layout. 2:24 The shadow could be as tall or 2:29 as wide as we want it to be, and nothing around is affected by it. 2:30 So there's one more optional box-shadow value that's extremely useful for 2:35 defining the spread distance of a box-shadow. 2:39 So the fourth length value in a box-shadow property is called the spread value, 2:42 because it moves or spreads the shadow away from an element. 2:47 And it does it equally in all directions. 2:51 So it gives us a little more control over the size of the box-shadow. 2:53 So if we want to spread our box shadow by 20 pixels in every direction, 2:57 while maintaining the 10 pixel blur radius, let's set the value to 20px. 3:02 And when we save our style sheet and refresh the page, 3:08 notice how it spreads the shadow by 20 pixels on every side of the div. 3:11 Now we can even start to see parts of the shadow on the top and 3:16 left sides of our container. 3:20 But we can also contract the box-shadow, depending on the spread value we define. 3:22 So for instance, if we go back to our box-shadow value and 3:26 change the spread value from 20 to negative 5. 3:31 When we save our style sheet and refresh the page, 3:35 notice how the shadow sort of shrinks and contracts by five pixels on each side. 3:38 Now we're only seeing the soft blur of the box-shadow. 3:43 And this can create some interesting shadow effects. 3:46 So, for example, if we go back to our box-shadow declaration, and 3:50 we change the x offset to 0. 3:54 And let's pump the blur radius up to 20px, and 3:59 change the spread value to negative 12. 4:03 When we save and refresh the browser, this sort of squeezes in the box-shadow, 4:08 and we get this subtle floating box effect at the bottom of the Wildlife div. 4:14 So finally, by default, 4:20 box-shadows are created as drop-shadows outside of an element. 4:21 But if we want to create an inner-shadow, 4:26 we can do that with a box-shadow by adding the keyword value, inset. 4:28 The inset value must be declared either first or last, in our box-shadow value. 4:33 Otherwise, the line will be ignored. 4:38 So let's go back in our box-shadow value, and 4:40 let's add the inset keyword as the first value. 4:44 And so we can really see how this works, 4:48 let's change the horizontal offset to 20px. 4:49 Let's also make the vertical offset 20px. 4:53 And we're gonna remove the spread value. 4:57 And let's make the blur value 5px. 5:00 And finally we'll pump the alpha up to 1. 5:04 So we can see the full inset shadow. 5:07 Okay, so when we save our CSS file and refresh the page, 5:11 now we're able to see that the shadow is inside the border area of the div element. 5:16 And it's offset from the top by 20 pixels, and over to the right by 20 pixels. 5:21 But what if we want our inner shadow to be even on all sides, right. 5:27 Well, we can do that by setting both offsets to zero, so let's do that. 5:32 We're going to change the vertical offset to zero, and 5:38 the horizontal offset to zero. 5:41 Then we can use the blur and spread radius values to adjust the shadow. 5:44 So, let's change the blur to 50. 5:48 So that it's really blurry, and let's widen it by ten pixels. 5:51 So we're gonna set the spread distance to 10px. 5:55 So when we save and take a look at it again, now we can see that the shadow is 6:00 inset evenly on all four sides of the div, which gives us a nice inner shadow effect. 6:04 Now, we're also able to use multiple box-shadow values, 6:10 just like we were able to do with text-shadow. 6:13 So, go ahead and play around with these values on your own to see 6:16 all the interesting effects you can create with box-shadows. 6:19