Building A Shadow Box Using Only CSS

Last week I showed you how to create a custom rollover only using one image. Today, I am going to show you how to create a shadow box for content without using any images. The human eye naturally blends like colors together, so using that now, we will create an optical illusion. This will make the box look like it is floating about the actual site. Let’s begin.

We start by building our CSS:

This section details the basic settings of our box. The 3 pixels right and top will be the starting point of the shading.

#shadeCon {
width: 520px;
position: relative;
right: 3px;
top: 3px;
margin-right: 3px;
margin-bottom: 3px;
}

The next section we create is how each of the next part of the shading reacts. Notice how our right and top pixels are -1. For each new box we create, the shading will move exactly one pixel down and to the right.

#shadeCon .second,
#shadeCon .third,
#shadeCon .box {
position: relative;
right: -1px;
top: -1px;
}

The first, second, third sections here simply contain the colors we are going to use. Any color can be used for this, but let’s stick with a gray tone for now.

#shadeCon .first {
background: #F1F0F1;
}
#shadeCon .second {
background: #DBDADB;
}
#shadeCon .third {
background: #B8B6B8;
}

The last bit of code we create is the actual content container. This section can house any html you want or need to use. In this instance, I am going to use the final image from my photoshop tutorial from this week to give you an idea of how the code works.

#shadeCon .box {
background: #ffffff;
border: 1px solid #848284;
padding: 10px;
}

Now that we have finished our CSS, let’s create the html that will use the CSS we just created.

See how we house each section of the shading starting with the parent container, then each following child and lastly the content container.

<div id="shadeCon">
<div class="first">
<div class="second">
<div class="third">
<div class="box"><img src="http://www.ps-tutor.com/tutorials/Ocean/FinalSmall.jpg" width="" /></div>
</div>
</div>
</div>
</div>
</div>

Finally, let’s see how it looks to the end user.

#shadeCon {width: 520px;position: relative;right: 3px;top: 3px;margin-right: 3px;margin-bottom: 3px;}
#shadeCon .second,#shadeCon .third,#shadeCon .box {position: relative;right: -1px;top: -1px;}
#shadeCon .first {background: #F1F0F1;}
#shadeCon .second {background: #DBDADB;}
#shadeCon .third {background: #B8B6B8;}
#shadeCon .box {background: #ffffff;border: 1px solid #848284;padding: 10px;}

Leave a comment