View Full Version : Color Blending?

06-30-2004, 07:43 PM
Hi everyone I was wondering if anyone knows a way to blend 1 color into another? :)

06-30-2004, 08:02 PM
Using Javascript? Or using like a couple of cans of paint?

Sorry, I really don't know! This is probably not the right place for this thread.. hopefully a Moderator will move it the appropriate place.

Good luck,

06-30-2004, 08:54 PM
I want to do it using Javascript if at all possible :D

06-30-2004, 09:24 PM
You're going to have to give a lot more information than that. What are you trying to do anyway?

Oh, are you trying to say change the colour of a table cell, or background colour or font colour or something?

Well that's done using hexadecimal numbering. Check out this site:

Basically you RRGGBB where RR is the amount of red, GG is the amount of green, and BB is the amount of BB. 00 is none, FF is full, and any hexadecimal number in between is the amount of that colour that you want.

That way, you're 'blending' between the colour red, green, and blue.

Hope that makes sense. Good luck,

06-30-2004, 10:10 PM
No what I mean is that the color starts of at lets say magenta and it ends in lets say red so the magenta changes into red as it get further along
And I mean on a vertical or horizontal bar so you get something like:
But I want to apply it to a div or a span and hav it as the background color(s) :D :)
So am I in the right forum? If I am can someone please help me? :thumbsup: :D
Thanks to anyone and everyone that helps :thumbsup:

06-30-2004, 10:27 PM
As a background colour?? I don't know for sure, but I don't think this is possible. You'd have to create an image that had this 'fading' look and put that as the background image of the div.

Other than that, I don't think it's possible.

Something you might be able to do is create a table with a thousand columns each 1px wide and fill the table cells with the appropriate values of hexadecimal start at magenta and finishing at red.

You could probably write a Javascript routine to do that, but I'm not sure how you'd get that as a background colour still..

Perhaps someone else on the board has some thoughts on this.


06-30-2004, 10:46 PM
I know for a fact its possible I have seen it but I just cant remember where.

And creating a 1000 table cells all 1px each would result in very long load times and also I might want to put some text over the blending background.

And a picture would be pointless because once I have done it with Magenta to Red then I'm obvioiusly gonna try different combos which would result in tons of pictures.

But thanks for your help :) :thumbsup:

06-30-2004, 10:51 PM
If this can't be done in javascript what can it be done in? :)

06-30-2004, 10:59 PM
I know that the table option would take a long time and you wouldn't be able type over it (unless you used layers.. but I don't know anything about layers, just remember seeing the term someplace).

As for the picture option, you might be able to do it with PHP. PHP allows you to create images, and it might be possible to pass certain parameters, such as height, width, starting colour, and finishing colour, and have the PHP routine create the picture you want based on that.

Unfortunately, that's all the help I can provide. Check out this link (and Google) for more information on the PHP option:

Good luck,

06-30-2004, 11:12 PM
Note: IE-only.

Hope that helps!

Happy coding! :)

06-30-2004, 11:16 PM
Microsoft has some proprietary functions within CSS that will do blending/shading. Try the css forum.

Willy Duitt
06-30-2004, 11:18 PM
You could use a for or while loop to add 1 to the hexidecimal value. I had a script which did that but can not find it ATM. Try searching the forum because I'm sure I posted it at one time....


06-30-2004, 11:37 PM
I have found what I was looking for l'll post it in my webspace so you can see it. Its IE only I think don't know what versions either but it'll do.
:thumbsup: :thumbsup: :thumbsup: :D :D :D
l'll post the address soon :cool:

07-01-2004, 10:13 AM
Just comment if you want to make that effect constant with those 2 colors doing anything else than using a picture is a waste of load time and cpu time.

07-01-2004, 01:39 PM

doing anything else than using a picture is a waste of load time and cpu time.

Because what I have found is relatively short an loads within seconds. :thumbsup:

07-01-2004, 07:16 PM
I said I'd post the address but I didn't want to waste my webspace on it so l'll post the code instead
here it is:
<td style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='magenta', endColorStr='red', gradientType='1')" width=100 height=100>
</html>Note its IE only.

07-05-2004, 03:34 PM
Does anyone know scripts, css ect... that do what the above does but is more compatible with other browsers? :)

07-05-2004, 03:40 PM
there's an equivalent Moz method. can't remember how it goes, but if you go to www.mozilla.org, you maybe could find out.

07-05-2004, 04:29 PM
I know this is off the subject but can people provide links to some web browsers so I can download them and others can download them and test their scripts in different platform web browsers. :)

07-05-2004, 04:35 PM
I know this is off the subject but can people provide links to some web browsers so I can download them and others can download them and test their scripts in different platform web browsers. :)

here you go: http://browsers.evolt.org/

07-05-2004, 04:48 PM
Thanks...... :)

07-05-2004, 05:48 PM
Does anyone know where to get Netscape? It isn't listed on http://browsers.evolt.org/ :thumbsup: :D

07-05-2004, 05:55 PM
errrrrrrrrrrrr... Netscape Navigator??


07-05-2004, 05:59 PM
Netscape Navigator thats the one thanks ;)

07-05-2004, 06:01 PM
Does it have an official site? :)

07-05-2004, 06:07 PM
Doesn't matter I have found it :thumbsup: :thumbsup:

07-05-2004, 06:14 PM
NN4.x is no longer supported by Netscape, so why do you need to develop for it?

07-05-2004, 06:23 PM
NN4 was called "Netscape Communicator," if I remember correctly.

Happy coding! :)

07-06-2004, 12:28 PM
NN4 was called "Netscape Communicator," if I remember correctly.

not quite.

Communicator referred to the suite of Netscape applications which included Navigator. To get Navigator you had download Communicator and install that. But there was also a standalone version.

anyway, it's dead. people might still be using, but it's no longer being developed or supported. in fact, there is no more Netscape development of any description really - NS7.1 is merely a rebadged Mozilla 1.4!

07-06-2004, 08:43 PM