Box-shadow или как сделать разные тени у одного блока div?

Question

[Игорь Пушкарский]

Приветствую ХабраГуру!


Есть такая вот картинка, как видно блок вертикального меню имеет 2 разных внутренних тени сверху и справа, вопрос таков:


Как решить проблемы не плодя дополнительных блоков? Вставлять картинкой как фон не вариант, макет резиновый. И вообще как решать такие проблемы, чтобы тень поддерживала хотябы IE8+?

Answer 1

[Softlink]

Похоже?

Comments

[Игорь Пушкарский]

Спасиб +1

[Игорь Пушкарский]

Но как тоже самое сделать для IE?

[Softlink]

PIE? Хотя я обычно забиваю на тени там, где они не поддерживаются.

[Игорь Пушкарский]

Я бы тоже не стал но там меню с круглыми блоками с использованием border-radius =)
Все бы хорошо только вот почему то он не работает или я что то не так делаю, или просто ietester не работает нормально?

подключаю так

.side-left-work{
    float: left;
    width: 215px;
    margin-left: -100%;
    position: relative;
    height: 670px;
    background: #f6f6f6;
    box-shadow: inset -8px 8px 25px -12px rgba(0,0,0,0.5), inset 0 6px 4px -5px rgba(0,0,0,0.5);
        -webkit-box-shadow:  inset -8px 8px 25px -12px rgba(0,0,0,0.5), inset 0 6px 4px -5px rgba(0,0,0,0.5);
        -moz-box-shadow:  inset -8px 8px 25px -12px rgba(0,0,0,0.5), inset 0 6px 4px -5px rgba(0,0,0,0.5);
   behavior: url(pie/PIE.htc);
    
}

папка pie лежит прямо в каталоге с index.html, указывать путь в кавычках тоже пробовал.

Может есть какой — то другой вариант испробовать работоспособность при отсутствие ie7-ie8?

Answer 2

[Игорь Пушкарский]

Вариант с

box-shadow: inset 0 30px 20px red, inset 0 5px 20px blue;

не канает, ибо тени накладываются