Skip to content

Instantly share code, notes, and snippets.

@siraj
Forked from nrrrdcore/apple-shadow.css
Created March 2, 2017 20:48
Show Gist options
  • Save siraj/df175363e26b6e698635329512fc035d to your computer and use it in GitHub Desktop.
Save siraj/df175363e26b6e698635329512fc035d to your computer and use it in GitHub Desktop.
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment