На сайте есть карточки. У карточек есть тень. Как сделать так, чтобы тень от одной карточки не падала на другую карточку?

Question

[sorry_i_noob]

Что сейчас происходит:

Тень от одной карточки заходит на другие карточки (по углам видно затемнение). Можно как-нибудь сделать, чтобы этого не было? Чтобы тень была под карточками. Как это сделать? Я попробовал сделать элемент after с position: absolute, width: 100% и height: 100%. Добавил ему тень, сделал z-index 0. А для карточек z-index: 1. У карточек убрал тень. И все равно тень залезает на другие карточки.

Comments

[Rustam Bainazarov]

Делать тень на отдельный блок с z-index: -1.

[alex-1917]

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

[Rustam Bainazarov]

alex-1917, LOL, у вас и SVG в Safari глючили :((

Нужно очень (очень) много добавить box-shadow либо сотней слоёв, либо с огромными значениями (0 0 99999px 99999px), чтобы что-то глючило при таком количестве элементов.

P. S. Все сайты проверяю на iPhone X, iPhone 6, Meizu 16S и на старом телефоне с 1 Гб ОЗУ, Snapdragon 410 и Android 4.4. Нужно очень постараться, чтобы box-shadow в типичных сценариях сильно нагрузил страницу.

Такое, как у автора, не будет глючить даже на старых устройствах. Для примера откройте на каком-нибудь телефоне слабом:
https://jsfiddle.net/s29juc45/show

Не очень много лагов, правда? А ведь тут 350 элементов с box-shadow: 0 0 10px 10px rgba(0, 0, 0, .2) — и размытие, и наложение rgba.

Так что не пугайте почём зря человека.

[alex-1917]

Рустам Байназаров, да все верно говоришь, спору нет. Тут дело в самом авторе...))) Спамер он знатный...

[Rustam Bainazarov]

alex-1917, да, точно, ощущение, что половина вопросов на Toster от него и от Fapchat (по-моему, такой ник).

Answer 1

[Rustam Bainazarov]

Делать тень на отдельный блок с z-index: -1.

Answer 2

[yarnstart]