Websiteentwicklung: CSS: Textschatten
Mit der Eigenschaft text-shadow ist es möglich, dass man einen Text mit der naiven Anmutung von Schatten versieht.
text-shadow ist bereits in CSS 2.0 definiert, wird aber in CSS 2.1 wegen mangelnder Interpretation in Darstellungsprogrammen
nicht aufgeführt, taucht aber in einem Arbeitsentwurf zu einem Modul vonn CSS 3 wieder auf.
Zum Beispiel wird die Eigenschaft nicht vom Microsoft Internet Explorer (< Version 10) interpretiert.
CSS 2.0 spricht genaugenommen nur von einem Schatteneffekt, definiert aber nicht präzise, wie dieser Effekt erreicht wird. Aufgrund der Werte und der Beschreibung ist aber von einer angenommenen unendlich weit entfernten, ausgedehnten Lichtquelle auszugehen. Dabei ist die Annahme eine Lichtquelle insofern irreführend, als nicht wirklich etwas beleuchtet wird, sondern der Text lediglich mit einer verwischten und versetzten Kopie des Textes unterlegt wird. Um also den Effekt darzustellen, wird letztlich eine Kopie des Textsegmentes horizontal und vertikal versetzt, dann mit einem Weichzeichner verwischt und hinter dem Text dargestellt. CSS 2.0 definiert auch nicht, was für ein Typ von Weichzeichner verwendet werden soll. Bei Programmen, die auch SVG-Filter interpretieren, wäre es zum Beispiel naheliegend, diese Funktionalität mit einer entsprechenden SVG-Filter-Kombination umzusetzen, bei der die Weichzeichnung mit einem Gaußschen Weichzeichner erfolgt.
Es können zudem mehrere Schatteneffekte angegeben werden, wobei davon auszugehen ist, dass diese einfach gegebenenfalls überlappen und der Schatten nicht etwa durch die Annahme mehrerer Lichtquellen erzeugt wird. Gemäß CSS 2.0 liegt der erste Schatten dann ganz unten, der nächste darüber und so weiter bis ganz oben drauf der Text angeordnet wird. Gemäß dem Entwurf für CSS 3 (Text-Dekoration) ist die Anordnung gerade umgedreht. Da Autoren nicht angeben können, welche Version von CSS sie verwenden, ist das Verhalten also formal undefiniert, sofern der Arbeitsentwurf für das Modul von CSS 3 so als Empfehlung herauskommt. Bereits jetzt ist es wahrscheinlich, dass Darstellungsprogramme nicht die in CSS 2.0 verwendete Anordnung verwenden.
Der Wert ist eines der Schlüsselwörter 'none' oder 'inherit' oder eine Liste mit Schattenparametern, wobei jeder Satz einen Schatten repräsentiert und von den anderen mit einem Komma separiert ist.
Ein Satz besteht aus einer optionalen Farbangabe und zwei oder drei Längenangaben, dabei ist es egal, ob erst die Farbangabe erfolgt und dann die Längen notiert werden oder umgekehrt.
Die Farbangabe bestimmt die Farbe des Schattens (also nicht etwa die der Lichtquelle, was ebenfalls offenbart, dass die mit der Eigenschaft verbundenen Vorstellungen von Schatten nichts mit dem zu tun haben, was man im täglichen Leben als Schatten erlebt). Ist keine Farbe angegeben, so wird die aktuelle Farbe per color verwendet.
Die erste Länge bestimmt den horizontalen Versatz, positiver Wert bedeutet, der Schatten wird nach rechts verschoben, negativer nach links. Die zweite Länge bestimmt den vertikalen Versatz, positiver Wert bedeutet, der Schatten wird nach unten verschoben, negativer nach oben. Die dritte optionale Länge bestimmt den Radius der Weichzeichnung. 0 entspricht also offenbar dem scharfen, klassischen Schatten einer unendlich weit entfernten Punktlichtquelle. Ein anderer Wert führt zu einer Weichzeichnung des Schattens, also im wesentlichen zu einer gewichteten Mittelung aller Pixel innerhalb der angegebenen Länge als Radius um den darzustellenden Pixel.
Der Initialwert ist 'none'. Die Eigenschaft wird nicht vererbt und ist anwendbar auf alle Elemente bei visuellen Medien.
Beispiele:
p {
text-shadow: #f66 .3em .3em .5em
}
Dies ist ein Text mit einem rosa Schatten unten rechts.
p {
text-shadow: #66f -.3em -.3em .5em
}
Dies ist ein Text mit hellblauen Schatten oben links.
Wird der Schatten von Programmen nicht interpretiert, so kann es zu Problemen mit der Lesbarkeit führen, falls die Farbe der Schrift mit der des Hintergrundes übereinstimmt und nur der andersfarbige Schatten für Sichtbarkeit sorgt. Solche zweifellos dekorativen Effekte sollten daher allenfalls zusammen mit alternativen Stilvorlagen verwendet werden, damit der Nutzer bei Problemen einfach umschalten kann. Ein Beispiel dafür:
p {
padding: 10px;
background: white;
color: white;
text-shadow: black 0em 0em 10px
}
Dies ist ein weißer Text auf weißem Grund mit schwarzem Schatten.
Und dann noch ein Beispiel mit mehreren Schatten:
p {
padding: 2em;
background: white;
color: blue;
text-shadow: red 0em 0em 5px,
1.5em 1.5em,
-1.5em -1.2em 4px green,
#0aa -1em 0.5em 1ex,
black 2em -0.5em 1em
}
Text mit mehreren Schatten.
Mit mehreren Schatten, die als regelmäßige Schar angeordnet sind, lassen sich allerdings auch dramatischere Effekte erzielen, allerdings sollte man aufgrund des Problems der undefinierten Reihenfolge immer prüfen, ob beide Varianten sinnvoll sind, beziehungsweise man kann die Angaben symmetrisieren, damit die Reihenfolge egal ist.
padding: 1em;
font-size: 2em;
background: white;
color: black;
text-shadow: #888 2px 2px 2px,
#999 4px 4px 2px,
#aaa 6px 6px 2px,
#bbb 8px 8px 2px,
#ccc 10px 10px 2px
Text mit mehreren Schatten.
Umgedrehte Reihenfolge:
Text mit mehreren Schatten.
Symmetrisiert:
Text mit mehreren Schatten.
padding: 1em;
font-size: 2em;
background: black;
color: #fff;
text-shadow: #fff 0px 0px 10px,
#faf 0px 0px 20px,
#f6f 0px 0px 30px,
#f0f 0px 0px 40px,
#a0a 0px 0px 50px
Text mit mehreren Schatten.
Umgedrehte Reihenfolge:
Text mit mehreren Schatten.
Symmetrisiert:
Text mit mehreren Schatten.
padding: 1em;
font-size: 2em;
background: #eee;
color: #666;
text-shadow: #eee -2px -2px 0, -3px -3px 0 #666
Text mit mehreren Schatten.
Umgekehrte Reihenfolge:
Text mit mehreren Schatten.
Symmetrisiert:
Text mit mehreren Schatten.
CSS 2.0 erwähnt nicht, was bei negativen Radien passiert. Bei einem Gaußschen Weichzeichner wäre das Vorzeichen egal. Daher ein Beispiel dazu:
p {
text-shadow: #006 .5em -.5em -10px
}
Dies ist ein Text mit einem dunkelblauem Schatten mit negativem Radius.