Beispiel: Schattierung

Ein Beispiel dafür, wie Dinge, die CSS zwar kann, die Mehrzahl der Browser jedoch nicht, trotzdem realisiert werden können, ist die Schattierung von Schrift. Die Schöpfer des CSS-Spezifikation haben in CSS2 mit text-shadow vorgesorgt. Wie man auf der Texte-Seite in der zugehörigen Tabellenzelle sehen kann, wenn man sie mit verschiedenen Browsern ansieht, klappt das eher selten. Es gibt (mindestens) einen Browser, der es kann, der KDE-Browser Konqueror unter Linux!
Schattierte Schriften, scheinbar müssen sie sein, können zunächst als Bild eingesetzt werden. Dabei hat man die besten Gestaltungmöglichkeiten. Für die Schattierung reiner Texte kann man JavaScript oder auch Java nutzen.
Mit den Positioniermöglichkeiten, die CSS bietet, kann man sich aber browserfest behelfen und Schriften übereinandersetzen und schließlich mit einiger Mühe ebenfalls solche Effekte erzielen.
Der erforderliche Code ist nicht besonders lichtvoll:

Im head oder in der CSS-Datei, dann ohne umrandendes style-Tag:
<style type="text/css">
.schatten{position:static; font-family:arial,sans-serif; font-weight:bold; font-size:25pt; color:#bbbbbb}
.schrift{position:relative; top:-40px; left:2px; font-family:arial,sans-serif; font-weight:bold; font-size:25pt; color:#6666ff}
</style>
Jetzt der Aufruf:
<div class="schatten">
<div class="schrift">
Schrift mit Schatten
</div>
Schrift mit Schatten
</div>
Schrift mit Schatten
Schrift mit Schatten
CSS Kurs, © Rolf Hirte, 2001/2007

Valid XHTML 1.0!CSS-Validierung