Here is a small PHP function I wrote that emulates a gradient fill of an image.
Disclaimer : there are probably existing alternatives or classes, maybe in PEAR. I didn't check. I wanted to write a function myself, as part of my GD training grounds.
Usage
The function is packaged as a PHP class, the code you need is something like :
-
require_once('/path/to/gd-gradient-fill.php');
-
$image = new gd_gradient_fill($width,$height,$direction,$startcolor,$endcolor,$step);
The class call needs 5 arguments and accepts an optional 6th :
- integer $width
Width of the image - integer $height
Height of the image - string $direction
The shape or direction of the gradient, which can be any of : vertical, horizontal, ellipse, ellipse2, circle, circle2, rectangle, diamond. - string $startcolor
Gradient start color, 3 or 6 digit hexadecimal ("#ff0" or "#dd4578") - string $endcolor
Gradient end color - Optional : $step
Breaks the gradient smooth blending
Results
Here are a few examples of gradients from color #101040 to #a1a1ff. Hover the image for some unnecessary explanation.
Of course, the function handles non-square images just fine as well.
Get the function
- gd-gradient-fill.txt (download and save as .php)
- gd-gradient-fill.php (highlighted code, copy and paste in a blank file, but do not download as is)
Credits
I started from file header-img.php, part of WordPress core file, which contains a similar hack to draw a gradient fill from lines. I believe this smart code is from Andy Skelton.
If you happen to use this function in any project, be sure to let me know. This makes my day :)
Related posts
Shorter URL
Want to share or tweet this page? Please use this short URL: http://ozh.in/kw
Metastuff
52 Blablas
Pages: [6] 5 4 3 2 1 » Show All
Pages: [6] 5 4 3 2 1 » Show All
commented, on 29/Jun/10 at 1:01 am # :
We have done a lot of work getting SVG (Vector Graphics) into HTML.
Me and Josep are trying to integrate your work into http://www.irunmywebsite.com/raphael/SVGTOHTML_LIVE.php
We are at 0.04 at time of typing this.
I'm not sure how long this will be useful to us, but it is definitely great you did it.
Charles
said, on 21/Apr/10 at 9:46 pm # :
Ozh thank for your nice work
We implemented your code here
http://irunmywebsite.com
radial gradients in paths for Raphael JS
Changes
http://cloud.github.com/downloads/josepssv/RadialGradientPaths/radialgradient003.txt