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

Posted by Milan Milosevic
Milan Milosevic
6,647 Points

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

tootiemcflow
tootiemcflow
5,601 Points

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,148 Points
Kevin Korte
Kevin Korte
28,148 Points

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

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 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.

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

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.