Advanced Search

Return to Snippet

Revision: 16057
at July 24, 2009 12:13 by myrebel420
Initial Code 
<style>   
.threed{   
  display: block;   
  background-color: black;   
  background: url(images/top_right.gif) no-repeat top right;   
  content: url(images/top_left.gif);   
}
Initial URL 
http://www.code-sucks.com/code/css/template.php?tutorial=three_d_box.php
Initial Description 
In this tutorial we are going to use the :before pseudo-element to create a 3D style box. This effect will not work in Internet Explorer since it does not support the :before attribute. IE users will only see the element's themselves, and nothing else. 

First thing we need to do is create two images that we are going to be using, they should look like the following: 
  

These images will give us the slanted look to make the element look as if it has depth. As stated in the tutorial about pseudo-elements, the :before attribute will add code, images, or whatever the attribute is set to before an element. In our case we be adding two images before the actual element. Here is how we are going to add these elements. 

First thing we have to do is make the area before the element visible. We are doing this with the display attribute. We all need to set the background color to the same color as our image. In our case this will be black. If you want to make the box look more life like, then you should choose a few shades darker then the actual color of the element's background. We then set a background image that starts at the top right hand corner. This image is told not to repeat, so it will only appear once. Then we add an additional image using the content attribute. This just adds the second image to the area before the tag. That is all that we need, just the four lines of code and we have a three dimensional look on the element. If you use the :after, you can make the element seem as it is being viewed from below rather then the top. You will also need to create the images to make this effect look correct.
Initial Title 
Three-Dimensional Box
Initial Tags 
css
Initial Language 
CSS