Innenliegender Schatten für Bilder mit CSS3

Schatten können mit Hilfe von CSS3 relativ einfach verwendet werden. Egal ob für DIVs, Texte oder auch für Bilder. Problematischer wird es aber, wenn das jeweilige Element keinen Schatten nach außen, sondern stattdessen nach innen werfen soll.

Bei Bildern funktioniert das dafür normalerweise verwendete box-shadow: inset 0 0 0 0 #CCC nämlich leider nicht.

Als Workaround für dieses Problem hilft jedoch, wenn man das Bild in ein DIV packt. Im nachfolgenden Beispiel hat das DIV die Klasse .header-image, also:

<div class="header-image">
    <img src="..." />
</div>

Um dem Bild jetzt einen innenliegenden Schatten zu verpassen, reicht folgender CSS-Code:

.header-image {
    position: relative;
    max-width: 100%;
    float: left;
}

.header-image::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: inset 0 0 10px 0 rgba(0,0,0,0.3);
    -moz-box-shadow: inset 0 0 10px 0 rgba(0,0,0,0.3);
    -webkit-box-shadow: inset 0 0 10px 0 rgba(0,0,0,0.3);
} 

.header-image img {
    float: left;
} 

Dabei wird in Wirklichkeit dem umschließenden DIV ein innenliegender Schatten verpasst, der jedoch so aussieht, als würde er innerhalb des Bildes liegen.