Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bending Shadows Backwards: Apple.com's Container CSS Sorcery
.shadow-stuff {
-moz-border-radius: 0% 0% 100% 100% / 0% 0% 8px 8px;
-webkit-border-radius: 0% 0% 100% 100% / 0% 0% 8px 8px;
border-radius: 0% 0% 100% 100% / 0% 0% 8px 8px;
-moz-box-shadow: rgba(0,0,0,.30) 0 2px 3px;
-webkit-box-shadow: rgba(0,0,0,.30) 0 2px 3px;
box-shadow: rgba(0,0,0,.30) 0 2px 3px;
}
.container {
margin: 40 0 0 0;
background-color: white;
height: 200px;
border: 1px solid #FFF;
background: #F6F6F6;
background: -webkit-gradient(linear,left top,left bottom,color-stop(50%,rgba(249, 249, 249, 1)),color- stop(100%,rgba(240, 240, 240, 1)));
background: -webkit-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
background: -moz-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
background: -o-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
background: -ms-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
background: linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0 2px 1px rgba(255,255,255,.97);
-moz-box-shadow: inset 0 2px 1px rgba(255,255,255,.97);
box-shadow: inset 0 2px 1px rgba(255,255,255,.97);
}
<div class="shadow-stuff">
<div class="container">
</div>
</div>
@flipactual

This comment has been minimized.

Copy link

@flipactual flipactual commented May 17, 2012

I like this one. Are you going for the title of Shadow Master or something?

@nrrrdcore

This comment has been minimized.

Copy link
Owner Author

@nrrrdcore nrrrdcore commented May 18, 2012

I am possibly the biggest apple.com fangirl. And I hadn't seen a shadow bent outwards with Pure CSS until it hit their homepage containers.

Apple Container Shadow

This gist is an ode to all things clean. Take that code up there and make something awesome.

@stevenh512

This comment has been minimized.

Copy link

@stevenh512 stevenh512 commented May 18, 2012

This one is nice.. not much of a designer myself but I always love seeing what people can do with CSS. 😁

@nrrrdcore

This comment has been minimized.

Copy link
Owner Author

@nrrrdcore nrrrdcore commented May 18, 2012

@stevenh512 Hats off to apple.com's front-enders, I just digested this and spit it back out. Also, you are absolutely a designer, everyone is 👍

@stevenh512

This comment has been minimized.

Copy link

@stevenh512 stevenh512 commented May 18, 2012

@nrrrdcore Yeah I guess that's true, it's not like I can't put together a decent looking HTML/CSS layout if I really need to. I've just never spent much time on it, I mostly like to hack on backend Rails code.

Something like this would be awesome as a Compass (or pure SASS) mixin, though. 😁

@nrrrdcore

This comment has been minimized.

Copy link
Owner Author

@nrrrdcore nrrrdcore commented May 18, 2012

That's awesome.

I go back and forth with writing mixins for these gists but I almost always end up going with what's more accessible to everyone. Hoping for some sassy forks.

Know a funnel, amirite?

@stevenh512

This comment has been minimized.

Copy link

@stevenh512 stevenh512 commented May 18, 2012

Wasn't too hard to turn this into SASS using Compass mixins, here's my fork. I'll probably take a look at your other gists later, I like to have little snippets like this as mixins that I can just drop into a project without having to think about it too much lol

@nrrrdcore

This comment has been minimized.

Copy link
Owner Author

@nrrrdcore nrrrdcore commented May 19, 2012

This is awesome @stevenh512! Thanks so much for forking le gist, keep rockin it!

@stevenh512

This comment has been minimized.

Copy link

@stevenh512 stevenh512 commented May 19, 2012

Refactored my SCSS version a bit, thanks to @shpoonj for commenting on it and reminding me I wasn't done, it's a bit more configurable and reusable.

Now to finish fixing a Diaspora bug I started working on earlier before I had to run out and fix a friend's car (simple fix, but I want to write a test for it), then back to having fun with Compass.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment