Skip to content

Instantly share code, notes, and snippets.

@cecilemuller

cecilemuller/box-3d.css

Created July 20, 2012 19:59
Show Gist options
  • Save cecilemuller/3152876 to your computer and use it in GitHub Desktop.
Save cecilemuller/3152876 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3: 3D box effect
Raw
box-3d.css
.box-3d {
padding: 10px;
margin: 10px 5px 20px;
border-top: 1px solid #f4f4f2;
-ms-box-shadow: 0 7px 0 #BFBAAD, 0 0.5em 0 #A8A38C, 0 12px 12px #A8A38C;
-moz-box-shadow: 0 7px 0 #BFBAAD, 0 0.5em 0 #A8A38C, 0 12px 12px #A8A38C;
-o-box-shadow: 0 7px 0 #BFBAAD, 0 0.5em 0 #A8A38C, 0 12px 12px #A8A38C;
-webkit-box-shadow: 0 7px 0 #BFBAAD, 0 0.5em 0 #A8A38C, 0 12px 12px #A8A38C;
box-shadow: 0 7px 0 #BFBAAD, 0 0.5em 0 #A8A38C, 0 12px 12px #A8A38C;
-ms-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
Raw
box-3d.html
<div class="box-3d">
Cupcake ipsum dolor sit amet halvah. Lemon drops liquorice topping cotton candy.
Cupcake chupa chups liquorice jelly biscuit wafer.
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment