Bending Shadows Backwards: Apple.com's Container CSS Sorcery

apple-shadow.css

.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);
}

apple-shadow.html

<div class="shadow-stuff">
 <div class="container">
 </div>
</div>

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

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.