Outer-Space
Tipps & Tricks zur Programmierung in HTML

Schattenspiele

Die Darstellung von Schatten hinter Schriftflächen, Fotos und Ähnlichem ist ein beliebtes Mittel, um Webseiten grafisch aufzupeppen. Zur Realisierung bieten sich unterschiedliche Möglichkeiten an. Die Auswahl wird gegebenenfalls von der Aktualität des verwendeten Browsers beeinflusst.

  • Die Verwendung einer Hintergrundgrafik ist auf Inhalte mit fest definierter Breite limitiert. Unterschiedliche Höhenausdehnung lässt sich durch Verndung eines DIV-Bereichs am Ende realisieren, in dem der unterste Teil der Grafik hinterlegt wird. Die Kompatibilität sollte bei allen Browsern gegeben sein.
  • Für in Höhe und Breite anpassbare Lösungen mit hinterlegter Grafik kann eine 3 x 3 Felder umfassende Tabellenmatrix verwendet werden. Durch Zuweisung der unterschiedlichen Eck- und Randlage der Grafik für die einzelnen Felder mittel CSS funktioniert dies in allen Browsern, vorausgesetzt, die Grafik ist entsprechend gross genug gewählt.
  • Eine Lösung die nur auf der Verwendung von CSS basiert erfordert den Einsatz von zwei DIV-Bereichen. Der hinten liegende Schattenbereich muss zusätzlich mit Rahmen versehen werden. Die "bekannten" Probleme einiger Browser mit dem Box-Modell sind zu beachten.
  • Die elegantste Lösung funktioniert leider nur in aktuellen Browsern, die den Befehl "box-shadow" interpretieren können (Beispiel 2).

Beispiel 1

Hier eine CCS-basierte Lösung, die auch in älteren Browsern funktioniert
 
<div style="width:300px;">
<div style="background-color:#999; padding:0 0 3px 0; 
border-width:3px 0 0 3px; border-style:solid; border-color:#FFF;">
<div style="background-color:#CCC; margin:-3px 3px 0 -3px; padding:0.5em 0.8em;">
"Text-Inhalt"
</div>
</div>
</div>
 

Beispiel 2

Eine CSS-basierte Lösung für aktuelle Browser, zusätzlich mit Rundungen an den Ecken.
 
<div style="width:300px;">
<div style="background-color:#CCC; border:0px solid #999; 
border-radius:20px; box-shadow:3px 3px 6px #666; 
padding:0.8em 1.2em;">
"Text-Inhalt"
</div>
</div>