Design

Kreative Textgestaltung mit CSS3

CSS3 bringt viele neue Möglichkeiten der kreativen Textgestaltung. Internet Magazin enthüllt das wahre Potenzial für effektvollen Text im Webbrowser.

  1. Kreative Textgestaltung mit CSS3
  2. Farbverläufe und Masken
  3. Weitere Möglichkeiten
Internet, webdesign, css3, css, programmierung, textgestaltung, design

© Internet Magazin

Internet, webdesign, css3, css, programmierung, textgestaltung, design

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

text-shadow: #000000 1px 1px 1px;

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:

text-shadow: rgba(255,255,255,0.6)
3px 3px 3px;

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

h1{
font: 4em Georgia, "Bitstream
Charter", "URW Bookman L", "Century
Schoolbook L", serif;
text-shadow: rgba(0, 0, 0, 0.496094)
-3px 0px 10px, rgba(0, 0, 0,
0.292969) 0px -3px 10px, rgba(255,
255, 255, 0.496094) 0px 3px 3px,
rgba(0, 0, 0, 0.292969) -3px -6px
2px, blue -1px -3px 5px;
color: white;
}

Internet, webdesign, css3, css, programmierung, textgestaltung, design

© Internet Magazin

Sanfte Übergänge zwischen zwei Zuständen einer Text-Verknüpfung mit experimentellen CSS-Eigenschaften funktionieren in aktuellen Webkit-, Mozillaund Opera-Browsern. Den Verlauf können jedoch bisher nur Webkit- Browser darstellen.

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

-webkit-text-stroke-color

und ihre Breite mittels

-webkit-text-stroke-width

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

-webkit-text-fill-color:transparent;

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.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".