8

Хочу сделать тень у div блока, но чтобы она была только с одной стороны - сверху.

Исходный стиль:

div {
  box-shadow: 0 15px 30px 10px rgba(0, 0, 0, .5);
  width: 200px;
  height: 150px;
  overflow: hidden;
  margin: 30px;
}
<div></div>

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

Как все же добиться желаемого результата?

4 ответа 4

3

section {
  width: 200px;
  height: 150px;
  padding-top: 30px;
  margin: 0 30px 30px;
  overflow: hidden;
}

div {
  box-shadow: 0 15px 30px 10px rgba(0, 0, 0, .5);
  width: 100%;
  height: 100%;
  background: antiquewhite;
}
<section><div></div></section>

2

Хотел сделать тень только сверху и только внутрь. Свойством box-shadow ничего не вышло этим, зато с фоном получилось:

div {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0) 20%);
  width: 200px;
  height: 150px;
  overflow: hidden;
  margin: 30px;
  outline: 1px dotted red;
}
<div></div>

2
  • Это у вас ответ или вопрос?
    – ЮрийСПб
    18 сен 2018 в 15:51
  • 2
    @ЮрийСПб, ответ это. Добавил сниппет.
    – Qwertiy
    18 сен 2018 в 16:11
1

В моем случае получилось обыграть ситуацию с помощью внутренней тени:

div {
  box-shadow: inset 0 -7px 20px -10px rgba(0, 0, 0, .5);/* получившаяся тень */
  width: 200px;
  height: 150px;
  overflow: hidden;
  margin: 30px;
}
<div></div>

По сути раннее внешнее позиционирование на топ'е блока ушло на внутреннее нижнее позиционирование соседнего блока. В результате все выглядит достаточно чисто.

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

0

Чтобы сверху, нужун box-shadow: 0 -6px 4px -4px rgba(0, 0, 0, .2);

div {
  box-shadow: 0 -6px 4px -4px rgba(0, 0, 0, .2);
  width: 200px;
  height: 150px;
  overflow: hidden;
  margin: 30px;
  outline: 1px dotted red;
}
<div></div>

9
  • Вы скопировали предыдущий ответ? :) Не зря же его автор удалил.
    – Colibri
    25 июн 2017 в 17:33
  • нужно -6px а не 6px. хотел комментировать, но удалили и получился ответ.
    – koshe
    25 июн 2017 в 17:36
  • Я умею копировать код и вставлять его в редактор. Посмотрите, пожалуйста, на мой образец, а затем на ваш. Есть только одно сходство без учета alpha-канала - это цвет. Как я уже писал - с позиционированием я уже игрался.
    – Colibri
    25 июн 2017 в 17:39
  • а скиньте все правило css для вашего div 25 июн 2017 в 17:40
  • @AliaksandrPitkevich Вот оно: box-shadow: 0 -6px 4px -4px rgba(0, 0, 0, .2). Ну еще правда есть это: background-color: #fff; padding: 1.5rem;. Ничего криминального.
    – Colibri
    25 июн 2017 в 17:40

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.