Background gradients are usually done in space; the color gradually changes from one part of the screen to another. These gradients are done in time.
Since images only show the screen at one moment, it is better to view a demo:
To start a new gradient, just click the screen.
This is the code:
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head profile=”http://gmpg.org/xfn/11″>
<title>Temporal Gradients</title>
<style>
body {margin-left:0;margin-right:0;font:normal normal normal 15px Arial;}
a{ text-decoration: }:link { color: rgb(0, 0, 255) }:visited {color :rgb(100, 0,100) }:hover { }:active { }
</style>
</head>
<body>
<select id=”s1″ onchange=’init();’>
<option>Choose Gradient</option>
<option>Blue to Red</option>
<option>Green to Red</option>
<option>Blue to Green</option>
<option>Darker to Lighter Blue</option>
</select>
<div id=”grad” style = “position:absolute;left:0;top:0;width:100%;height:100%; visibility: hidden” onclick=’document.getElementById(“grad”).style.visibility = “hidden”;’></div>
<script type=”text/javascript”>
var r; var b; var clr; var si; var cnt = 0; var g; var binc = true;
function init() {
if (document.getElementById(“s1”).value == “Blue to Red”) {
g = 0;
r = 0;
b = 255;
}
if (document.getElementById(“s1”).value == “Green to Red”) {
b = 0
r = 0;
g = 255;
}
if (document.getElementById(“s1”).value == “Blue to Green”) {
g = 0;
r = 0;
b = 255;
}
if (document.getElementById(“s1”).value == “Darker to Lighter Blue”) {
g = 0;
r = 0;
b = 80;
}
clearInterval(si);
cnt = 0;
document.getElementById(“grad”).style.visibility = “visible”;
si = setInterval(“tgrad2()”,100);
}
function tgrad2() {
if (document.getElementById(“s1”).value == “Blue to Red”) {
if (cnt % 2 == 0) {
r += 5;
if (r > 255) r = 255;
if (r == 255 && b > 0) {
b -= 5;
}
if (b == 0) cnt ++;
}
if (cnt % 2 == 1) {
b += 5;
if (b > 255) b = 255;
if (b == 255 && r > 0) {
r -= 5;
}
if (r == 0) cnt ++;
}
}
if (document.getElementById(“s1”).value == “Green to Red”) {
if (cnt % 2 == 0) {
r += 5;
if (r > 255) r = 255;
if (r == 255 && g > 0) {
g -= 5;
}
if (g == 0) cnt ++;
}
if (cnt % 2 == 1) {
g += 5;
if (g > 255) g = 255;
if (g == 255 && r > 0) {
r -= 5;
}
if (r == 0) cnt ++;
}
}
if (document.getElementById(“s1”).value == “Blue to Green”) {
if (cnt % 2 == 0) {
g += 5;
if (g > 255) g = 255;
if (g == 255 && b > 0) {
b -= 5;
}
if (b == 0) cnt ++;
}
if (cnt % 2 == 1) {
b += 5;
if (b > 255) b = 255;
if (b == 255 && g > 0) {
g -= 5;
}
if (g == 0) cnt ++;
}
}
if (document.getElementById(“s1”).value == “Darker to Lighter Blue”) {
if (binc) {
b += 2;
if (b > 210) {
binc = false;
b = 210;
}
}
if (! binc) {
b -= 2;
if (b < 80) {
binc = true;
b = 80;
}
}
}
clr = “rgb(” + r + “,” + g + “,” + b + “)”;
document.getElementById(“grad”).style.backgroundColor = clr;
//alert(document.getElementById(“grad”).style.backgroundColor + ” ” + cnt ) ;
}
</script>
</body></html>
The code for a typical two color gradient is as follows:
if (document.getElementById(“s1”).value == “Blue to Red”) {
if (cnt % 2 == 0) {
r += 5;
if (r > 255) r = 255;
if (r == 255 && b > 0) {
b -= 5;
}
if (b == 0) cnt ++;
}
if (cnt % 2 == 1) {
b += 5;
if (b > 255) b = 255;
if (b == 255 && r > 0) {
r -= 5;
}
if (r == 0) cnt ++;
}
}
This gradient starts with blue already at maximum value and red at minimum.
A counter cnt is at 0;
A timer calls the function at 100 ms intervals, at which the red value is increased.
When the red reaches maximum, the blue is decreased.
When the blue reaches minimum, the counter is incremented.
This causes a reverse, with first the blue increasing and then the red decreasing.
When red reaches minimum the counter is incremented again.
The result is whenever the counter is even red increases and then blue decreases, and when it is odd blue increases and then red decreases.
Making a gradient within a single color is even simpler:
f (document.getElementById(“s1”).value == “Darker to Lighter Blue”) {
if (binc) {
b += 2;
if (b > 210) {
binc = false;
b = 210;
}
}
if (! binc) {
b -= 2;
if (b < 80) {
binc = true;
b = 80;
}
}
A boolean binc is initially true and the blue value is increased.
When the blue value reaches 210 binc is set to false and the value decreases.
When it drops to 80, binc is reset to true and the value increases until it reaches 210, at which time it starts decreasing again.
Tips & Tricks 