[CSS] Inset Box Shadow auf Grafik

Ich arbeite an einer Website auf der viele Bilder einen Schatten nach innen haben sollen. Um sie nun nicht alle in Photoshop bearbeiten zu müssen, kam mir der “inset” Wert für das CSS3 Attribut “box-shadow” gelegen, dieser kann auf Bilder jedoch nicht ohne weiteres angewendet werden. Meine Lösung dazu möchte ich hier zeigen.

CSS box-shadow over img - example
So sollte es aussehen.

Auf img Elemente direkt angewendet, bleibt der Schatten hinter dem Bild, ist also nur bei Grafiken mit Transparenz überhaupt sichtbar. Führt man ein Wrapper-Element ein, das den Schatten zugewiesen bekommt, liegt dies zunächst mal auch hinter dem Bild, lässt sich aber mit z-index positionieren. Leider muss das Bild nach hinten gesetzt werden, den Wrapper vor das Bild setzen ist nicht möglich 1:

1) Wrapper mit Box Shadow, Bild in den Hintergrund

HTML

<div class="box-shadow">
    <img src="/images/graphic.jpg" />
</div>

CSS

.box-shadow {
    box-shadow: 0 0 10px 6px white inset;
}
.box-shadow img {
    position: relative;
    z-index: -1;
}

Das Problem hierbei ist, dass das Bild nicht nur hinter den Wrapper rutscht, sondern auch hinter alle anderen Elemente im selben Stacking Context. Woraus sich ein Stacking Context ergibt ist in der Mozilla Dokumentation gut beschrieben:

  • the root element (HTML),
  • positioned (absolutely or relatively) with a z-index value other than “auto”,
  • a flex item with a z-index value other than “auto”,
  • elements with an opacity value less than 1. (See the specification for opacity),
  • elements with a transform value other than “none”,
  • elements with a mix-blend-mode value other than “normal”,
  • elements with isolation set to “isolate”,
  • on mobile WebKit and Chrome 22+, position: fixed always creates a new stacking context, even when z-index is “auto”
  • specifing any attribute above in will-change even you don’t write themselves directly

2) Stacking Context

Hier sinnvoll anwendbar war, dem direkten Elternelement des Wrappers (nennen wir es #parent) einen z-index sowie relative Positionierung zu verpassen:

CSS

#parent {
    position: relative;
    z-index: 0;
}

ist das nicht möglich, weil es z.B. anders positioniert ist oder der z-index einen unerwünschten Nebeneffekt hat, würde ich auf Opacity zurückgreifen, mit einem Wert von fast 1, so dass kein Effekt erkennbar ist, es aber immer noch einen Stacking Context erstellt.

CSS (alternativ)

#parent {
    opacity: 0.999;
}

Beitrag dazu auf StackOverflow

2 Replies to “[CSS] Inset Box Shadow auf Grafik”

  1. Fabian Schmengler, thanks for beautiful post

    I’m trying to add an inset box shadow to two images using their li elements, and to remove this shadow on the images on :hover. However, Im having a great deal of trouble positioning the shadow directly on top of the image. Not only does it sit slightly off the bottom of it, on one image the box shadow nearly extends to the top of the website. I assume this a problem with a container div I am using, but I have been unable to rectify it. Any thoughts?

    here is my html code

    Welcome to Walsh’s Window Cleaning

    Lorem ipsum d….

    Ut lorem odi….

Comments are closed.