CSS: Можно ли убрать тень с одной стороны блока?

Question

[Дмитрий Логвиненко]

Нужно убрать такой артефакт:



Как лучше осуществить?

Оригинал можно глянуть здесь

Answer 1

[Павел Савченков]

Можно попробовать верхнюю часть (без тени) вывести отдельным блоком и выше. z-index вам в помощь.

Answer 2

[lorndesign]

overflow:hidden для родительского блока откусывает тени…

Answer 3

[SerDIDG]

Советовал бы избавиться от яваскрипта и позиционирования основного блока, выравнивать по центру margin: 0 auto;, прикрепить сайт к верху документа. Просто если страницы будут иметь разную высоту, скачки пойдут не на пользу. Потом, не используйте везде айдишники, есть классы. Чтобы тень хорошо смотрелась, лучше её налаживать на сам листок, а скрепки отцепить и отрицательно позиционировать, хуже от этого не будет.

Comments

[Дмитрий Логвиненко]

Такой вопрос: если классов будет ничем не меньше, чем айдишников, то в чем смысл? А вот с margin: 0 auto у меня не ладится — потому и накрутил скрипт. Да, вспомнил, почему: страница, по задумке дизайнера, должна стоять по центру экрана.

[SerDIDG]

Не хочу лишний раз что-то доказывать, просто оставлю это здесь. habrahabr.ru/post/143452/

Answer 4

[4ikist]

box-shadow: 0 4px 10px #444;

Answer 5

[Сергей Савельев]

Можно! Но идеально сделать не получится, так как произойдёт наслоение теней с двух сторон. Кстати, может я перепутаю с ответом именно на ваш вопрос, но не суть.

Убрать тень сверху:

box-shadow: -2px 1px 2px rgba(0,0,0,0.15), 
    2px 1px 2px rgba(0,0,0,0.15);

Убрать тень снизу:

box-shadow: -2px -1px 2px rgba(0,0,0,0.15), 
    2px -1px 2px rgba(0,0,0,0.15);

Убрать тень слева:

box-shadow: 1px -2px 2px rgba(0,0,0,0.15), 
    1px 2px 2px rgba(0,0,0,0.15);

Убрать тень справа:

box-shadow: -1px -2px 2px rgba(0,0,0,0.15), 
    -1px 2px 2px rgba(0,0,0,0.15);

Answer 6

[spmbt]

Тут, очевидно, что логика тени неправильная, нужно делать от блока с белым листом, а сверху — прозрачный рисунок пружин. Или так подобрать параметры тени, чтобы сверху её не было вообще. Вижу, на живом примере уже идёт такая работа, в Хроме она исчезла, в Fx едва заметна.

(Но самое весёлое будет впереди, когда захотите сделать тень в IE7-8. Там есть для этого фильтры.)

Comments

[Дмитрий Логвиненко]

На живом так и было. Это я специально сделал, чтобы лучше была видна суть)

[Дмитрий Логвиненко]

Я просто не хотел бы выносить пружину в отдельный блок, так как там и так каша жутка: цветы и птичка — это отдельные блоки с отрицательными left-right, а сам блок идет в центр с помощью js.