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

Box-shadows

I'm wondering, how can I create a shadow just like on this site (appears when hovering on articles). So i just need box-shadow propery, nothing more.

http://www.ultranoir.com/en/#!/blog/home/

I used box-shadow: 10px 10px 0 black, but how can i create this sharp edges of shadow? Mine turns to be totaly rectange.

2 Answers

Hey Milan Milosevic,

You have the right idea, but to create a similar effect you need to specify multiple box-shadow values that gradually grow larger. To create multiple values you just need separate them with comas like so: box-shadow: 1px 1px #000, 2px 2px #000, 3px 3px #000, and so on.

Here's a Codepen I threw together real quick.

.shadow {
  box-shadow: 1px 1px #000,
              2px 2px #000,
              3px 3px #000,
              4px 4px #000,
              5px 5px #000;
}
Kevin Korte
Kevin Korte
28,109 Points

For a CSS only approach, I like this idea better than my own.

Kevin Korte
Kevin Korte
28,109 Points

They are using a background image, a GIF actually to create the background shadow. This could be a good use case for a SVG. It'll scale well, is resolution independent, and can get you this shape.

The shape of this shadow is not natural to a CSS box-shadow, so it'll constantly be a struggle.

I created an all CSS attempt at it, found here: http://codepen.io/kevink/pen/KwLmPa

Problem is it isn't terribly elegant, and I'm afraid it could be a very fragile solution in a responsive environment. It'd probably use a SVG in this case.

Was just about to say the exact same thing. I'll bet it's pretty easy to accomplish that particular shape in CSS3 using some 3D transforms, but probably not all that practical.