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
Copy link

flipactual commented May 17, 2012

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

@nrrrdcore
Copy link
Author

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
Copy link

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
Copy link
Author

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
Copy link

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
Copy link
Author

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
Copy link

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
Copy link
Author

nrrrdcore commented May 19, 2012

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

@stevenh512
Copy link

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