Как сделать внутреннюю тень поверх дочернего элемента?

Question

[hesy]

Как сделать внутреннюю тень (слева и справа) поверх блоков?


codepen удален, вопрос сам решился

Answer 1

[Aetae]

Никак. Тень - это тень, а дети - поверх родителей.
Можно сделать полноразмерный псевдоэлемент ::after с тенью и pointer-events: none;.

Comments

[hesy]

почему никак? =( на скрине тень есть поверх элементов

[Aetae]

hesy, потому что "внутреннюю тень поверх дочернего элемента" никак не сделать. Почему - я написал. И что можно сделать с тем же эффектом - тоже.

P.S. Теоретически этого таки можно добиться кастомным svg-фильтром, но это бессмысленно и поддержка браузерами - не оч.

[hesy]

Aetae, я просто по фронт не очень, но не уж то в 2020 году нельзя реализовать такое простое скрытие элементов? ох, за то куча всяких бесполезных библиотек на каждый чих =(
если не юзать тень, а использовать градиент? с ним возомжно?

[Aetae]

hesy, я тебе написал что делать. =\

[hesy]

Aetae, "нельзя" "тут svg надо юзать" "поддержка не оч"
я, повторюсь, во фронт ни в зуб ногой, нашел решение этой задаче)) без всяких svg, inset box shadow и с поддержкой ie xD пойду пиво открою

Answer 2

[historydev]

Вот так