Forum Tip #13: CSS Box Shadows – Spread Value

Hey everyone, Guil here with a new forum tip. 0:00 Nick Rowen, one of our students had a form 0:03 question regarding the spread value in CSS box shadows. 0:05 He wanted someone to elaborate on the purpose of the 0:09 spread value and the effect it has on a box shadow. 0:12 Well Nick there is a lot of neat things 0:16 we can accomplish with the little used spread value. 0:17 So let's take a look at a few examples. 0:21 The fourth value in a box shadow property 0:23 is called the spread value because it moves or spreads the box 0:25 shadow away from an element, and it does it equally in all directions. 0:30 But we can also contract the box shadow. 0:34 Depending on the value we define, so it gives us 0:37 a little more control over the sides of a box shadow. 0:40 So let's take a look at a few ways we 0:44 can use this neat little spread value in our image here. 0:46 So here I'm 0:50 using Code Pen for the demo at codepen.io. 0:50 And again, we have an image whose source is a placeholder 0:56 from laurem pixel which generates placeholder images. 1:01 So first let's target our image and give it a box shadow, so over here 1:05 in the CSS window we will target image, then we 1:10 will write the box shadow property. And let's give it a horizontal offset 1:15 of five pixel, a vertical offset of five pixels, and a blur of eight pixels. 1:21 So, as we can see here in the Preview panel, by default, the box shadow's 1:28 size is equal to the element itself. But with the spread value, we can 1:34 actually change that. 1:40 Now, if we want to spread the box shadow by say five pixels 1:41 in every direction while maintaining that eight pixel blur right after this 1:47 eight pixel blur value we can add five pixels for this spread value. 1:52 And as we can see, the box shadow's spread out by five pixels on every side. 1:58 Now we can even start to 2:04 see parts of the shadow on the top and left sides of the image. 2:05 And if we go back to the spread value and increase it to 2:10 say ten pixels, we can really see the effects of the spread value, here. 2:13 Now there's more of a hard edge between the image and the box shadow 2:19 colour, which by default is black, or the text colour we've set. 2:24 But we can also 2:29 do the opposite of this, and soften up the shadow 2:30 by providing a negative spread value. So for instance, if I set the 2:36 spread value back to it's default size of zero. 2:41 Let's see what happens when we use a negative spread value. 2:47 So let's say, negative four pixels. 2:52 And as we can see, the box shadow contracted. 2:56 By four pixels on each side. 2:59 So we're only seeing the soft blur of the box 3:02 shadow on the right and bottom sides of the image. 3:06 Contracting box shadows this way can come in handy in a 3:11 variety of ways, so let's take a look at another example. 3:14 So we'll go back up here in our CSS window, and let's 3:18 create a new box shadow, this time with no 3:21 horizontal offset, and a vertical offset of eight pixels. 3:25 So, we only wanna shadow under the image, and when we 3:31 give it a blur value of ten pixels, we see the 3:34 image at the bottom here, but we also see parts of 3:38 the shadow on both the left and right sides of the image. 3:40 Now, we don't want 3:46 that, so let's add a negative spread value instead to contract. 3:46 So, back up here in our box shadow rule, 3:53 we'll add a spread value of negative four pixels. 3:55 And when we do that we no longer see the left and right shadows. 4:00 And we get this neat effect that makes the image 4:05 appear as if it was lifted off the page with 4:08 that nice bottom shadow. 4:12 And here's another interesting thing that happens with the spread value. 4:14 When we do not define offsets, or a blur value. 4:18 So, for instance, let's make our box 4:21 shadow have no horizontal or vertical offsets. 4:24 And we won't give it a blur value but 4:28 let's give it a spread value of four pixels. 4:31 Now when we take a look at it in the preview window, 4:35 the result looks exactly like a boarder doesn't it? 4:37 Well this leads us to our next example. 4:41 Now we probably wouldn't use this method 4:45 for adding borders to square or rectangular images. 4:47 For that it's better to use a border property. 4:51 So for instance let me just get rid of this box shadow for now. 4:53 And let's add a border of eight pixels solid. 4:57 And the colour still blue. 5:00 And as we can see that works just fine. 5:03 But, take a look at what happens when we add a border radius to the image. 5:06 And I'll exaggerate the values a bit so we can really see what's going on here. 5:11 So let's give it a border radius of ten 5:15 pixels and let's bump the border up to 20 pixels. 5:18 So when we have a border width that's larger than the 5:26 border radius value, we lose the rounded corners and the edges. 5:30 So the edges in our image become squared as we are seeing here. 5:34 Now, this is because the border radius value actually shapes the outer. 5:38 Part of a border, not the inner. 5:44 So here, the inner radius is much smaller than the outer radius. 5:47 Depending on the design you're going for, this might be fine, 5:52 but I'd like my image to have a well-defined inner radius. 5:55 So we'll need to fix this. 6:00 So what if we created the border with a 6:02 box shadow spread value instead, like we did earlier? 6:05 So let's try that out. 6:09 Back up here in our image rule, let's get rid of 6:10 the border property, and let's add a box shadow property once again. 6:13 And we'll make both offsets zero, we'll also give it a zero blur value. 6:18 And let's make the spread value 20, and we'll make the colour steel blue. 6:25 So, below in the preview, notice how the hard 6:31 edge border now follows the radius of the image. 6:34 So now both the outer and inner borders have that nice ten pixels radius. 6:38 And the great part about box shadows is that we can give 6:45 an element multiple shadows just by comma separating the set of values. 6:48 So what if we want to give our image that lower box shadow effect from earlier? 6:53 Well, we'll go back into our box shadow rule and 6:58 we'll add a comma after this first set of values. 7:02 And next, we'll add our second set of 7:05 values, so we'll give it a zero horizontal offset, 7:07 followed by a vertical offset of 30 pixels, a blur value 7:11 of ten pixels and, finally, a spread value of negative five pixels. 7:15 And there we go. 7:20 Creating rounded borders this way does come. 7:23 With a caveat. 7:27 Since box shadows are not part of an element's box model, 7:28 the four borders will overlap parts of other in-line or floated elements. 7:32 So it's something that we'll need to keep in 7:38 mind, because we'll have to compensate with extra margins. 7:40 I really hope this tip helped you out and answered your questions 7:46 regarding the spread value. 7:49 If anyone has any questions about web 7:51 design or web development, post your question 7:53 on the forum, and one of our students or staff members will help you out. 7:55 Or it just might be answered by a teacher with a video form tip. 7:59

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

Sign up