Как эмулировать эффект box-shadow с перекрывающимися элементами и overflow: hidden? - PullRequest
Новая
       16

Как эмулировать эффект box-shadow с перекрывающимися элементами и overflow: hidden?

0 голосов
/ 19 мая 2018

CodePen

Соответствующий CSS: 

.cards {
    display: flex;
    flex-wrap: no-wrap;
    align-content: center;
    max-width: 50em;
    margin-bottom: 2em;
}

.cardWrapper {
    overflow: hidden;
}

.cardWrapper:last-child,
.cardWrapper:hover {
    overflow: visible;
}

.card {
    width: 30em;
    display: flex;
    flex-direction: column;
    margin: 2em 1em;
    padding-bottom: 2em;
    background-color: $color-neutral95;
    border-radius: 1rem;

    -webkit-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.45);
    -moz-box-shadow: 0 20px 28px rgba(0, 0, 0, 0.57);
    box-shadow: 0 20px 28px rgba(0, 0, 0, 0.45);
}

Любые идеи:

(a) Предотвратить отсечение коробки-тени;или

(b) эмулировать тень блока, используя другое свойство CSS;или

(с) Иди с совершенно другим подходом?

Я использую React, и, следовательно, предпочитаю либо чистый CSS, либо решения Javascript.Заранее спасибо!

...