This article exists also in english

Da mir alle bisherigen Dropshadow-Techniken nicht so recht zugesagt haben, weil sie entweder auf IE-Filtern (damit der Schatten auch im IE sichtbar wird) oder zusätzlichem Markup basieren. Andere haben auch das Problem, dass die Ecken der Schatten ziemlich abrupt aufhören und kein weicher Übergang an den Ecken besteht. Das Beste: Meine Methode kommt komplett ohne zusätzlichem Markup und ohne CSS-Hacks aus. Zu Beginn gleich ein Beispiel wie das ganze später ausschauen wird. (Nur mit modernen Browsern nachzuvollziehen - der Internet Explorer fällt nicht darunter).

Die Idee

Hier geht es nicht um simple Dropshadows, sondern um eine Verbesserung bereits vorhandener Techniken. Es gibt einige Leute, die sich bereits mit dem Problem Dropshadows befasst haben. Hier eine (nicht vollständige) Liste:

• http://1976design.com/blog/archive/2003/11/14/shadows/
• http://www.alistapart.com/articles/cssdropshadows/
• http://wubbleyew.com/tests/dropshadows.htm

Aber alle diese haben das Problem, dass die Ecken nicht sehr schön ausschauen. Der Schatten hört einfach auf und läuft nicht sanft aus. Dafür funktionierts auch im Internet Explorer.

Für alle, die einen CSS 2-fähigen Browser benutzen (beispielsweise Mozilla, Opera oder Safari), der die CSS-Pseudoelemente :before und :after unterstützt, gibt es eine sehr einfache Lösung des Problems - ohne zusätzliches Markup. Das war das wichtigste für mich. Kein zusätzliches Markup wie div-Container sollten benötigt sein, da diese die Semantik der ganzen Webseite zerstören.

Meine Technik wird auch etwas anders im IE angezeigt, man sieht aber in allen Internet-Explorer-Versionen ab IE 5 einen Schatten, nur läuft dieser halt nicht sanft aus - das ist alles. (ähnlich wie im Schritt 1)

Die Umsetzung

Das Markup

<div class="image">
    <img src="images/testbild1.jpg" />
</div>

Das Markup ist eigentlich ziemlich simpel und besteht nur aus dem Nötigsten. Ein Container für das Bild und das Bild selbst. Sogar Breiten- und Höhenangaben sind bei meiner Methode (anders als beispielsweise bei den BefTer Drop Shadows) nicht nötig, da sich der Schatten automatisch anpasst.

Schritt 1

.image {
    background:url(images/dropshadow.png) no-repeat bottom right;
    float:left;
}

.image img {
    display: block;
    margin: 0px 9px 9px 0px;
}

Als erstes wird das Dropshadow-Bild im Container definiert und rechts unten ausgerichtet. Das float:left ist dafür da, dass sich der Container dem Bild anpasst, weil sonst Breitenangaben nötig werden, das aber nicht erwünscht ist, weil man das CSS sonst für jedes Bild anpassen müsste. Man kann left natürlich auch durch right ersetzen, falls das benötigt wird.

display:block für das Bild selbst ist nötig, da sonst Safari den Schatten nicht richtig anzeigt. Anschließend wird dem Bild an der rechten und unteren Seite noch ein Rand gegeben, damit man den Schatten vom Container sieht. Das untere Bild im Beispiel ist übrigens ein semitransparentes GIF-Bild (wird später noch zur Veranschaulichung wichtig).

Schritt 2

.image:after {
    background:#000000;
    display:block;
    width:18px;
    height:9px;
    content:"";
    margin:-9px 0px 0px 0px;
}

Das Pseudoelement :after, dass es seit CSS 2.0 gibt, fügt Inhalt nach einem Container ein. Damit der überhaupt erscheint, muss man erstmal content:""; setzen, auch wenn der Inhalt leer ist. Die zweite wichtige Definition ist display:block;, wir brauchen schließlich einen Block für die linke untere Ecke. Die Angabe der Hintergrundfarbe als Schwarz steht hier nur, damit man den Container im Beispiel besser sieht. Der Hintergrund wird später natürlich durch das Bild mit dem Dropshadow ersetzt und wird so lauten: background:url(images/dropshadow.png) left bottom no-repeat;

Anschließend wird die Ecke noch per negativen margin 9 Pixel (die Höhe des Schattens) nach oben gezogen, damit sie auf der selben Höhe wie das Hintergrundbild des Containers liegt. Die Breite von 18 Pixeln ist übrigens bei meinem Bild nötig, da der Übergang etwas länger als 9 Pixel ist, aber das ist ja nicht weiter schlimm.

Schritt 3

.image:before {
    background:#FF0000;
    display:block;
    height:18px;
    content:"";
}

Dieser Schritt hat mich am meisten Zeit gekostet, was man dem resultierenden CSS aber nicht ansieht. Ich hatte am Anfang immer eine Breitenangabe stehen (meistens 9 Pixel) und habe den Container mit margin-left:100% ganz nach rechts geschoben. Das ergab aber eine unterschiedliche Darstellung im Mozilla und Opera, was natürlich nicht akzeptabel war. Ebenso war eine Browserweiche oder ein Hack nur zweite Wahl - und das hat mich weiter beim Experimentieren gehalten.

Prinzipiell ist :before genau so wie :after aufgebaut, allerdings mit einigen kleinen, aber entscheidenden Änderungen: Wie oben bereits beschrieben ist die Breite nicht angegeben - der Container dehnt sich einfach wie ein normales div soweit wie möglich aus. Und das ist genau bis über den rechten Schatten. Die Höhe ist - wie die Breite bei :after - mit 18 Pixeln angegeben, damit der Schattenübergang komplett angezeigt werden kann.

Schritt 4

Jetzt gibt es aber das Problem, dass der :before-Container nicht unterhalb des Bildes angezeigt wird, sondern einfach darüber. Der Container muss aber den Hintergrundschatten weiter unten, eben neben und nicht über dem Bild überlappen, damit der Übergang schön angezeigt werden kann.

margin-bottom:-18px; im :before-Container löst das Problem, indem es das Bild einfach um 18 Pixel nach oben “zieht”. Jetzt noch die beiden Hintergrundfarben in den :before- und :after-Containern durch das richtige Bild ersetzen, und schon ist der Dropshadow fertig.

Kompatibilität

Ich habe diese Technik in allen mir zur Verfügung stehenden Browsern getestet und der Dropshadow mit den abgerundeten Ecken wird in diesen Browsern korrekt angezeigt:

• Mozilla Firefox 0.9.3/Windows XP (und vermutlich auch die meisten anderen Mozilla-Derivate)
• Opera 7.53/Windows XP (möglicherweise auch in älteren Versionen, ich habe allerdings keine installiert)
• Safari 1.2/Mac OS X 10.3

In diesen Browsern wird der Schatten ohne die Ecken angezeigt:

• Internet Explorer 5.0, 5.5 und 6.0/Windows XP

Weitere Kompatibilitätsmeldungen oder auch Inkompatibilitätsmeldungen sowie Verbesserungsverschläge sind natürlich herzlich willkommen.