Skip to content

Instantly share code, notes, and snippets.

@weiland
Created May 5, 2012 11:38
Show Gist options
  • Save weiland/2601744 to your computer and use it in GitHub Desktop.
Save weiland/2601744 to your computer and use it in GitHub Desktop.
Shadows without images like a css3 freak
/**
* Shadows without images like a css3 freak
*/
body {
margin: 0;
padding: 0;
background: #EEE;
color: #222;
font-family: Verdana;
}
header {
width: 700px;
margin: 10px auto 60px;
border: 4px solid #FFF;
padding: 10px;
background: #FCFCFC;
height: 200px;
position: relative;
}
header:before, header:after {
position: absolute;
width: 40%;
height: 55%;
z-index: -1;
bottom: 20px;
content: '';
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4)
}
header:after {
right: 30px;
transform: skew(15deg) rotate(6deg);
-webkit-transform: skew(15deg) rotate(6deg);
-moz-transform: skew(15deg) rotate(6deg);
}
header:before {
left: 30px;
transform: skew(-15deg) rotate(-6deg);
-webkit-transform: skew(-15deg) rotate(-6deg);
-moz-transform: skew(-15deg) rotate(-6deg);
}
<header>
Preview
</header>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment