Erstellen bunter, smarter Schatten

Ein echter CSS-Trick von Kirupa Chinnathambi. Um einen farbigen Schatten mit den Farben im background-image eines Elements abzugleichen, inheriten Sie den Hintergrund in einem Pseudo-Element, platzieren ihn hinter dem Original und blenden und filtern ihn dann.

.colorfulShadow {
  position: relative;
}

.colorfulShadow::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  background-position: center center;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);
  z-index: -1;
}

Ein negativer z-index ist für mich immer ein Warnsignal, da das nur funktioniert, wenn keine zwischengeschalteten Hintergründe vorhanden sind. Aber der Trick hält. Es gäbe immer einen anderen Weg, die Hintergründe zu schichten (wie ein <span> oder was auch immer).

Aus irgendeinem Grund erinnerte mich das an eine Demo, die ich gesehen habe (ich kann mich nicht erinnern, wem ich sie zuschreiben soll!). Emojis hatten einen text-shadow, der sie wirklich hervorstechen ließ. Und diese Schatten konnten auch für einen ähnlichen Effekt farblich gestaltet werden.

Direkter Link →