Создание тени, не падающей на div

278
06 марта 2018, 02:16

Всем привет! Я новичок и я пытаюсь создать вот такую вот тень для фотографий:

А получается, к сожалению вот так и самостоятельно решить эту проблему у меня не получается:

Т.е. тень верхней фотографии падает на нижнюю, а этого не должно быть.

К каждой фотографии применяю display:block; position:absolute; и z-index:число;

Answer 1

Как вариант решения данной проблемы, могу посоветовать следующий код (в данном случае вам необходимо тень делать у контейнера, содержащего элементы):

.container { 
  filter: url(drop-shadow.svg#drop-shadow); 
  filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, .5)); 
} 
 
.element { 
  position: relative; 
  width: 150px; 
  height: 150px; 
} 
 
.element__one { 
  background-color: lightgreen; 
} 
 
.element__two { 
  top: -70px; 
  left: 40px; 
  background-color: lightblue; 
} 
 
.element__three { 
  top: -140px; 
  left: 80px; 
  background-color: pink; 
}
<div class="container"> 
  <div class="element element__one"></div> 
  <div class="element element__two"></div> 
  <div class="element element__three"></div> 
</div>

Подробнее про идею для решения данной проблемы можно почитать в книге Леа Веру: Секреты CSS в главе 16 "Падающие тени неправильной формы".

Если коротко, то в данном решении используются фильтр SVG, и упрощенный аналог на CSS, и если не поддерживается одно свойство, то будет применено другое.

Про фильтры подробнее можно прочитать тут и тут.

Answer 2

такой пример:

* { 
  box-sizing: border-box; 
} 
 
html, 
body { 
  padding: 0; 
  margin: 0; 
  width: 100%; 
  height: 100%; 
} 
 
img { 
  max-width: 100%; 
  width: 100%; 
} 
 
.wrap { 
  position: relative; 
  width: 100%; 
  height: 100%; 
} 
 
.box, 
.shadow{ 
  width: 300px; 
  height: 450px; 
  position: absolute; 
  left: 200px;  
  transform: rotate(-30deg) skew(25deg, 5deg) scale(1,1);   
} 
 
.box-1, 
.shadow-1{ 
  z-index: 1; 
  top: 160px; 
} 
 
.box-2, 
.shadow-2{ 
  z-index: 2; 
  top: 80px; 
} 
 
.box-3, 
.shadow-3 { 
  z-index: 3; 
  top: 0px; 
} 
 
.shadow { 
  z-index: -1; 
  box-shadow: -20px 20px 15px 0px rgba(0,0,0,0.72); 
}
<div class="wrap"> 
  <div class="box box-1"> 
    <img src="https://images.unsplash.com/photo-1520116575045-14cd65689b7c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e83313f1ba5f599db178773268b0a4f5&auto=format&fit=crop&w=500&q=60" alt=""> 
  </div> 
  <div class="box box-2"> 
    <img src="https://images.unsplash.com/photo-1519918387175-5bca15e4d9e2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=dba21abe88de841aeab0828f8cf1bcb7&auto=format&fit=crop&w=500&q=60" alt=""> 
  </div> 
  <div class="box box-3"> 
    <img src="https://images.unsplash.com/photo-1520116647936-d5e8570bdf8a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=7da72c3ff8ec5ab09f257ec6ca5d702e&auto=format&fit=crop&w=500&q=60" alt=""> 
  </div> 
   
  <div class="shadow shadow-1"></div> 
  <div class="shadow shadow-2"></div> 
  <div class="shadow shadow-3"></div> 
</div>

READ ALSO
JS максимальное время выполнения скрипта
CSS

JS максимальное время выполнения скрипта

Имеется preloader на сайте, но приблизительно в 1 из 30 случаев он висит около 4-5 секунд, хотелось бы ограничить максимальное время выполненияКак...

 243
Диагональная линия в css. Как?
CSS

Диагональная линия в css. Как?

Как сделать "декоративную" (диагональную) линию белого цвета шириной 1px для блокаПри изменении размера блока, линия должна оставаться по диагонали...

 319
Как выровнять select option?
CSS

Как выровнять select option?

Можно ли выровнять option в select как то ? Что бы окно было статическое например, не выпрыгивало выше селкекта, а например только снизуЭто вообще...

 201
Как сделать такой update?
MySQL

Как сделать такой update?

Есть вот такой запрос, но он не правильный

 261