toms blog - Web 2.0 Überschriften mit CSS
Web 2.0 Überschriften mit CSS Dienstag, 22. Juli 08
Mit TYPO3 kann man wunderbare grafische Überschriften erzeugen. Doch was tun, wenn man kein TYPO3 verwendet, seine Überschriften aber trotzdem etwas aufpeppen möchte? Ich erinnerte mich an Tobi, der mal einen Beitrag über eine recht nette Technik auf khmerang.com verfasste, um Überschriften mittels CSS einen grunge-Look zu verpassen. Auf diese Art- und Weise lässt sich auch sehr hübscher Web 2.0 glossy-Style erzeugen wie er z.B. auch vom Logo Creatr verwendet wird – und das ohne für jede Überschrift ein Bild generieren zu müssen.
Alles, was man dazu braucht, ist ein PNG-Bild, welches mittels Stylesheet über die headline gelegt wird und den Glanz erzeugt. Nein, im IE 6 geht das natürlich nicht, da er mit dem Alpha-Wert nicht zurecht kommt. Aber hey – wer den IE6 jetzt immernoch nutzt ist meiner Meinung nach selber schuld und muss dann eben auch auf den tollen Glossy-Effekt verzichten. Kinofilmproduzenten optimieren ihre neusten Streifen ja auch nicht auf Schwarz-Weiß-Bildschirme :)
Das Bild, das ich dazu verwendet habe, liegt hier.
Da man hier in WordPress so schlecht Code einfügen kann, hab ich eine kleine Microseite gebaut, auf der ihr den Code und ein paar live-Beispiele genauer unter die Lupe nehmen könnt:
[...] beschreibt. Damit hat er auch schon recht. Aber ich muss zugeben, ich verwende den Begriff web 2.0 style auch selbst oft für die Beschreibung dieses Looks, weil eben jeder weiß, was damit gemeint ist. [...]