3D Effekt für Texte erzeugen

Mit CSS hast du die Möglichkeit, ohne den Einsatz von Grafiken einen 3D Effekt für Texte zu erzeugen. Für normalen Lauftext ist das zwar ungeeignet, allerdings könnten beispielsweise Überschriften so mit einem netten 3D Effekt versehen werden.

In diesem Artikel zeige ich, wie das funktioniert.

3D Effekt für Texte

Du brauchst nur ein wenig CSS, um deinen 3D Effekt zu erzeugen. Füge dazu bspw. das nachstehende CSS Snippet in ein Stylesheet ein.


Beispiel:

h2.3d {
text-shadow:   1px 0px #eee, 0px 1px #ccc,
               2px 1px #eee, 1px 2px #ccc,
               3px 2px #eee, 2px 3px #ccc,
               4px 3px #eee, 3px 4px #ccc,
               5px 4px #eee, 4px 5px #ccc,
               6px 5px #eee, 5px 6px #ccc,
               7px 6px #eee, 6px 7px #ccc,
               8px 7px #eee, 7px 8px #ccc,
               8px 8px #eee;
}

Erklärung:

Für den 3D Effekt nutzen wir das CSS Property text-shadow. Dieses besteht aus insgesamt 4 Bestandteilen (von denen ich im oberen Beispiel aber nur drei verwendet habe):

  1. h-shadow (Position des horizontalen Schattens, Angabe zwingend erforderlich, auch negative Werte möglich)
  2. v-shadow (Position des vertikalen Schattens, Angabe zwingend erforderlich, auch negative Werte möglich)
  3. blur-radius (Radius des Weichzeichnungseffekts, Angabe optional, im obigen Beispiel nicht verwendet)
  4. color (Farbe des Schattens, Angabe optional)

Im oberen Beispiel habe ich, wie bereits erwähnt, die Angabe zum blur-radius nicht verwendet. Der Wert ist somit automatisch „0“, d.h. es findet keine Weichzeichnung des Schattens statt. Dies ist an dieser Stelle notwendig, da wir ja keinen Schatten haben wollen, sondern einen 3D Effekt.

Weiterhin wurde nicht ein einzelner Schatten definiert, sondern – um jeweils einen Pixel versetzt – viele Schatten. Dadurch wird schlussendlich der 3D Effekt erzeugt.

Die Stärke des 3D Effekts lässt sich einfach durch das Abändern der einzelnen „Layer“ bestimmen. Die einzelnen Stufen müssen dabei nach dem gleichen Schema weitergeführt werden, wie im Code Beispiel dargestellt.

Wenn du hingegen einen weniger starken 3D-Effekt haben möchtest, kannst du auch einfach ein paar Zeilen kürzen. Schaue dir dazu am besten auch mein weiter unten verlinktes Anzeigebeispiel an.

Um nun einen Text mit dem 3D-Effekt anzeigen zu lassen, musst du im Content nur noch die entsprechende CSS Klasse definieren.


Beispiel:

<h2 class="3d">Dies ist eine &lt;h2&gt;-&Uuml;berschrift mit 3D Effekt</h2>

Anzeigebeispiel:

Folge einfach diesem Link (öffnet in einem neuen Tab), um dir das Anzeigebeispiel anzusehen.


Hinweis:

Wie so häufig, ist auch hier ein kurzes Wort der Warnung angebracht. Du solltest es auf deiner Website mit dem 3D Effekt nicht übertreiben. Wie du im Beispiel sehen kannst, wirkt der Effekt schon relativ stark. Ein zu übermäßiger Einsatz kann daher für die Augen sehr anstrengend sein.

Browser Test

Das oben genannte CSS Snippet habe ich überdies in folgenden Browsern getestet.

  • Google Chrome 32
  • Firefox 26
  • Internet Explorer 11
  • Opera 18
  • Safari (iPhone-Version, iOS 7.0.5)

In den genannten Browsern funktioniert das Snippet dabei einwandfrei. Ich kann jedoch leider nicht versichern, dass dieses CSS Snippet auch in hier nicht aufgeführten Browsern funktioniert.


Anzeige:


Schreibe einen Kommentar