CSS3: куб с тенью - PullRequest
Новая
       14

CSS3: куб с тенью

5 голосов
/ 01 ноября 2011

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

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

enter image description here

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

enter image description here

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

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/

Любая помощь будет принята с благодарностью!

Ответы [ 2 ]

10 голосов
/ 01 ноября 2011

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

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

Если бы я хотел использовать это в производстве, я бывероятно, определите, какие браузеры поддерживают до и после, но не преобразовывают (только IE8), затем используйте метод Пола Ирриша с 2008 года (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/), чтобы отключить это для IE8.

4 голосов
/ 01 ноября 2011

Ну ... Моя идея состояла в том, чтобы использовать граничные хаки и некоторые маскировки, чтобы заставить его работать в ... IE 8 по крайней мере? Но я не могу понять, как заставить границу анимировать задом наперед. Исправлено.

Вы можете увидеть мою идею здесь: http://jsfiddle.net/k2AdU/1

и концепцию кодаиспользовать: до и: после, чтобы создать маску для углов 

.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;
}
...