Всем привет! Я новичок и я пытаюсь создать вот такую вот тень для фотографий:
А получается, к сожалению вот так и самостоятельно решить эту проблему у меня не получается:
Т.е. тень верхней фотографии падает на нижнюю, а этого не должно быть.
К каждой фотографии применяю display:block; position:absolute; и z-index:число;
Ответ
Как вариант решения данной проблемы, могу посоветовать следующий код (в данном случае вам необходимо тень делать у контейнера, содержащего элементы):
.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;
}
Подробнее про идею для решения данной проблемы можно почитать в книге Леа Веру: Секреты CSS в главе 16 "Падающие тени неправильной формы".
Если коротко, то в данном решении используются фильтр SVG, и упрощенный аналог на CSS, и если не поддерживается одно свойство, то будет применено другое.
Про фильтры подробнее можно прочитать тут и тут.
Комментариев нет:
Отправить комментарий