Box mit Schatten (Version für 6er und 7er Browser)

Hier noch eine Version für Browser, die etwas mehr CSS kennen, als der Netscape 4.x. Der Quellcode ist deutlich schlanker als bei der auch für Netscape 4.x geeigneten Version.

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 Classes 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 soweit erforderlich mit 'vertical-align: top' im CSS 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 6.0, Mozilla 1.5, Netscape 4.5, 7.0, Opera 5.01 und 7.0. Opera 5.01 auf PC hat in diesem Beispiel Probleme mit der Darstellung der Schatten bei den Icons und teilweise mit den Bildunterschriften. Abhilfe ist zur Zeit nicht bekannt.

Der NN 4.5 (PC) ist in Bezug auf CSS hier überfordert - aber das war ja klar. Man kann die Seite gerade noch lesen und man sieht auch, daß sich die Schattengeschichte prinzipiell auch mit dem NN 4.x verwirklichen läßt.

Das gesamte Konstrukt ist wegen der verschachtelten Tabellen recht aufwendig - insbesondere wenn es mehrfach auf einer Seite eingesetzt wird. Und natürlich werden hier Tabellen zum 'Layouten' mißbraucht.

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