3D Effekt für Texte

Mit CSS hast du die Möglichkeit, ohne den Einsatz von Grafiken einen 3D-Effekt 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

Um einen entsprechenden 3D-Effekt zu erzeugen, muss lediglich nachstehendes CSS-Snippet in dein Stylesheet eingefügt werden.

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;
}

 

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 unser 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 ansehen

 

Browser-Kompatibilität

Dieses Script habe ich 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 funktionierte das Script einwandfrei. Ich kann darüber hinaus leider nicht versichern, dass dieses Beispiel auch in älteren Browser-Versionen oder hier nicht aufgeführten Browsern funktioniert.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.