PHP to ouput html code for text gradient or "rainbow text" of sorts

Question

Let me start by saying I have scoured the internet all day looking for a solution, and I'm just stumped. I managed to find enough code snippets to put together an "almost" working version of what I need -- but to be completely honest I'm just lost when it comes to how to make it work.

Here's what I'm trying to do:

I'm trying to make a php function that will take 2 or maybe 3 colors, and apply them as a smooth gradient to a text string. I need the function to output the actual HTML code for the gradient. How I envision it working is: it will take the message string and split it into the individual characters, and then color each character in such a way that when it's displayed with the html output, it will look like a smooth fade from one color to the next. Right now I'm testing the function with 2 colors that I've just defined inside it, (FF0000 and 0000FF). I can't seem to get it to color the entire string. It seems to grab the first letter, and do part of the transition, and then just stop.

Here's a screenshot of what I'm trying to make it look like:

Here's a screenshot of what mine comes out looking like (including the html output for explanation sake)

Here's the code that I'm using:

<?php 
function html2rgb($color)
{
    if ($color[0] == '#')
        $color = substr($color, 1);

    if (strlen($color) == 6)
        list($r, $g, $b) = array($color[0].$color[1],
                                 $color[2].$color[3],
                                 $color[4].$color[5]);
    elseif (strlen($color) == 3)
        list($r, $g, $b) = array($color[0].$color[0], $color[1].$color[1], $color[2].$color[2]);
    else
        return false;

    $r = hexdec($r); $g = hexdec($g); $b = hexdec($b);

    return array($r, $g, $b);
}
function rgb2html($r, $g=-1, $b=-1)
{
    if (is_array($r) && sizeof($r) == 3)
        list($r, $g, $b) = $r;

    $r = intval($r); $g = intval($g);
    $b = intval($b);

    $r = dechex($r<0?0:($r>255?255:$r));
    $g = dechex($g<0?0:($g>255?255:$g));
    $b = dechex($b<0?0:($b>255?255:$b));

    $color = (strlen($r) < 2?'0':'').$r;
    $color .= (strlen($g) < 2?'0':'').$g;
    $color .= (strlen($b) < 2?'0':'').$b;
    return '#'.$color;
}
    echo "<h1>Result:</h1>";
    $src_color = html2rgb('FF0000');
    $dst_color = html2rgb('0000FF');
    print_r($dst_color);

    for($i=0; $i<3; $i++)
        $step_color[$i] = ( $dst_color[$i] - $src_color[$i] ) / 30.30;
    // step_color array contains difference between adjacent color stripes

    $html_out = ''; // html code container

    for($j=0; $j<60; $j++)
    {
    // generate color stripe code

        $message = 'I am trying to make this text string fade from one color to another';
        $counter = strlen($message);
        $array = str_split($message);
        $mycount = 0;


        if($mycount < $counter){
            $line = '<b><font color=" '.rgb2html($src_color).';">'.$array[$mycount].'</font></b>';
        $html_out .= "{$line}"; // save color stripe to display HTML code later
        $mycount = $mycount + 1;
        }
        echo $line; // output color stripe to browser

        for($i=0; $i<1; $i++) // incrementing each color component
            $src_color[$i] += $step_color[$i];
    }

?>
<h1>HTML Code:</h1>
<pre><?php
// output HTML code replacing < and > with &lt; and &gt;
$stuff = strtr($html_out, array('&' => '&amp;',
                            '<' => '&lt;',
                            '>'=> '&gt;'));
echo $stuff;

I'm fairly new to this sort of thing, so please don't be too brutal on me if my code is "arse-backwards" or poor. Can anyone point me in the right direction? I'm just at a loss for how to get it to do what I want it to do.

Thank you very much for taking the time to read this, and for any advice you can offer!

Edit: image link for bottom screenshot to make it easier to see https://i.stack.imgur.com/vsfdQ.jpg

UPDATE -- Ok, I've re-written most of the function and I almost have it working. The issue that I'm having now is that it's repeating the entire string over and over. It is applying the fade, but not the way it's supposed to. I need it to fade from one color to the next across the string. Here is a new screenshot of what it's doing now: Here's the link for that so you can see it easier: https://i.stack.imgur.com/X0Pmq.jpg

Here's the new code that I'm using:

<?php
function rgb($rgb) {
    $ret = '';
    foreach ($rgb as $x) {
        // Make sure the RGB values are 0-255...
        $x = max(0, min(255, $x));
        // create a 2 digit hex value for this color component...
        $ret .= ($x < 16 ? '0'.dechex($x) : dechex($x));
    }
    return '#'.$ret;
}

// Returns a fade of $from into $to by $amount ($from and $to are RGB arrays)...
function fade($from, $to, $amount) {
    $rgb = array();
    // Go through the RGB values and adjust the values by $amount...
    for ($i = 0; $i <= 2; $i++) {
        $rgb[$i] = (($to[$i] - $from[$i]) * $amount) + $from[$i];
    }
    return $rgb;
}
$string = 'testing out the fade function here';
//$string1 = strlen($string);
for ($j = 0; $j < 1; $j += .01) {
    $color = rgb(fade(array(255,0,0), array(0,255,0), $j));

    for($i=0;$i<strlen($string);$i++){
echo "<font style='color:$color'>$string[$i]</font>";
}

}

Is anyone able to tell me how to make it print the string just ONCE, with the fade properly applied to the string?

Thank you all so much for all of your time and expertise!

Answer 1

Check second example as it is more of what you're looking for.

Just use php to add the html elements and their ids or classes and then use css to give the gradient.

Example:

#id_of_element {      /*or class of element*/
    background: -webkit-linear-gradient(left, red , blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* the following would cover other browsers...not sure about IE */
    background: -webkit-linear-gradient(left, red , blue); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, red, blue); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, red, blue); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, red , blue); /* Standard syntax */
    /* then just add the -o- or -moz- etc. */
}

Depending on which angle or direction you want to gradient to go -> just use php (and/or javascript) to alter the value of the background: -webkit-linear-gradient(direction, color1 , color2);

THE FOLLOWING IS THE CODE EXAMPLE

Try the code below as an example:

Afterwards, open the page up in a web browser. It should have text that goes from black to white.

After APPEND this to the url:

?color1=FFFFFF&color2=000000

So the full url should look something like this:

http://yoursite.com/pageName.php?color1=FFFFFF&color2=000000

Now the gradient is reversed. because color1 originally started out as #000000 but the php switched it because of the value it had from the GET request.

Here is the code example:

<?php 
    $textOutput = '';
?>
<?php if(isset($_GET['color1']) && isset($_GET['color2'])):
    $textOutput = '';
    $userFirstInput  = $_GET['color1'];  // these are the posts or gets you send from your form
    $userSecondInput = $_GET['color2']; // these are the posts or gets you send from your form

    $firstColor = $userFirstInput;    // #FFFFFF for example
    $secondColor = $userSecondInput;  // #000000 for example

    $textOutput .= '.spans{';
    $textOutput .= 'background: -webkit-linear-gradient(left, #'. $firstColor . ', #'.$secondColor .');';
    $textOutput .= '-webkit-background-clip: text;';
    $textOutput .= '-webkit-text-fill-color: transparent;';
?>
<?php else:
    $textOutput = '';
    $textOutput .= '.spans{';
    $textOutput .= 'background: -webkit-linear-gradient(left, #000000 , #FFFFFF);';
    $textOutput .= '-webkit-background-clip: text;';
    $textOutput .= '-webkit-text-fill-color: transparent;';
?>
<?php endif ?>
<!DOCTYPE html>
<html>
<head>
<style>
    <?php echo $textOutput; ?>
</style>
<span class="spans">IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII</span>
</body>
</html>

If you need help getting the user input, that I can help with as well. I use ajax to send a post or get up to PHP and check/sanitize the inputs.

Answer 2

Why don't do like that

$string = 'My text'
$count = 0;
for($i=0,$i<=255,$i++){
   for($i_i=0,$i_i<=255,$i_i++){
      for($i_i_i=0,$i_i_i<=255,$i_i_i++){
            echo '<span style="color:rgb('.$i.','.$i_i.','.$i_i_i.')">'.$string[$count].'</span>';
            if($count == strlen($string))break;
            $count++;
      }
      if($count == strlen($string))break;
   }
   if($count == strlen($string))break;
}

Or set some other values of $i... to get another colors.