Как не обрезать тень элемента, используя «overflow: hidden»?

Question

[Vurundshundba]

Всем привет.

Верстаю по макету. По дизайну на странице присутствует слайдер (карусель). Изначально видно по три слайда, слайды фиксированной ширины, кнопки "вперёд-назад", буллеты - в общем классика. Казалось бы, ничего сложного. Но у каждого слайда по дизайну в макете имеется нехилая тень в 24 пикселя, а по hover на слайде она ещё и смещается на 5 пикселей вниз. Поскольку контейнер со слайдами имеет свойство overflow: hidden, чтобы обрезать остальные слайды, вместе с ними обрезается и тень.

Вопрос: как добиться того, чтобы тень не обрезалась? Пробовал присобачить её к псевдо-элементам, а их абсолютно позиционировать - обрезает. Пробовал задавать z-index - не помогает. Пробовал filter: drop-shadow вместо box-shadow - всё то же самое. Отступы, разумеется, тоже пробовал задавать - но тень настолько широкая, что пока угасает тень одного элемента, она начинается у другого, и не получается найти такой отступ чтобы где-то не обрезалось.

Пример кода тут: https://codepen.io/tracktor/pen/OJeNaJe - последняя строка в css у .item. Особенно хорошо обрезку заметно при переключении слайдов.

Если отказаться от анимации и просто отображать по три слайда, переключая их JavaScript-ом, то проблемы нет, но хотелось бы всё-таки сделать красиво... В вёрстке я не очень силён, возможно, в упор не вижу какой-то простейший вариант решения проблемы. В общем, пожалуйста, помогите. Третий вечер бьюсь...

Comments

[DIVSIDE]

НИКАК

[Vurundshundba]

Сергей delphinpro и Арсений Матыцин
Как можно увидеть в коде по ссылке https://codepen.io/tracktor/pen/OJeNaJe - внутренний отступ у контейнера присутствует, он равен как раз размеру тени (24 пикселя) + 5 пикселей при hover(в данном конкретном примере hover не реализовывал ещё - надо без него разобраться). И тень всё равно обрезается, как минимум, на третьем слайде, а если прокрутить дальше, то обрезается и на первом (потому что накладывается тень уехавшего за пределы контейнера слайда).

.container {
  display: flex; 
  align-items: center;
  gap: 32px;
  overflow: hidden;
  box-sizing: content-box;
  width: 960px;
  margin: 20px auto;
  padding: 29px;
}

alexalexes
Я правильно понял, что расстояние от одного слайда до другого должно быть размером "в две тени", то есть 24 + 24 = 48? Даже если так и сработало бы, по макету отступ между слайдами - 32 пикселя...
Но в любом случае, переделал свой пример, упростив значения для более удобного расчёта, и тень всё равно обрезается...

Приведите пожалуйста пример с кодом, чтобы не обрезалось, или укажите, что мне в моём примере надо исправить, если я чего-то ещё не понимаю...

[Ankhena]

внутренний отступ у контейнера присутствует, он равен как раз размеру тени

Ну так увеличьте паддинг, чтобы не было такого визуального эффекта и не придумывайте себе сложностей.

И не пишите сами себе ответов.

[alexalexes]

Не простая геометрия.
В общем, если вы указываете ширину тени 20px, то это не значит, что блюр этой тени уйдет в фон через 20 px, он будет продолжаться дальше до чистого оттенка где-то до 27px (может еще зависеть как срендерит браузер).
Чтобы дойти до чистого оттенка между слайдами, то вам придется тянуть gap до 54px, но вас такой расклад не устроит.
Поэтому остается сделать вспомогательные элементы по бокам контейнера слайдера (возможно, создать второй контейнер), чтобы компенсировать переход оттенков, как показано на рисунке.

[Виталий Першин]

Простейший вариант решения, это кинуть filter: drop-shadow на контейнер и придумать другую анимайцию при наведении.

Answer 1

[Сергей delphinpro]

Сделать для контейнера, у которого overflow:hidden, внутренний отступ 24 + 5 пикселей. Зачем здесь три дня биться, непонятно.

Comments

[Vurundshundba]

Сделать для контейнера, у которого overflow:hidden, внутренний отступ 24 + 5 пикселей.

Ну вот у примера по ссылке уже есть такой внутренний отступ - и тень всё равно обрезается...

Answer 2

[Арсений Матыцин]

Задача со звёздочкой, факт. В целом поддержу оратора — Сергей delphinpro. Добавлю, что неплохо бы после сделать отрицательный отступ, чтобы не было нерегулируемого смещения остальными блоками. Плюс можно поиграться с «разгоном» элементов следующего и предыдущего слайда, чтобы задать им пространство в рамках «ушей», чтобы тень не выплывала обрезанной.

Answer 3

[alexalexes]

Банальная геометрия.
Горизонтальная ширина тени выбирается как значение a, при котором градиент тени полностью уходит от насыщенного цвета в цвет фона.
Теперь нужно соблюсти условия:
1) Два горизонтальных отступа между слайдами не должно быть меньше значения 2a - чтобы тени соседних слайдов не накладывались.
2) Горизонтальный отступ контейнера слайдов должен быть равен ровно значению a, тогда по краям граница контейнера не будет затрагивать ни одну тень крайних и скрытых слайдов. Если сделать больше горизонтальный отступ, то предусмотрите, чтобы скрытые элементы убирали свою тень когда они выходят за пределы контейнера.

Если соблюсти эти условия, то проблем с обрезкой тени не будет.