Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Foundations Backgrounds and Borders Box Shadows

Jason Larkin
Jason Larkin
13,970 Points

Problems with drop shadows.

.box {
   box-shadow: 10px 10px 5px 15px color(#222);

}

I'm trying to create a drop shadow in the Box shadow challenge #2. I keep changing the order of the pixel designations and I'm getting nowhere. Thanks in advance for any replies.

3 Answers

Looks like you just need to change the order and remove the parentheses and color property.

.box { 
    box-shadow: 10px 10px 15px 5px #222; 
}
Jason Larkin
Jason Larkin
13,970 Points

Thank you Dustin, that worked!

Pete England
Pete England
10,801 Points

you also have too many values, box shadows work in this order

X Offset | Y Offset | Blur Value | Colour

So theoretically you want

.box { box-shadow: 10px 10px 5px #222; }

This will offset the shadow 10px on both the X & Y Axis, with a 5px blur on the shadow

Jason Larkin
Jason Larkin
13,970 Points

Thank you Pete-good to know.

@Pete, it is actually possible to use that many values. The first values as you stated are for horizontal shadows, vertical shadows and blur.

The fourth value is for the distance you want the shadow to spread. This value is actually quite useful when you really want to control the way your shadows will look like.

Then comes the color value, and finally you can use the inset value, if you want your shadow inside instead of outside the element, which is the default behaviour.

I hope this clarify what one can do with the box-shadow property.

Jason Larkin
Jason Larkin
13,970 Points

Thank you Sebastian, that clears up a great deal. Thanks.