Страницы

Поиск по вопросам

вторник, 12 марта 2019 г.

Как сделать тень только с одной стороны?

Хочу сделать тень у div блока, но чтобы она была только с одной стороны - сверху.
Исходный стиль:
div { box-shadow: 0 15px 30px 10px rgba(0, 0, 0, .5); width: 200px; height: 150px; overflow: hidden; margin: 30px; }


Проблема заключается в том, что тень присутствует так же и слева и справа (совсем капельку и снизу, что тоже является недопустимым). Различные манипуляции с 2-4 значениями ни к чему не привели (да и позиционирование хочется сохранить текущее). Тень так или иначе все равно присутствует по бокам.
Как все же добиться желаемого результата?


Ответ

В моем случае получилось обыграть ситуацию с помощью внутренней тени:
div { box-shadow: inset 0 -7px 20px -10px rgba(0, 0, 0, .5);/* получившаяся тень */ width: 200px; height: 150px; overflow: hidden; margin: 30px; }


По сути раннее внешнее позиционирование на топ'е блока ушло на внутреннее нижнее позиционирование соседнего блока. В результате все выглядит достаточно чисто.
Также, пока писал этот ответ, в голову пришла альтернативная идея по внутренней реализации в соседнем блоке - это с помощью linear-gradient

Комментариев нет:

Отправить комментарий