Blog

CSS 3D Box Shadows

Posted by Kim Ronemus on Nov 1, 2011 in Uncategorized | No Comments

CSS 3 Buttons Version 1

Using a combination of CSS properties and pseudo elements, you can create a 3-dimensional look to any element. There are a few ways to get this done, depending on your target browser the effect may or may not be successful. Below are two versions of the same result, which is an extruded box, giving a three-dimensional look. The object was to have 2 sides with varying shades to produce a true 3-d look.

The HTML:

<div class="image">
<img src="/images/my_img.png" />
</div>

A simple image with a wrapping div. The div has a single class name cleverly named “image”.

The CSS:

.image img {
display: block;
-moz-box-shadow: 10px 10px 0 black;
-webkit-box-shadow: 10px 10px 0 black;
box-shadow: 10px 10px 0 black;
}

.image:before {
content:”“;
display: block;
width: 0;
height: 0;
background-color:transparent;
position:absolute;
margin-left: -10px;
border-top:10px solid transparent;
border-right:10px solid black;
border-bottom:10px solid black;
border-left:10px solid transparent;
}

.image:after {
content:”“;
display: block;
width:0;
height:0;
position: absolute;
left: 140px;
bottom: 50px;
border-top:10px solid black;
border-right:10px solid transparent;
border-bottom:10px solid transparent;
border-left:10px solid black;
}

Using CSS :before & :after pseudo elements, we can add content without adding markup. Here we simply create positioned squares. The trick to getting corners is using border properties to generate a triangle.