Box mit Schatten

Diese Version sollte auch in den meisten Netscape 4.x Versionen funktionieren. Eine etwas schlankere, aber mehr CSS erfordernde Version gibt es hier.

Wie macht man eine 'Box' mit Schatten?

Es ist eigentlich recht einfach. Die 'Box' - also eine Tabelle oder mehrere zusammenhängende Tabellen oder auch ein Bild - , wird so in eine umhüllende vierzellige Tabelle gepackt, daß rechts und unten je eine Zellenreihe für den Schatten frei bleibt.

Dies ist die Box, die mit einem Schatten versehen werden soll. Die umhüllende Tabelle ist hier mit Rahmen versehen, die aber nur der Erläuterung dienen.

Für den nächsten Schritt werden zwei kleine Grafiken benötigt, die den Schatten bilden sollen. Wenn diese Grafiken in den Zellhintergund gelegt werden, können sie nicht nur recht klein gehalten werden, sondern sie passen sich durch den Kachelungseffekt auch noch an die Größe der umhüllenden Tabelle an.

rechter Schatten	unterer Schatten

Aus der Nähe betrachtet (um den Faktor 10 vergrößert) sehen die Grafiken wie nebenstehend aus. Die Schattengrafiken müssen für einen entsprechenden Farbübergang an den jeweiligen Gesamthintergrund angepaßt werden. Das Einfügen erfolgt besser über CSS. Dazu werden zwei Klassen definiert, die hier '.schattenrechts' und '.schattenunten' genannt wurden. Für sie wird folgendes festgelegt:

.schattenrechts { 
background-image:url(senkrecht.gif); 
background-repeat:repeat-y; 
} 
.schattenunten { 
background-image:url(waagrecht.gif); 
background-repeat:repeat-x; 
}

Danach sieht die Box nun so aus:

Dies ist die Box, die mit einem Schatten versehen werden soll. Hier sind die Rahmen nun weggelassen, aber das Ergebnis ist noch nicht überzeugend.

Ecke oben rechts	Ecke unten links	Ecke unten rechts

Das Problem sind die Ecken. Um das besser zu machen, brauchen wir noch drei kleine Grafiken, die jeweils in die 'Ecken' der Schattenzellen eingefügt und mit 'align' an die richtige Stelle gebracht werden. Nebenstehend die 'Ecken' aus der Nähe betrachtet (Vergrößerungsfaktor 10).

Dies ist die Box, die mit einem Schatten versehen werden soll. Auch hier gibt es nun keine Rahmen mehr und zusätzlich sind die drei Eckgrafiken eingefügt. So soll's aussehen.

Getestet auf PC mit Internet Explorer 5.0 und 6.0, Mozilla 1.5, Netscape 4.5, 6.0 und 7.0, Opera 5.01 und 7.0, auf Mac mit Internet Explorer 5, Netscape Navigator 4.7 und 6.01, Mozilla 0.91, Opera 5.0 und iCap 2.5. Opera 5.01 auf PC hat in diesem Beispiel in der ersten Zeile Probleme mit der Darstellung von Icon und Text nebeneinander und teilweise mit den Bildunterschriften. Außerdem gibt es beim Opera - zumindest bei mir - Probleme mit dem Rendern bei den Schatten der Icons. Abhilfe ist zur Zeit nicht bekannt. Der NN 4.5 (PC) hat bei der großen Box ein Renderproblem mit dem rechten Rand des rechten Schattens, das vermutlich mit der Gesamtgröße der Box zu tun hat - aber vielleicht taucht das nur bei mir auf.

Ergänzung: Für das NN Problem gibt es Abhilfe: Die Hintergrundgrafik um einen Pixel nach rechts breiter machen - also die rechte Pixelspalte noch mal anfügen.

Das gesamte Konstrukt ist wegen der mehrfach verschachtelten Tabellen recht aufwendig - insbesondere wenn es mehrfach auf einer Seite eingesetzt wird.

Anregungen, Kritik, Verbesserungsvorschläge an g.schneider@berlin.de