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
|