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.
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:
Continue reading “[CSS] Inset Box Shadow auf Grafik”
Notes:
- Kann mir das jemand erklären? 100% Durchblick beim z-index habe ich offenbar noch nicht. ↩