[SOLVED] Gradient Text

cheechm · April 21, 2008

Hi,

I can create my gradient:

grad.php

<?php

header("Content-type: image/png");

//GET TYPE (THAT USER WANTS)
$type = @$_GET['type'];
if ($type == false) {
    $type = 'top';
}

//GET DIMENTIONS (THAT USER WANTS)
$height = intval(@$_GET['height']);
if ($height == 0) {
    $height = 50;
}
$width = intval(@$_GET['width']);
if ($width == 0) {
    $width = 100;
}

//GET HEX COLOURS (THAT USER WANTS)
$start_colour = $_GET['start_colour'];
if ($start_colour == false) {
    $start_colour = '000000';
}
$end_colour = $_GET['end_colour'];
if ($end_colour == false) {
    $end_colour = 'FFFFFF';
}

//CONVERT HEX COLOURS TO RGB
$hex_r  = substr($start_colour, 0, 2);
$hex_g = substr($start_colour, 2, 2);
$hex_b = substr($start_colour, 4, 2);

$start_r = hexdec($hex_r);
$start_g = hexdec($hex_g);
$start_b = hexdec($hex_b);

$hex_r  = substr($end_colour, 0, 2);
$hex_g = substr($end_colour, 2, 2);
$hex_b = substr($end_colour, 4, 2);

$end_r = hexdec($hex_r);
$end_g = hexdec($hex_g);
$end_b = hexdec($hex_b);

//CREATE BLANK IMAGE
$image = @imagecreate($width, $height) or die("Cannot Initialize new GD image stream");

if ($type == 'top') {
    
    //LOOP THROUGH ALL THE PIXELS
    for($y = 0; $y < $height; $y++) {
        
        //LOOP THROUGH ROW
        for($x=0; $x < $width; $x++) {
            
            //CALCULATE THIS ROWS RGB COLOURS
            
            if ($start_r == $end_r) {
                $new_r = $start_r;
            }
            $difference = $start_r - $end_r;
            $new_r = $start_r - intval(($difference / $height) * $y);
            
            //====
            
            if ($start_g == $end_g) {
                $new_g = $start_g;
            }
            $difference = $start_g - $end_g;
            $new_g = $start_g - intval(($difference / $height) * $y);
            
            //===
            
            if ($start_b == $end_b) {
                $new_b = $start_b;
            }
            $difference = $start_b - $end_b;
            $new_b = $start_b - intval(($difference / $height) * $y);
            
            //===
            
            //ALLOCATE THE COLOR
            $row_color = imagecolorresolve($image, $new_r, $new_g, $new_b);
            
            //CREATE ROW OF THIS COLOR
            imagesetpixel($image, $x, $y, $row_color);
            
        }
        
    }

}

if ($type == 'left') {
    
    //LOOP THROUGH ALL THE PIXELS
    for($x = 0; $x < $width; $x++) {
        
        //LOOP THROUGH COLUMN
        for($y=0; $y < $height; $y++) {
            
            //CALCULATE THIS ROWS RGB COLOURS
            
            if ($start_r == $end_r) {
                $new_r = $start_r;
            }
            $difference = $start_r - $end_r;
            $new_r = $start_r - intval(($difference / $width) * $x);
            
            //====
            
            if ($start_g == $end_g) {
                $new_g = $start_g;
            }
            $difference = $start_g - $end_g;
            $new_g = $start_g - intval(($difference / $width) * $x);
            
            //===
            
            if ($start_b == $end_b) {
                $new_b = $start_b;
            }
            $difference = $start_b - $end_b;
            $new_b = $start_b - intval(($difference / $width) * $x);
            
            //===
            
            //ALLOCATE THE COLOR
            $row_color = imagecolorresolve($image, $new_r, $new_g, $new_b);
            
            //CREATE ROW OF THIS COLOR
            imagesetpixel($image, $x, $y, $row_color);
            
        }
        
    }
    
}

imagepng($image);
imagedestroy($image);

?>

and index.php

<?php
if (isset($_GET['type']) == false) {
    $_GET['type'] = 0;
}
if (isset($_GET['width']) == false) {
    $_GET['width'] = 0;
}
if (isset($_GET['height']) == false) {
    $_GET['height'] = 0;
}
if (isset($_GET['start_colour']) == false) {
    $_GET['start_colour'] = 0;
}
if (isset($_GET['end_colour']) == false) {
    $_GET['end_colour'] = 0;
}
?>
<html>
<head>
    <title>My Web Sites</title>
    <link rel="shortcut icon" href="favicon.ico">
    <style>
        body {
            margin:0px;
            padding:25px;
            font-size:12px;
            font-family:arial;
            background-image:url(<?php print "grad.php?type={$_GET['type']}&width={$_GET['width']}&height={$_GET['height']}&start_colour={$_GET['start_colour']}&end_colour={$_GET['end_colour']}"; ?>);
            <?php
            if ($_GET['type'] == 'top') {
                print 'background-repeat:repeat-x;';
            }
            if ($_GET['type'] == 'left') {
                print 'background-repeat:repeat-y;';
            }
            ?>
            
        }
        table {
            font-size:12px;
            font-family:arial;
        }
    </style>
</head>
<body>

<form method='get' action='<?php print $_SERVER['PHP_SELF']; ?>'>
<center>
    <table width='200' cellspacing='5' cellpadding='0'>
        <tr>
            <td align='center' width='50%'>
                <img src='top.png'><br />
                Top to Bottom<br />
                <input type='radio' value='top' name='type' checked>
            </td>
            <td align='center' width='50%'>
                <img src='left.png'><br />
                Left to Right<br />
                <input type='radio' value='left' name='type'>
            </td>
        </tr>
    </table>
    <table width='' cellspacing='5' cellpadding='0'>
        <tr>
            <td align='right' width='20%'>Start Colour:</td><td width='80%'><input type='text' maxlength='6' value='FF0000' name='start_colour'></td>
        </tr>
        <tr>
            <td align='right'>End Colour:</td><td><input type='text' maxlength='6' value='0000FF' name='end_colour'></td>
        </tr>
        <tr>
            <td align='right'>Height:</td><td><input type='text' maxlength='4' value='100' name='height'> Pixels</td>
        </tr>
        <tr>
            <td align='right'>Width:</td><td><input type='text' maxlength='4' value='50' name='width'> Pixels</td>
        </tr>
        <tr>
            <td align='right'></td><td><input type='submit' value='Generate Gradient'></td>
        </tr>
        <tr>
            <td align='center' colspan='2'> </td>
        </tr>
        <tr>
            <td align='center' colspan='2'><?php print "<img src='grad.php?type={$_GET['type']}&width={$_GET['width']}&height={$_GET['height']}&start_colour={$_GET['start_colour']}&end_colour={$_GET['end_colour']}'>"; ?></td>
        </tr>
    </table>
</form>
</center>
</body>
</html>

How do I make it so that the gradient is the background to the text?

Thanks

cooldude832 · April 21, 2008

your going to have to draw the gradient pixel by pixel using a loop.

The trick is to use RGB mixing to go from color A-B and basically use percents to get from color A -> color B and draw it pixel by pixel

If you have a specific problem in what u posted say so

cheechm · April 21, 2008

That seems complicated. Could you give some guidance? (I am a PHP Noob)

cheechm · April 21, 2008

Or could you give me any links?

cheechm · April 21, 2008

Bump.

cheechm · April 22, 2008

Back to the top.

cheechm · April 22, 2008

Back up again.

cheechm · April 22, 2008

again?

DarkWater · April 22, 2008

Okay, so you create the gradient image in the script, and you want to use that as the background for text?

cheechm · April 22, 2008

I want it to mask the text.. (Like filling the text..) But not as a background.

DarkWater · April 22, 2008

I want it to mask the text.. (Like filling the text..) But not as a background.

So you want the TEXT to be gradient...ed (if that's a word), but not as the background? So, like, rainbow text, but not a rainbow? Another color?

cheechm · April 22, 2008

Yeh, the gradient I create with the above script.

Thanks

DarkWater · April 22, 2008

Yeh, the gradient I create with the above script.

Thanks

You know, it might be easier to do that with some clever font tags and PHP loops. How long is the text you want to have gradient..ed?

cheechm · April 22, 2008

Maximum of about 30 characters.

DarkWater · April 22, 2008

Maximum of about 30 characters.

I'm not sure if you can overlay the text like that. You could try using some loops to set the right HTML font color code for each character to make a pseudo-gradient.

cheechm · April 22, 2008

That sounds complicated. Could you explain a bit further please?

DarkWater · April 22, 2008

function prepareGradient($hexstart, $hexend, $sentence)

{

$steps = strlen($sentence);

$start['r'] = hexdec(substr($hexstart, 0, 2));

$start['g'] = hexdec(substr($hexstart, 2, 2));

$start['b'] = hexdec(substr($hexstart, 4, 2));

$end['r'] = hexdec(substr($hexend, 0, 2));

$end['g'] = hexdec(substr($hexend, 2, 2));

$end['b'] = hexdec(substr($hexend, 4, 2));

$step['r'] = ($start['r'] - $end['r']) / ($steps - 1);

$step['g'] = ($start['g'] - $end['g']) / ($steps - 1);

$step['b'] = ($start['b'] - $end['b']) / ($steps - 1);

$gradient = array();

for($i = 0; $i < $steps; $i++)

{

$rgb['r'] = floor($start['r'] - ($step['r'] * $i));

$rgb['g'] = floor($start['g'] - ($step['g'] * $i));

$rgb['b'] = floor($start['b'] - ($step['b'] * $i));

$hex['r'] = sprintf('%02x', ($rgb['r']));

$hex['g'] = sprintf('%02x', ($rgb['g']));

$hex['b'] = sprintf('%02x', ($rgb['b']));

$gradient[] = implode(NULL, $hex);

}

$letters = array();

for($i = 0; $i <= $steps; $i++)

{

$letters[] = $sentence{$i};

}

$grad = array();

for($j = 0; $j < $steps; $j++)

{

$grad[$gradient[$j]] = $letters[$j];

}

return $grad;

}

function gradient($hexstart, $hexend, $sentence)

{

$gradient = prepareGradient($hexstart, $hexend, $sentence);

foreach($gradient as $key => $value)

{

$value = str_replace('&','&',$value);

$value = str_replace('<','<',$value);

$value = str_replace('>','>',$value);

echo ''.$value.'';

}

Something like that. $hexstart is the starting color, $hexend is the ending color, and $sentence is the string. Use gradient("00000", "FFFFF", "I am cool!"); and it'll echo "I am cool!" in that gradient, right where you call the function. I could change it so it returns the function if you add a 1 as an argument to the end if you want.

cheechm · April 22, 2008

You are very cool.. lol.

Thanks for everything

All fixed..

DarkWater · April 22, 2008

Everything worked okay?

cheechm · April 22, 2008

Yeeh.. Perfectly. Thanks

cheechm · April 23, 2008

Just realised, I want the gradient to go downwards instead of across. So "darker" at the top and "lighter" at the bottom. I don't mind if it creates an image instead.

Thanks

DarkWater · April 23, 2008

Here, apply this change to the gradient() function:

function gradient($hexstart, $hexend, $sentence, $darktolight=0)

{

$gradient = prepareGradient($hexstart, $hexend, $sentence);

if ($darktolight == 1) {

$gradient = array_reverse($gradient);

}

foreach($gradient as $key => $value)

{

$value = str_replace('&','&',$value);

$value = str_replace('<','<',$value);

$value = str_replace('>','>',$value);

echo ''.$value.'';

}

Just put a 1 as the final argument if you want it to go from $hexend to $hexstart. =)

DarkWater · April 23, 2008

Actually, don't. It's going to take some clever coding. I'll get on it right now.

DarkWater · April 23, 2008

Ah, I got it. Try this:

function gradient($hexstart, $hexend, $sentence, $darktolight=0)

{

$gradient = prepareGradient($hexstart, $hexend, $sentence);

if ($darktolight == 1) {

$grad_key = array_reverse(array_keys($gradient));

$grad_val = array_values($gradient);

$gradient = array_combine($grad_key, $grad_val);

}

foreach($gradient as $key => $value)

{

$value = str_replace('&','&',$value);

$value = str_replace('<','<',$value);

$value = str_replace('>','>',$value);

echo ''.$value.'';

}

There you go.

EDIT: Okay, I tried it on my server and it works. That WAS pretty clever. =D

cheechm · April 23, 2008

Thanks soo much. That reversed the text. Looks cool, but not right. Thanks.

The second one didn't.

If you look at this:

you can see it goes from the lighter blue at the top to the darker blue at the bottom.

I want to make an image like that, just I want it to be cut into text.

Notice the light orange to the dark orange?

Sign In

[SOLVED] Gradient Text

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information