[Erledigt] Farbverlauf in Schrift (image)

[Forumsgast]

Moin,
für mein aktuelles Projekt möchte ich in den überschriften einen Farbverlauf machen. In Chrome ist dies einfach durch css zu realsieren, für andere Browser muss eine Weiche her. Deshalb habe ich mir gedacht, die Buchstaben als Bilder zu ersetzten.
Alle Buchstaben einzeln per Hand zu erzeugen halte ich für Aufwändig. Deshalb dachte ich entweder daran, ein svg mit php in ein png umzuwandeln (mir steht kein Imagick zur Verfügung!) oder den Buchstaben in PHP direkt zu erzeugen. Wie aber kann ich einen Farbverlauf in einer Schrift mit den image-Funktionen in PHP realisieren?

[Forumsgast]

Da hast du schlecht gedacht. Mach so etwas besser mit CSS.

[Forumsgast]

mmh, schade :/
Problem beim CSS ist halt, dass das kein offizielles css3 ist, sondern nur auf webkit-basis. Hab nichts vergleichbares für mozialla gefunden...

[Forumsgast]

Hast du Erfahrung mit CSS Gradient?

http://www.mediaevent.de/css/gradient.html
http://css-tricks.com/examples/CSS3Gradient/

[Forumsgast]

Danke für die Links, aber im Hintergrund ist das ja kein Problem, nur für bei den Farbverläufen bei der Schrift gibts Probleme bei mir...

[Forumsgast]

http://net.tutsplus.com/tutorials/ht...ext-gradients/

[Forumsgast]

danke, aber da ist wieder nur css für webkit drin :/

[Forumsgast]

Manuell einfach alle Zwischenschritte berechnen und jedes einzelne Zeichen gesondert einfärben.

[Forumsgast]

mmh, dachte eher an einen vertikalen Verlauf....

[Forumsgast]

So, nachdem ich mit einer anderen Methode Probleme mit dem antialising hatte, musste ich auf eine andere Methode zurückgreifen, die mir persönlich zwar nicht gefällt, aber dennoch zweckmäßig ist.
Wer den Code haben möchte:

<?php
class textGradient{

  private $from;
  private $to;
  private $text;
  private $colors = array("red", "green", "blue");    
  
  public function __construct($from, $to, $text){
    $this->from = hexdec($from);
    $this->to = hexdec($to);
    $this->text = $text;
  }
  
  public function render(){  
    $bbox = imageftbbox(42, 0, "segoeui.ttf", $this->text);
    
    $x = $bbox[2]-$bbox[0]+4; //Verzug schriftartbedingt!!!
    $y = $bbox[1]-$bbox[7];
    $imgFrom = imagecreatetruecolor($x, $y);    
    $imgTo = imagecreatetruecolor($x, $y);          
    imagefill($imgFrom, 0, 0, imagecolorallocate($imgFrom, 255,255,255));    
    imagefill($imgTo, 0, 0, imagecolorallocate($imgTo, 255,255,255));  
    imagettftext($imgFrom, 42, 0, $bbox[0], max(abs($bbox[1]), abs($bbox[5])), $this->from, "segoeui.ttf", $this->text);
    imagettftext($imgTo, 42, 0, $bbox[0], max(abs($bbox[1]), abs($bbox[5])), $this->to, "segoeui.ttf", $this->text);
    for($iy = 0; $iy < $y; $iy++){
      for($ix = 0; $ix < $x; $ix++){
        $colorFrom = imagecolorat($imgFrom, $ix,  $iy);
        $colorTo = imagecolorat($imgTo, $ix,  $iy);  
        $percent = $iy/$y;          
        $rgbFrom = imagecolorsforindex($imgFrom, $colorFrom);
        $rgbTo = imagecolorsforindex($imgTo, $colorTo);  
        $newColor = array();
        foreach($this->colors as $color){  
          $newColor[$color] = (1-$percent)*$rgbFrom[$color]+$percent*$rgbTo[$color];        
        }
        imagesetpixel($imgTo, $ix, $iy, imagecolorallocate($imgTo, $newColor["red"], $newColor["green"], $newColor["blue"]));
      }
    }
    imagepng($imgTo);
    imagedestroy($imgTo);
    imagedestroy($imgFrom);
  }  
}  
    
header('Content-Type: image/png');
$tg = new textGradient("969696", "000000", "php.de");
$tg->render();
?>

Der Code oben erzeugt folgendes Bild:
[Edit: Bildverweis war ein toter Link]

Wie gesagt: ist nicht perfekt und evtl. ist auch noch sinnloser Code drin, weil ich vorher eine andere Methode benutzt hatte, aber es funktioniert
Achtung: Gggf. muss je nach Schrift die Breite $x noch vergrößert werden (etwa bei Segoe UI noch um ca 4px, je nach belieben).

[Forumsgast]

vielleicht solltest du etwas experimentierfreudiger sein ... ich hab gerade mal die Beispielseite besucht, wo die ganze Technik vorgestellt und "angeblich nur Safari 4 " gesagt wird - mit Firefox (10) - und siehe da .. der Farbverlauf ist "da" - ich gehe daher davon aus, dass obwohl da ein webkit-spezifisches css benutzt wird, inzwischen bis auf den IE so gut wie jeder Browser - insbesondere natürlich Chrome , Safari, Opera und Firefox in halbwegs aktueller Version - funktioniert.

PS gerade noch im IE 8 getestet - der kann es auch .. also wenn du auf IE 6 + 7 verzichten kannst, dann nimm es .. jeder verbreitete Browser kann es
(Konquerer kann auch webkit ...)