Verläufe im Text mit CSS

Web 2.0 Verläufe im Text per CSS – ohne Flash oder eingebettes Bild unmöglich?

Nicht mit Hilfe dieses CSS-Tricks: Das Geheimnis ist in den Tag um den Text, z.B. <H1> am Anfang einen weiteren <span>-Tag einzufügen:

<h1><span></span>Metallic shine</h1>

Per CSS wird dann dem <span>-Element ein halbtransparentes PNG-Hintergrundbild zugewiesen, das per position-Angabe über die Headline gelegt wird:

h1 {
   font: bold 330%/100% "Lucida Grande";
   position: relative;
   color: #464646;
}

h1 span {
   background: url(gradient.png) repeat-x;
   position: absolute;
   display: block;
   width: 100%;
   height: 31px;
}

So kann man sich den Aufbau später vorstellen:

Lediglich eine Einschränkung bei der Farbwahl gibt es: Die helle Farbe des Verlaufes muss der Textfarbe entsprechen (also im PNG entsprechend transparent sein) und die dunkle Farbe muss der Hintergrundfarbe des Textes entsprechen.
Wer es im IE6 laufen haben möchte, muss einen PNG-Hack anwenden, da dieser von Haus aus keine Transparenz von PNG-Grafiken darstellt.

Vereinfachung mit jQuery

Wer das JavaScript-Framework jQuery einsetzt kann sich das separate <span>-Element sogar sparen und automatisch in jede Headline ein <span> injezieren lassen. Am besten vergibt man dafür eine CSS-Klasse. Z.B. „gradient“:

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function() {
   //prepend span tag to H1
   $("h1.gradient").prepend("<span></span>");
});
</script>

Das Prinzip stammt von Nick La, Betreiber des Webdesigner Wall Weblogs. Die Demoseite zeigt verschiedene Anwendungsbeispiele.