PLEASE RELOAD

"Grads On The Fly"




One of the things that makes PHP special is the ability to create images "On The Fly". They do not exist until the page is loaded, at which point they are created. Once again, you do not have to know all the ins and outs of PHP to make some of these images. There are many scripts available to create various things and you can use them with a few simple steps.




There's nothing more beautiful than gradient images. This script will make them. You direct the script what to make by stipulating starting and ending colors, width, height, and whether the gradient is to be reflective or not. All of these values are housed in an image tag. Yes, an image tag just like you use all the time. Here's what one of these special tags looks like.

<img src="OTF-Grad-Maker.php?d=v&h=50&r=y&s=0,0,69&e=0,153,255" width=250 height=50>

The OTF-Grad-Maker is the script that does the work. You NEVER touch this script. Here, the script in is the same directory, but it can be anywhere in your webspace. The image tag values are all you change. So let's disect this image tag and show you exactly what it all means. The ampersands (&) just separate the values.

  • d=Direction
    d=h/v (horizontal=0 angle) or (vertical=90 angle)
  • h= height or length (ex. 50) more on this later
  • r=y/n reflected Yes or No
    (y=color 1 to color 2 to color 2 to color 1. n=color 1 to color 2.)
  • s=255,0,0 (start color r,g,b)
  • e=0,0,255 (end color r,g,b)
  • Width as usual
  • Height as usual

You can also add other things to the tag such as align=center, and you can put them in td cells of tables. They can also be used as background images in tables or cells.

<td background="OTF-Grad-Maker.php?d=v&h=50&r=y&s=0,0,69&e=0,153,255" width=250 height=50>

Now let's take a look at some of these gradients and their values.






These are both horizontal, non reflective. Black is the starting color for the left image and black is the end color for the right image, giving you 90 and -90 angles. h as the smallest value.

<img src=OTF-Grad-Maker.php?d=h&h=50&r=n&s=0,0,0&e=30,144,255 width=100 height=50>

<img src=OTF-Grad-Maker.php?d=h&h=50&r=n&s=30,144,255&e=0,0,0 width=100 height=50>








These are both horizontal, reflective. Black is the starting color for the top image and black is the end color for the bottom image, giving you 90 and -90 angles. h as the smallest value.

<img src=OTF-Grad-Maker.php?d=h&h=50&r=n&s=0,0,0&e=30,144,255 width=100 height=50>

<img src=OTF-Grad-Maker.php?d=h&h=50&r=n&s=30,144,255&e=0,0,0 width=100 height=50>










These are both horizontal, non reflective. They are written as td cell backgrounds. Black is the starting color for the top image and black is the end color for the bottom image, giving you 90 and -90 angles. h as the largest value.

<table border=0><tr><td background=OTF-Grad-Maker.php?d=h&h=100&r=n&s=0,0,0&e=30,144,255 width=100 height=50></td></tr></table>

<table border=0><tr><td background=OTF-Grad-Maker.php?d=h&h=100&r=n&s=30,144,255&e=0,0,0 width=100 height=50></td></tr></table>










These are both horizontal, reflective. They are written as td cell backgrounds. Black is the starting color for the top image and black is the end color for the bottom image, giving you 90 and -90 angles. h as the smallest value on the top one and half the smallest on the bottom..

<table border=0><tr><td background=OTF-Grad-Maker.php?d=h&h=50&r=y&s=0,0,0&e=30,144,255 width=100 height=50></td></tr></table>

<table border=0><tr><td background=OTF-Grad-Maker.php?d=h&h=25&r=y&s=30,144,255&e=0,0,0 width=100 height=50></td></tr></table>




This zip file contains the Grad-Maker script. Do not edit this script. There is also a text file with the image tag value definitions. Upload this to your webspace and unzip; and you're ready to go.

Zip Here

The better you know tables and their syntax the more you'll be able to do with these special images. On the following pages you will find some examples with CCP code. If using it as a background the h can give you many effects. Use any number between the highest and zero. These tags can also be put in PHP loops.





Ex. 1 Ex. 2 Ex. 3 Ex. 4 Ex. 5
Index Header SiteMap