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