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>

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

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.

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

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

@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 👍

@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. 😁

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?

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

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.