gluehlampe

3D Text – Anaglyphen mit CSS

Wie ich ja bereits in meinem Artikel “Was ist eine Anglyphe” erklärt habe, benötigen wir ja immer 2 Bilder eines Motives, um einen 3D-Eindruck zu vermitteln.

Dank CSS3 ist es mittlerweile ganz einfach möglich normalen Text auf einer Website mit dem Anaglyphenverfahren als 3D-Text darzustellen. Hierfür benötigen wir lediglich den CSS-Befehl “text-shadow” und die richtigen Parameter. Kein gedoppelter Text oder ähnliches, nur der Schatten-Befehl reicht, um Text dreidimensional anzuzeigen.

So funktionieren Anaglyphen mit CSS

Wenn wir das Rot-Cyan-Verfahren nutzen wollen, weisen wir dem Text die Farbe Rot zu, der Schatten bekommt dann die Farbe Cyan.

Zu Beachten ist hierbei, dass die CSS-Schatten normalerweise schräg nach hinten angezeigt werden. Durch einen Trick kann man aber die durch den Schatten generierte Text-Kopie auf gleicher Höhe darstellen.

Die beiden CSS-Zeilen, auf die es bei der Anaglyphendarstellung ankommt, sehen dann wie folgt aus:

color: rgba(255, 0, 0, 0.5);

text-shadow:  0.2em 0 0 rgba(0, 255, 255, 0.5);

Die erste Zeile weist dem Text die Farbe Rot zu und stellt diesen halbtransparent dar. Die zweite Zeile verschiebt den Schatten nach rechts, gibt ihm die Farbe Cyan und lässt ihn ebenfalls halbtransparent erscheinen.

Möchtet ihr den 3D-Effekt vergrößern, dann müsst ihr nur den Wert für die Verschiebung erhöhen. Soll die Schrift anstatt nach hinten lieber nach vorne aus dem Bildschirm herauskommen, dann muss vor der Verschiebung ein Minuszeichen gesetzt werden: “-0.2em”.

3D Text – Anwendungsbeispiel

Auf diese Weise könnte man so seine komplette Website dreidimensional darstellen. Ich selber nutze ihn auch, aber etwas dezenter, und zwar im Kopf dieser Website. Dort nutze ich diese CSS-Funktion, um den Hover-Effekt meines Links zu gestalten.

Leider gibt es auch Browser, die CSS3 noch nicht ausreichend unterstützen. So stellt zum Beispiel der Internet Explorer 9 nicht den Text-Schatten dar, weshalb Nutzer dieses Browser beim “Hovern” nur die rote Schrift, nicht aber den Schatten und damit den 3D-Effekt sehen. Deswegen zeig ich hier noch mal den Anaglyphen-Effekt für jederman als Bild:

Anaglyphe mit CSS
Anaglyphe mit CSS

Da in Zukunft aber CSS3-Kompatibilität immer wichtiger wird, kann man davon ausgehen, dass jeder neue Webbrowser auch diesen Effekt darstellen wird.