Skip to content

Instantly share code, notes, and snippets.

@superplussed
Created April 27, 2013 01:29
Show Gist options
  • Save superplussed/5471510 to your computer and use it in GitHub Desktop.
Save superplussed/5471510 to your computer and use it in GitHub Desktop.
dual angled shadow (SO)
/**
* dual angled shadow (SO)
*/
body { padding: 5em; background: whitesmoke; }
.box {
width: 20em; height: 6em;
border: solid 1px #ccc;
position: relative;
background: white;
}
.box:before, .box:after {
min-height: 45%; width: 65%;
border-radius: .2em;
box-shadow: 0 0 .625em rgba(204,204,204,.4);
position: absolute;
z-index: -1;
background: rgba(204,204,204,.4);
content: '';
}
.box:before {
bottom: 0; left: .3em;
transform: rotate(-5deg);
}
.box:after {
right: .3em; bottom: 0;
transform: rotate(5deg);
}
<!-- content to be placed inside <body>…</body> -->
<div class="box"></div>
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment