Kreative Textgestaltung mit CSS3

Die eindrucksvollsten Texteffekte basieren auf einer Illusion der Dreidimensionalität oder sie versetzen eine zweidimensionale Form in Bewegung, um beim Betrachter das Gefühl der Räumlichkeit zu erwecken. Ein geschicktes Zusammenspiel dieser Elemente verleiht dem Text einen unverkennbaren Charakter und ist nun endlich auch mit reinem CSS3 möglich. Der Einsatz von RGBa ermöglicht die Gestaltung anspruchsvoller visueller Effekte durch das Zusammenspiel von Text mit seinem Hintergrund.Mithilfe von CSS3-Anweisungen können Sie Textzeichen durchscheinen lassen und mit Schatten versehen. Der Einsatz von CSS3-Übergängen erlaubt es Ihnen, visuelle Effekte im Browser sanft zu animieren. Mithilfe von Transformationen können Sie die Anordnung von Textelementen dynamisch verändern. Das Schöne daran: Textzeichen bleiben weiterhin als Textzeichen erhalten und sind damit für den Web- Designer leicht zu bearbeiten und für Webbesucher wie gewohnt auswählbar.

Schatten-Effekte

Die CSS-Eigenschaft text-shadow verleiht dem betreffenden Text einen Schatten, beispielsweise

Der erste Parameter definiert hier die Farbe. Die beiden folgenden Parameter bestimmen die Position des Schattens auf der X- und Y-Achse relativ zum Text. Der letzte Parameter legt die Weichzeichnung fest (0 für keine). Der Effekt wird sowohl auf den Text als auch auf die sogenannten Text- Dekorationen angewendet (text-decorations). Beim Festlegen der Farbe können Sie nun im Übrigen auf RGBa ausweichen und dadurch aus der Unterstützung für Transparenz Nutzen ziehen, zum Beispiel:

Ein einziges Textelement kann gleichzeitig mehrere verschiedene Schatten werfen, denn die text-shadow-Eigenschaft nimmt eine kommatagetrennte Liste von Schatteneffekten entgegen. Zum Beispiel:

Sowohl Webkit-Browser (einschließlich Safari 4.x und Chrome 4/5) als auch Firefox 3.6.x und Opera (ab Version 10.10) können Text-Schatten problemlos rendern.Lediglich der Internet Explorer ist da ins Hintertreffen geraten und auch in IE9 ist die Unterstützung bisher noch nicht in Sicht.Die CSS3-Eigenschaft text-outline müsste rein theoretisch eine Kontur mit radialem Schatten (und optionaler Weichzeichnung) erzeugen, doch bisher wird sie in keinem Browser zuverlässig unterstützt.

Laufweite anpassen

Visuelle Effekte wie Schlagschatten können eine Anpassung der Laufweite erforderlich machen. Diese Korrektur können Sie mithilfe der Eigenschaft letter-spacing umsetzen und den Abstand zwischen einzelnen Worten mithilfe der Eigenschaft word-spacing beeinflussen.

Textumbruch in Spalten

CSS3 erweitert außerdem das Arsenal Ihrer Design-Werkzeuge in Bezug auf den Umbruch von Text in Spalten. Mit CSS3 können Sie von umständlichen Workarounds Abschied nehmen und den Textfluss in Spalten semantisch codieren.

Spezielle Eigenschaften

Einige interessante Texteigenschaften, die im Web immer öfter eingesetzt werden, sind bisher noch nicht Teil des CSS3- Standards. Denn solche experimentellen Eigenschaften erhalten ein herstellerabhängiges Präfix. In diese Kategorie fallen unter anderem Konturen von Textzeichen, Farbverläufe und Masken.

Zeichenkonturen

Textkonturen sind im Web (von Workarounds einmal abgesehen) vorerst nur in Webkit-Browsern Realität geworden.Für diese Browser können Sie die Farbe der Kontur mithilfe von

und ihre Breite mittels

setzen.Wenn Sie schließlich die -webkit-textstroke- Eigenschaft mit

kombinieren, entsteht die Illusion durchsichtiger Textzeichen, die lediglich eine Außenkontur besitzen. Alle anderen Browser rendern stattdessen die Eigenschaft color und so ist hier die ansonsten transparente Schrift opak.