Hey everyone, Guil here with a new forum tip.

Nick Rowen, one of our students had a form

question regarding the spread value in CSS box shadows.

He wanted someone to elaborate on the purpose of the

spread value and the effect it has on a box shadow.

Well Nick there is a lot of neat things

we can accomplish with the little used spread value.

So let's take a look at a few examples.

The fourth value in a box shadow property

is called the spread value because it moves or spreads the box

shadow away from an element, and it does it equally in all directions.

But we can also contract the box shadow.

Depending on the value we define, so it gives us

a little more control over the sides of a box shadow.

So let's take a look at a few ways we

can use this neat little spread value in our image here.

So here I'm

using Code Pen for the demo at codepen.io.

And again, we have an image whose source is a placeholder

from laurem pixel which generates placeholder images.

So first let's target our image and give it a box shadow, so over here

in the CSS window we will target image, then we

will write the box shadow property. And let's give it a horizontal offset

of five pixel, a vertical offset of five pixels, and a blur of eight pixels.

So, as we can see here in the Preview panel, by default, the box shadow's

size is equal to the element itself. But with the spread value, we can

actually change that.

Now, if we want to spread the box shadow by say five pixels

in every direction while maintaining that eight pixel blur right after this

eight pixel blur value we can add five pixels for this spread value.

And as we can see, the box shadow's spread out by five pixels on every side.

Now we can even start to

see parts of the shadow on the top and left sides of the image.

And if we go back to the spread value and increase it to

say ten pixels, we can really see the effects of the spread value, here.

Now there's more of a hard edge between the image and the box shadow

colour, which by default is black, or the text colour we've set.

But we can also

do the opposite of this, and soften up the shadow

by providing a negative spread value. So for instance, if I set the

spread value back to it's default size of zero.

Let's see what happens when we use a negative spread value.

So let's say, negative four pixels.

And as we can see, the box shadow contracted.

By four pixels on each side.

So we're only seeing the soft blur of the box

shadow on the right and bottom sides of the image.

Contracting box shadows this way can come in handy in a

variety of ways, so let's take a look at another example.

So we'll go back up here in our CSS window, and let's

create a new box shadow, this time with no

horizontal offset, and a vertical offset of eight pixels.

So, we only wanna shadow under the image, and when we

give it a blur value of ten pixels, we see the

image at the bottom here, but we also see parts of

the shadow on both the left and right sides of the image.

Now, we don't want

that, so let's add a negative spread value instead to contract.

So, back up here in our box shadow rule,

we'll add a spread value of negative four pixels.

And when we do that we no longer see the left and right shadows.

And we get this neat effect that makes the image

appear as if it was lifted off the page with

that nice bottom shadow.

And here's another interesting thing that happens with the spread value.

When we do not define offsets, or a blur value.

So, for instance, let's make our box

shadow have no horizontal or vertical offsets.

And we won't give it a blur value but

let's give it a spread value of four pixels.

Now when we take a look at it in the preview window,

the result looks exactly like a boarder doesn't it?

Well this leads us to our next example.

Now we probably wouldn't use this method

for adding borders to square or rectangular images.

For that it's better to use a border property.

So for instance let me just get rid of this box shadow for now.

And let's add a border of eight pixels solid.

And the colour still blue.

And as we can see that works just fine.

But, take a look at what happens when we add a border radius to the image.

And I'll exaggerate the values a bit so we can really see what's going on here.

So let's give it a border radius of ten

pixels and let's bump the border up to 20 pixels.

So when we have a border width that's larger than the

border radius value, we lose the rounded corners and the edges.

So the edges in our image become squared as we are seeing here.

Now, this is because the border radius value actually shapes the outer.

Part of a border, not the inner.

So here, the inner radius is much smaller than the outer radius.

Depending on the design you're going for, this might be fine,

but I'd like my image to have a well-defined inner radius.

So we'll need to fix this.

So what if we created the border with a

box shadow spread value instead, like we did earlier?

So let's try that out.

Back up here in our image rule, let's get rid of

the border property, and let's add a box shadow property once again.

And we'll make both offsets zero, we'll also give it a zero blur value.

And let's make the spread value 20, and we'll make the colour steel blue.

So, below in the preview, notice how the hard

edge border now follows the radius of the image.

So now both the outer and inner borders have that nice ten pixels radius.

And the great part about box shadows is that we can give

an element multiple shadows just by comma separating the set of values.

So what if we want to give our image that lower box shadow effect from earlier?

Well, we'll go back into our box shadow rule and

we'll add a comma after this first set of values.

And next, we'll add our second set of

values, so we'll give it a zero horizontal offset,

followed by a vertical offset of 30 pixels, a blur value

of ten pixels and, finally, a spread value of negative five pixels.

And there we go.

Creating rounded borders this way does come.

With a caveat.

Since box shadows are not part of an element's box model,

the four borders will overlap parts of other in-line or floated elements.

So it's something that we'll need to keep in

mind, because we'll have to compensate with extra margins.

I really hope this tip helped you out and answered your questions

regarding the spread value.

If anyone has any questions about web

design or web development, post your question

on the forum, and one of our students or staff members will help you out.

Or it just might be answered by a teacher with a video form tip.