dmlogv
@dmlogv
Универсальный человек

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

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


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

Оригинал можно глянуть здесь
  • Вопрос задан
  • 30290 просмотров
Пригласить эксперта
Ответы на вопрос 6
Можно попробовать верхнюю часть (без тени) вывести отдельным блоком и выше. z-index вам в помощь.
Ответ написан
Комментировать
lorndesign
@lorndesign
overflow:hidden для родительского блока откусывает тени…
Ответ написан
Комментировать
SerDIDG
@SerDIDG
Советовал бы избавиться от яваскрипта и позиционирования основного блока, выравнивать по центру margin: 0 auto;, прикрепить сайт к верху документа. Просто если страницы будут иметь разную высоту, скачки пойдут не на пользу. Потом, не используйте везде айдишники, есть классы. Чтобы тень хорошо смотрелась, лучше её налаживать на сам листок, а скрепки отцепить и отрицательно позиционировать, хуже от этого не будет.
Ответ написан
4ikist
@4ikist
box-shadow: 0 4px 10px #444;
Ответ написан
Комментировать
sergej_saveljev
@sergej_saveljev
js, nodejs, react
Можно! Но идеально сделать не получится, так как произойдёт наслоение теней с двух сторон. Кстати, может я перепутаю с ответом именно на ваш вопрос, но не суть.

Убрать тень сверху:
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);
Ответ написан
Комментировать
spmbt
@spmbt
Тут, очевидно, что логика тени неправильная, нужно делать от блока с белым листом, а сверху — прозрачный рисунок пружин. Или так подобрать параметры тени, чтобы сверху её не было вообще. Вижу, на живом примере уже идёт такая работа, в Хроме она исчезла, в Fx едва заметна.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы