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.

General Discussion

Spike Deng
Spike Deng
12,833 Points

Someone knows how to achieve this special shadow on apple.com?

I've been digging in the css style which apple.com adopts. But I couldn't figure out how they do that box shadow style. If you access on apple.com, you can see four promo boxes at the bottom. the shadow of each box is not common. I found the tricky curvy shadow on the background, but I couldn't find which line in the css file quotes this curvy shadow image. Anyone can help? Or looking forward there's some cause coming out about it?

3 Answers

Ian Lunn
Ian Lunn
4,558 Points

It's a combination of two properties that create the curved shadow. Firstly, a basic shadow:

box-shadow: 0 8px 3px -5px rgba(0,0,0,.2);

Then the curve is achieved by applying a curved border, like so:

border-radius: 100% / 33px;

As there is no border, only the shadow is manipulated by changing border-radius.

All applied via this selector:

.promos ul li .curve-down:nth-child(1n)
Spike Deng
Spike Deng
12,833 Points

very nice! Tks a lot!