CSS3: shadow cube

Question

I think that in this case the images speak louder than the words.

I want to get this effect:

But the best thing I can do with CSS3:

And the code for this is absolutely terrible:

box-shadow: 1px 1px hsl(0, 0%, 27%),
            2px 2px hsl(0, 0%, 27%),
            3px 3px hsl(0, 0%, 27%),
            4px 4px hsl(0, 0%, 27%),
            5px 5px hsl(0, 0%, 27%),
            6px 6px hsl(0, 0%, 27%),
            7px 7px hsl(0, 0%, 27%),
            8px 8px hsl(0, 0%, 27%),
            ...

Is there any way to create such an effect using pure CSS3? I don't mind it being 3D, but isometric would be preferable.

I do not need to place the content on the sides of the box, just in the foreground, so I only work with one element <div>.

Here is what I still have: http://jsfiddle.net/X7xSf/3/

Any help would be appreciated!

Answer 1

, CSS... :

http://jsfiddle.net/X7xSf/12/

, , , , , ( IE8), Paul Irish 2008 (http://paulirish.com/2008/-stylesheets-vs-css-hacks-answer-none/), IE8.

Answer 2

... , , ... IE 8 ? , .

: http://jsfiddle.net/k2AdU/1

: before : after

.cube
{
    width:100px;
    height:100px;
    background:#454545;
    position:relative;
    border-right:20px solid #333;
    border-bottom:20px solid #111;
    border-right-width:0px;
    border-bottom-width:0px;
    left:20px;
    top:20px;
}
.cube:after
{
    content:"";
    display:block;
    position:absolute;
    left:0px;
    top:100%;
    border:10px solid transparent;
    border-left:10px solid white;
    border-bottom:10px solid white;
}
.cube:before
{
    content:"";
    display:block;
    position:absolute;
    top:0px;
    left:100%;
    border:10px solid transparent;
    border-top:10px solid white;
    border-right:10px solid white;
}