Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Enhancing the Design With CSS Box Shadows

Zachary Maldonado
Zachary Maldonado
5,895 Points
Posted by Zachary Maldonado
Zachary Maldonado
5,895 Points

why does inset work?

without putting in horizontal and vertical values? Gill leaves them at 0, but gives a blur and spread value. I don't understand how you can blur and spread something with no values. How does the browser interpret this? I understand how to use the inset value, just a little curious how it works exactly. (:

1 Answer

Dane Parchment
MOD
Dane Parchment
Treehouse Moderator 11,075 Points
Dane Parchment
Dane Parchment
Treehouse Moderator 11,075 Points

Ok let me break this down for you:

Box shadows use the following syntax within css:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color];

Now the horizontal and vertical values simply determine the position of the shadow....not the opacity of shadow itself. Basically the box shadow will by default have the box shadow directly in the same position as the element. So you put in values in the horizontal and vertical parameters in order to move the shadow to the location you want it too. By setting these values to 0 he was effectively saying:

Place the box-shadow in the same position as the box itself, to not translate it.

By increasing blur and spread he was simply blurring and spreading the shadow in the same position as the element itself.

So just remember that the shadow is already there, it already exists, you just have to move it around to see it better using the horizontal and vertical values, or blur and spread it to create other viewable effects.

Zachary Maldonado
Zachary Maldonado
5,895 Points
Zachary Maldonado
Zachary Maldonado
5,895 Points

Oh okay, I understand now. I was thinking the vertical and horizontal values themselves "create " the shadow, but you explained it really well how the shadow is already there. Thanks a lot Dane!