Gradients made easy!

[Natch]

OK - now we all know how to make gradients using our weapon-of-choice image editor, but surely it could be easier than that ?

Well from the guy who brought you PNG24 transparent images in IE without that grey box rendering effect (https://vborg.vbsupport.ru/showthread.php?t=67413&highlight=PNG24) comes the next big thing - gradients on the fly! Dynamic images, that will be cached by your browser and can be written to the server if required (not yet implemented).

All you need is a text editor, and an array of Hex colour codes to match your forum, and you are ready to rock and roll.

Upload the following new files:

forumroot/images/gradients/gradient.php
forumroot/includes/class.gradient_image.php

The forumroot/images/gradients/gradient.php file has instructions for usage in the comments - the class I have used is from phpclasses.org - please read the licensing requirements if you plan on using this in a for-profit situation.

Demo: Demonstration of three different styles of gradient, with four different colours each (http://mobileforces.org/forums/images/gradients/demo.html) - take a look @ the html source for how I am doing each image...

Any questions?

[Jolten]

Thing is.. your two php files total 12 k... my gradient image can be 1/2 that or less. I'll stick with an image. it get's cached and only needs to be downloaded once as opposed to a repeated download of 12k for the php files every time a gradient is called.

[Natch]

Dynamic images, that will be cached by your browserAlso for those that DON'T have access to a gfx proggie like Photoshop, a tool like this might be useful, no?

Thanks for your considered answer tho'

EDIT// a futher note: (for those that are not put off by ScottW's ill-considered remarks):

The only thing downloaded by the client machine is the generated gradient image - the processing of the scripts (unless PHP has changed it's behaviour) is done server-side...

So there will be no difference between gradient images created using this script and any created by a graphics proggie... except maybe you will find the images created by this script to be MUCH SMALLER! example any of the gradients on my demo page above will be between around 150-200 bytes in size! and are cached by the browser ...

I really thought that this would be useful - I have found it useful - and if you are really worried about the size of the PHP scripts you can reduce them in size by removing the comments...

:shrugs: ah well - back to the basement ...

[Reeve of shinra]

This is cool to have. I can think of things this would be usual for.

[KW802]

Anybody have any thoughts on how to make the height dynamic based upon the height of a table row that it may be used in? :D

What I'm thinking is that for a table row that, based upon the contents of it, may be 75px but others with just small content may be 50px high so it'd be pretty cool to have the height of the gradient dynamically be set based upon the actual height of the row.

[Natch]

Unfortunately, you cannot pass javascript DOM values to a PHP script, as the PHP is parsed server-side, and the javascript DOM parsing is done client-side...

I've thought about things like this before, but it's really not possible...

What you would have to do is change the structure of the script to pas in height variables externally, rather then having them hard-coded....

[kbothe]

Thanks Natch, great work man!

[HPIA]

The link doesn't seem to work...

[deejayh]

HPIA,

If you look at the date = 22. Jul 2004 04:56
It is some time ago!!!:surprised:

[Josh1]

The link works perfectly lol.

[Xoligy]

The demo doesn't work for me either.