2

Можно сделать тень с фиксированным отступом, и фиксированной высоты, например отступ 100px и высота самого дива, возможно ли сделать бесконечную тень вниз без отступа? Внешний и внутренний див может быть любой высоты.

Хочу получить такой результат:

a busy cat

Чтобы тень была сплошная от края элемента до самого низа страницы

.wrapper{
  height:300px;
  width:300px;
}
.inner{
  padding: 8px 10px 3px 35px;
  margin: 10px auto 0;
  width: 100px;
  background-color: #6288cf;
  box-shadow:0 100px 0 #6288cf;
}
<div class="wrapper">
  <div class="inner">...</div>
</div>

5
  • Я не понимаю ваш вопрос в том смысле, что не представляю как вы хотите чтобы выглядел результат. Можете просто задать для нужной величины какое-то огромное значение, допустим 99999px. И это будет подобно бесконечности. 23 янв 2017 в 7:14
  • @vadim-ovchinnikov добавила изображение с желаемым результатом. Идея такая - элемент встречается в любом месте на странице и отбрасывает тень до самого ее края, образовывая как бы столбец, но который не зависит от других элементов и от высоты страницы.
    – kizoso
    23 янв 2017 в 8:52
  • @Grundy, раз уж переносишь картинку, то загрузи её сюда.
    – Qwertiy
    21 июн 2019 в 14:46
  • @Qwertiy, тутошный загрузчик сказал что формат файла не поддерживается, я поэтому просто разметку поправил
    – Grundy
    21 июн 2019 в 14:56
  • @Grundy, ну так правой кнопкой и copy image, а тут вставляешь. А то у меня joxi.net заболокирован :(
    – Qwertiy
    21 июн 2019 в 14:57

2 ответа 2

3

Этого эффекта можно добиться при помощи псевдоэлементов. В примере используется ::after, ему достаточно задать height: 99999px и добавить обертке (в данном случае body) overflow: hidden.

*, *:after {
  box-sizing: border-box;
}

body {
  overflow: hidden;
}

div {
  width: 100px;
  padding: 10px;
  background: #ccc;
  position: relative;
  border: 1px solid;
}

div:after {
  position: absolute;
  left:0;
  top: calc(100% + 1px);
  content: '';
  background: #ccc;
  width: 100%;
  height: 99999px;
}
<div>text</div>

1
  • 2
    а что, если страница будет длиннее 99999px? :)
    – Grundy
    21 июн 2019 в 14:14
2

Задавайте тень в единицах зависящих от высоты экрана — vh. У тени есть несколько параметров вам надо задавать вертикальное расположение и распространение. Чтобы тень занимала весь низ и по в экран нужно задать тень так: box-shadow: 0 50vh 0 50vh red;, где вместо red указывайте нyжный цвет. Небесполезно будет также для body или нужного контейнера задать overflow: hidden;.

body {
  overflow: hidden;
}

.wrapper {
  height: 300px;
  width: 300px;
}
.inner {
  padding: 8px 10px 3px 35px;
  margin: 0 auto;
  width: 100px;
  background-color: #6288cf;
  box-shadow: 0 50vh 0 50vh red;
}
<div class="wrapper">
  <div class="inner">...</div>
</div>

Также можете вместо 50vh использовать calc(50vh - 10px), где вместо 10px можете использовать нужное количество пикселей.

4
  • 1
    Судя по результату, тень распространяется не только вниз, но и везде вообще. 23 янв 2017 в 10:28
  • Нет, она занимает чётко величину экрана. Это из-за высоты контейнера 300px. 23 янв 2017 в 10:42
  • 1
    Я имею в виду, что тень распространяется также влево и вправо, а автору вопроса необходимо распространение тени только вниз. 23 янв 2017 в 10:44
  • @SashaOmelchenko Это правда, но я не знаю, что можно с этим сделать, не меняя того, что это тень. Может тогда кому-то другому может пригодится мой ответ. 23 янв 2017 в 15:02

Ваш ответ

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

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