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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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