JavaScript MISSING MANUAL

Kreative Überschriften

In dieser Übung werden Sie mit jQuery in Verbindung mit CSS einen einzigartigen Effekt für Überschriften erstellen (siehe Abbildung 5-8). Der grundlegende Trick besteht darin, ein transparentes PNG-Bild über jede Überschrift zu legen. Das PNG dient dabei als Maske, die Teile der Überschriften bedeckt. In diesem Beispiel liegt ein Bild aus verblassenden horizontalen Linien über mehreren Überschriften, um so den Eindruck zu erwecken, der Text sei gestreift.

Der Schlüssel zu diesem Effekt liegt darin, ein leeres <span>-Tag in jedes Überschriften-Tag einzufügen. Mit CSS können Sie dieses <span>-Tag dann so formatieren, dass es über der Überschrift liegt und ein transparentes Bild anzeigt.

Abbildung 5-8. Mit cleverem ...