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

General Discussion

Spike Deng
Spike Deng
12,833 Points
Posted by 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
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)
Ian Lunn
Ian Lunn
4,558 Points
Ian Lunn
Ian Lunn
4,558 Points

See this codepen.

Spike Deng
Spike Deng
12,833 Points
Spike Deng
Spike Deng
12,833 Points

very nice! Tks a lot!