Mit einem Grafikprogramm sind Textfarbverläufe in wenigen Sekunden erzeugt. Das Ergebnis ist eine ansehnliche Grafik, aber auf der Website ist sie eher unpraktisch und lädt lange - ganz zu schweigen von dem Aufwand, wenn man für 20 Seiten eine bunte Überschrift braucht. Dabei kann man in PHP mit relativ einfachen Mitteln einen Textfarbverlauf erstellen - und das ganz ohne Grafiken.
Wir zeigen, wie's geht.
Grundlage ist der Text, den wir einfärben wollen, und die beiden Farben für den Verlauf:
<?
$text="Hallo und herzlich willkommen auf meiner Homepage!";
$color1="#FF0000";
$color2="#0000FF";
?>
Mit jedem Buchstaben des Textes soll sich der Farbwert etwas verändern, so dass aus #FF0000 (rot) am Ende #0000FF (blau) geworden ist. Als nächstes brauchen wir die Anzahl der Farb-Zwischenwerte, wir nehmen dafür einfach die Länge des Textes - so bekommt jeder Buchstabe eine etwas andere Farbe:
<?
$steps=strlen($text);
?>
Der Aufbau von Farbcodes
Um die einzelnen Farbanteile der zwei Farben zu ermitteln, muss man wissen, wie ein Farbwert in HTML aufgebaut ist: Grundsätzlich werden Farben durch 3 Komponenten definiert: Rot, grün und blau (RGB). Jede dieser Komponenten hat eine Intensität, also eine Zahl zwischen 0 und 255. Ein reiner Rotton hätte also rot=255, grün=0 und blau=0. Gelb wäre rot=255, grün=255 und blau=0 - also eine Mischung aus rot und grün. Durch diese 3 Komponenten können alle erdenklichen Farben angegeben werden.
In HTML wird ein Farbwert aber nicht in Dezimalzahlen (0..255) angegeben, sondern im Hexadezimal-System (00..FF). Und wie vielleicht schon bemerkt, ist FF0000 nichts anderes als 3 Farbanteile hintereinander: FF 00 00 - 255 rot, 0 grün und 0 blau - ergibt rot. Das # davor gibt lediglich an, dass es sich hierbei um einen Farbcode handelt. Ein solcher Hex-Farbcode lässt sich zum Beispiel mit dem Farbcode-Generator (Link zu dem Tool) in der Rubrik "Kostenlos" erzeugen.
Wie wird der Farbcode nun in seine Anteile zerlegt?
Es ist eigentlich ganz einfach: Wir wollen aus dem Farbwert # FF 00 00 unsere 3 Werte: 255, 0, 0. Und da diese 3 Werte im Hex-Format einfach hintereinander stehen, und jeder Wert 2 Zeichen lang ist, brauchen wir nur die Werte nach dem # herauszukopieren. Als PHP-Code sieht das folgendermaßen aus:
<?
$r1=hexdec(substr($color1,1,2));
$g1=hexdec(substr($color1,3,2));
$b1=hexdec(substr($color1,5,2));
?>
Die Funktion substr gibt einen Teil eines Textes (in dem Fall $color1) zurück. substr($color1,1,2) bedeutet also, dass ab dem 2. Zeichen (man fängt bei 0 an zu zählen, das erste Zeichen hätte die Position 0, das zweite 1 usw.) die nächsten 2 Zeichen herauskopiert werden. hexdec wandelt den Hex-Wert in eine Dezimalzahl um. In $r1 steht jetzt 255, in $g1 0 und in $b1 ebenfalls 0.
Das gleiche machen wir auch mit der Endfarbe ($color2):
<?
$r2=hexdec(substr($color2,1,2));
$g2=hexdec(substr($color2,3,2));
$b2=hexdec(substr($color2,5,2));
?>
Zwischenwerte von Startfarbe und Endfarbe
Jetzt haben wir die Farbanteile der Start- und der Endfarbe. Um jetzt einen Farbverlauf zwischen den beiden Farben zu erzeugen, brauchen wir also nur Zwischenwerte für die Farbanteile $r, $g und $b zu berechnen. Hierfür müssen wir, bevor es los geht, noch die Differenz der Farbanteile von $color1 und $color2 bilden:
<?
$diff_r=$r2-$r1;<br>
$diff_g=$g2-$g1;<br>
$diff_b=$b2-$b1;<br>
?>
Wofür das gut ist, sehen wir gleich. In einer Schleife gehen wir nun jeden Buchstaben des Textes durch ...
<?
for ($i=0; $i<$steps; $i++)<br>
{
?>
... und berechnen für rot, grün und blau die Zwischenwerte:
<?
$factor=$i / $steps;
$r=round($r1 + $diff_r * $factor);
$g=round($g1 + $diff_g * $factor);
$b=round($b1 + $diff_b * $factor);
?>
$factor ist ein Hilfswert, den wir für die Berechnung brauchen. Mit diesem Wert werden nun die Farbdifferenzen multipliziert und zu den Ausgangsfarbwerten dazuaddiert, so dass aus 255, 0, 0 ($color1) langsam 0, 0, 255 ($color2) werden (bei dem mittleren Wert ist dabei überhaupt nichts zu tun, nur der Rot- und der Blau-Wert verändert sich).
Jetzt erstellen wir aus den drei Farbanteilen $r, $g, $b wieder einen HTML-Farbwert und geben in dieser Farbe den nächsten Buchstaben aus:
<?
$color="#" . sprintf("%02X",$r) . sprintf("%02X",$g) . sprintf("%02X",$b);
echo "<font color=\"$color\">" . $text[$i] . "</font>";
}
?>
Das war's eigentlich schon. sprintf macht aus unsereren Zahlen wieder Hex-Werte, die wir zusammenfügen und ein # vorne dransetzen. Jetzt haben wir unseren nächsten Farbzwischenwert und können ihn für den nächsten Buchstaben verwenden. Das geschieht für jeden Buchstaben von $text - wobei auch die Leerzeichen eine Farbe bekommen, die man aber leider nicht sieht.
Wenn man das Ganze nun ausprobiert, wird man sehen, wie sich die Farbe mit jedem Buchstaben des Textes ändert und von rot nach blau verläuft. Und das ganz ohne eine einzige Grafik.
Der Sourcecode
Und hier gibt es den kompletten Code zum Kopieren, als Funktion verpackt:
<?
function create_gradient($text,$color1,$color2)
{
$steps=strlen($text);
$r1=hexdec(substr($color1,1,2));
$g1=hexdec(substr($color1,3,2));
$b1=hexdec(substr($color1,5,2));
$r2=hexdec(substr($color2,1,2));
$g2=hexdec(substr($color2,3,2));
$b2=hexdec(substr($color2,5,2));
$diff_r=$r2-$r1;
$diff_g=$g2-$g1;
$diff_b=$b2-$b1;
for ($i=0; $i<$steps; $i++)
{
$factor=$i / $steps;
$r=round($r1 + $diff_r * $factor);
$g=round($g1 + $diff_g * $factor);
$b=round($b1 + $diff_b * $factor);
$color="#" . sprintf("%02X",$r) . sprintf("%02X",$g) . sprintf("%02X",$b);
echo "<font color=\"$color\">" . $text[$i] . "</font>";
}
}
?>
Anwendung
Der Aufruf von create_gradient könnte folgendermaßen aussehen:
<?
create_gradient("Willkommen auf meiner Homepage!","#FF0000","#0000FF");
?>
Willkommen auf meiner Homepage!
Beachtet werden muss, dass hier nur Hex-Farbwerte verwendet werden können, mit Farbcodes wie "blue" oder "lime" funktioniert es natürlich nicht.
(C) by Lukas Ruschitzka, Februar 2004 (veröffentlicht auf 4websites.de)