CSS3: куб с тенью

Question

Я думаю, что изображения говорят громче, чем слова в этом случае.

Я хочу получить этот эффект:

Но лучшее, что я могу сделать с помощью CSS3, это:

И код для этого абсолютно ужасен:

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%),
            ...

Есть ли способ, которым я могу создать такой эффект с чистым CSS3? Я не против, чтобы это было 3D, но изометрия была бы предпочтительнее.

Мне не нужно размещать содержимое на боковых сторонах коробки, только на передней панели, поэтому я работаю только с одним <div> элемент.

Вот что у меня есть: http://jsfiddle.net/X7xSf/3/

Любая помощь будет оценена!

Answer 1

Я бы использовал некоторые косые преобразования для некоторых сгенерированных элементов CSS... Взгляните на это:

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

Если бы я хотел использовать это в работе, я бы, вероятно, определил, какие браузеры поддерживают до и после, но не преобразовывает (только IE8), а затем использовал бы метод Пола Ирриша с 2008 года (http://paulirish.com/2008/conditional-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;
}