0

Нужна тень как на изображении, то есть только по бокам и в двух моментах снизу (ближе к футеру). Во всех генераторах теней, тень не смог настроить, чтоб была только снизу или сверху. Каким образом можно реализовать такую тень ? И если можно, напишите сразу box-shadow: .. .. ..

Тень

0

3 ответа 3

3

box-shadow - это прямоугольник тени за объектом.
Вы можете его двигать, масштабировать и размывать.
"Тень с двух боков" - это нечто некорректное.

Однако, всё же можно скомбинировать несколько теней:

.card {
  width: 80%;
  margin: auto;
  box-shadow: 
   -5px 0 3px -1px lightgreen,
    5px 0 3px -1px lightgreen
}
<div class="card">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel quam lacinia, lacinia est sit amet, mollis dolor. 
</div>

1
  • Спасибо, я еще сделал по вашему первому комментарию, хотел отметить, но вы видимо стёрли его :) 21 фев 2017 в 15:41
3

как вариант

.card{overflow:hidden;margin-bottom:20px}
.card div{
  width: 80%;
  margin: auto;
  box-shadow:0 0 10px 1px #000;
}
<div class="card">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel quam lacinia, lacinia est sit amet, mollis dolor.</div>
</div>
<div class="card">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel quam lacinia, lacinia est sit amet, mollis dolor.</div>
</div>

первый естессно, кошернее. но у этого подцветов снизу/сверху нет.

0

Пользуюсь этим: http://www.cssmatic.com/box-shadow Очень удобная вещь Если лень делать, то вот css для box-shadow внизу блока: box-shadow:

0px 5px 15px -5px rgba(64,64,64,0.7);

1
  • Делать не лень, такая тень появляется снизу и с боков. Но ведь дело в том, что я не могу задать тень всему шаблону же (а может просто не умею или не знаю чего-то). Я задаю тень секциям и получается, что у секций тень с боков и + тень снизу, которая ненужна. 21 фев 2017 в 14:31

Ваш ответ

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

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