Jump to content

[SOLVED] Gradient Text

cheechm

By cheechm
in PHP Coding Help

Recommended Posts

cheechm Regular Member

cheechm

Posted
Posted

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

Link to comment
https://forums.phpfreaks.com/topic/102160-solved-gradient-text/
Share on other sites
  • Replies 50
  • Created
  • Last Reply
DarkWater Member

DarkWater

Posted
Posted

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 '<font color="#'.$key.'">'.$value.'</font>';

    }

}

 

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.

Link to comment
https://forums.phpfreaks.com/topic/102160-solved-gradient-text/#findComment-524453
Share on other sites
DarkWater Member

DarkWater

Posted
Posted

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 '<font color="#'.$key.'">'.$value.'</font>';

    }

}

 

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

 

Link to comment
https://forums.phpfreaks.com/topic/102160-solved-gradient-text/#findComment-525416
Share on other sites
DarkWater Member

DarkWater

Posted
Posted

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 '<font color="#'.$key.'">'.$value.'</font>';

    }

}

 

There you go.

 

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

Link to comment
https://forums.phpfreaks.com/topic/102160-solved-gradient-text/#findComment-525423
Share on other sites
cheechm Regular Member

cheechm

Posted
  • Author
Posted

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

The second one didn't.

If you look at this:

Step1.png

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?

gradient_text.gif

Link to comment
https://forums.phpfreaks.com/topic/102160-solved-gradient-text/#findComment-525430
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.