3D-Überschriften ohne Grafik

In dynamischen Websites findet man recht selten abgeschattet Schriften, um einen 3D-Effekt zu erzeugen. Der Grund ist einfach:  In CSS2.0 gibt es zwar die Eigenschaft text-shadow, sie ist aber zunächst von keinem Browser implementiert worden, so dass sie in der Fassung CSS2.1. wieder aus dem Standard herausgenommen wurde. Nun haben aber in der Zwischenzeit die meisten Browser diese Eigenschaft definiert, nur nicht der Internet Explorer, auch nicht in der letzten Fassung IE 8. Natürlich kann man sich auch in dynamischen Systemen mit grafischen Schriften helfen, aber besonders elegant ist das nicht, wenn man bei jeder neuen Überschrift oder Menüpunkt erst ein Grafikprogramm bemühen muss, mit allen Umständlichkeiten des Uploads. Besonders „dynamisch“ ist dann das CMS nicht mehr, jedenfalls nicht für den Designer oder Redakteur. Das einzige mir bekannte CMS, das solche onboard-Grafikverarbeitung bietet ist Typo3, aber wer das einmal durchgezogen  hat, wird auch nicht unbedingt zum  Fan.

Lim Chee Aun hat auf seiner Website http://phoenity.com/newtedge/drop_shadow/ ein einfaches CSS angeboten, um Abschattungseffekte für Schriften zu erzeugen.  Dies ist nicht die einzige Realisierung, aber die m. E. am besten skalierende, obwohl auch hier bald Grenzen bei kleinen Schriften – in Abhängigkeit vom Browser – erreicht werden. Wie macht man nun aber aus diesem statischen Modell ein dynamisches und daraus wiederum z. B. ein plugin für WordPress, so dass es auf allen Präsenzen locker eingesetzt werden kann, ohne im Template/Theme herumzuhacken? Natürlich mit Hilfe von Javascript und ein bisschen PHP, um den plugin-Mechanismus zur Einbindung der Javascript- und CSS-Files zu realisieren. Lim Chee Aun arbeitet mit den Pseudo-Selektoren :before und :after und vermeidet damit zusätzliches Markup. In Javascript – genauer in jQuery – gibt es diese Selektoren aber nicht, sie müssen gewissermaßen nachgebastelt werden. Das war aber noch die geringere Hürde. Viel gravierender war, wie das Umgebungsstyling berücksichtigt wird und was mache ich, wenn der Schriftzug noch einmal zwsichen anderen Tags eingebettet ist, besonders ist hier an das a-Tag zu denken, das bei WordPress des öfteren in Überschriften verwendet wird.

Nachdem ich ursprünglich das Plugin für alle Browser vorgesehen hatte, lasse ich es nunmehr nur in der Umgebung des Internet Explorers aktiv werden.  Da man mit text-shadow bedeutend feinere Effekte erzeugen kann, wollte ich es dem Anwender überlassen, wie schön er es in den anderen Browser darstellen will. Die größte Annäherung an die IE-Realisierung dürfte man mit

h1,h2 {text-shadow: 1px 1px gray;}
erzielen.Die Theme-Abhängigkeiten sind relativ gering.
Ein Problem bleibt aber mindestens: die Technik verkraftet keine Zeilenumbrüche, d. h. white-space:nowrap; ist notwendig. Das kann natürlich dazu führen, dass lange Überschriften aus dem vorgesehenen Bereich herausragen. Ich habe mich mit overflow:hidden; aus der Affaire gezogen und lasse die vollständige Überschrift als Tooltip anzeigen. Und hier geht es gleich zum Download. Wie üblich entzippen und in den plugin-Folder hochladen sowie aktvieren.

Download

Das plugin wurde für h1 und h2 gebaut. Wer es für andere Tags oder CSS-Klassen braucht, kann das sicher schnell umbasteln. Eine Parametrisierung mit Steuerung über das Backend, welche Tags oder Klassen berücksichtigt werden, wäre sicherlich wünschenswert, aber zur Zeit noch nicht angedacht.