Хочу сделать тень у 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
Комментариев нет:
Отправить комментарий