Creating a colour gradient background without images - Javascript FAQ - Tek-Tips:
Graphics Display
Creating a colour gradient background without images
Here's some code to dynamically create a gradient background without using images.
The width / height of each colour band, as well as the total number of colour bands can be changed easily.
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="en" />
<title>Gradient Background</title>
<style type="text/css">
body {
padding: 0px;
margin: 20px;
background-color: #00CCFF;
}
#fadeBandsV {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 80px;
z-index: 1;
}
#fadeBandsH {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
z-index: 1;
}
#fadeBandsV div {
overflow: hidden;
position: absolute;
width: 100%;
}
#fadeBandsH div {
overflow: hidden;
position: absolute;
height: 200px;
}
#pageContent {
position: relative;
z-index: 2;
}
</style>
<script type="text/javascript">
<!--
// do not call this function directly - use createGradientV or createGradientH instead
function createGradient(direction, args) {
var bandSets = args.length / 4;
var startPos = 0;
for (var bandSetLoop=0; bandSetLoop<bandSets; bandSetLoop++) {
fadeFromColour = args[bandSetLoop * 4];
fadeToColour = args[bandSetLoop * 4 + 1];
bandSize = args[bandSetLoop * 4 + 2];
fadeSteps = args[bandSetLoop * 4 + 3];
// calculate stepped colour values for each band
var colourSteps = [fadeFromColour.concat()]; // ensure first colour is the start colour
for (var bandLoop=1; bandLoop<fadeSteps; bandLoop++) {
colourSteps[bandLoop] = [];
for (var rgbLoop=0; rgbLoop<3; rgbLoop++) {
colourSteps[bandLoop][rgbLoop] = Math.round(colourSteps[bandLoop-1][rgbLoop] + ((fadeToColour[rgbLoop] - colourSteps[bandLoop-1][rgbLoop]) / (fadeSteps - bandLoop)));
}
}
// now draw each band
if (direction == 'V') {
for (var bandLoop=0; bandLoop<fadeSteps; bandLoop++) {
document.getElementById('fadeBandsV').appendChild(aDiv = document.createElement('div'));
aDiv.style.height = bandSize + 'px';
aDiv.style.top = startPos + (bandSize * bandLoop) + 'px';
aDiv.style.backgroundColor = 'rgb(' + colourSteps[bandLoop][0] + ',' + colourSteps[bandLoop][1] + ',' + colourSteps[bandLoop][2] + ')';
}
} else {
for (var bandLoop=0; bandLoop<fadeSteps; bandLoop++) {
document.getElementById('fadeBandsH').appendChild(aDiv = document.createElement('div'));
aDiv.style.width = bandSize + 'px';
aDiv.style.left = startPos + (bandSize * bandLoop) + 'px';
aDiv.style.backgroundColor = 'rgb(' + colourSteps[bandLoop][0] + ',' + colourSteps[bandLoop][1] + ',' + colourSteps[bandLoop][2] + ')';
}
}
startPos += fadeSteps * bandSize;
}
}
// createGradientV - creates a vertical gradient (North to South)
// Parameters: createGradientV takes a single set, or multiple sets of, 4 arguments:
// argument 1: fadeFromColour = an array of R,G,B colours to fade from (for example, [0, 0, 255] == #0000FF)
// argument 2: fadeToColour = an array of R,G,B colours to fade to (for example, [0, 204, 255] == #00CCFF)
// argument 3: bandHeight = height of each colour band
// argument 4: fadeSteps = number of colour bands used for the gradient (should be at least 2)
function createGradientV() {
if (arguments.length < 1 || arguments.length % 4 != 0) {
alert('Incorrect usage. Number of parameters must be a multiple of 4!');
return;
}
createGradient('V', arguments);
}
// createGradientH - creates a horizontal gradient (West to East)
// Parameters: createGradientH takes a single set, or multiple sets of, 4 arguments:
// argument 1: fadeFromColour = an array of R,G,B colours to fade from (for example, [0, 0, 255] == #0000FF)
// argument 2: fadeToColour = an array of R,G,B colours to fade to (for example, [0, 204, 255] == #00CCFF)
// argument 3: bandHeight = height of each colour band
// argument 4: fadeSteps = number of colour bands used for the gradient (should be at least 2)
function createGradientH() {
if (arguments.length < 1 || arguments.length % 4 != 0) {
alert('Incorrect usage. Number of parameters must be a multiple of 4!');
return;
}
createGradient('H', arguments);
}
function drawGradient() {
createGradientV([255, 0, 0], [255, 255, 0], 3, 50, [255, 255, 0], [0, 0, 255], 3, 50, [0, 0, 255], [0, 204, 255], 3, 50);
createGradientH([255, 0, 0], [255, 255, 255], 3, 50, [255, 255, 255], [0, 0, 255], 3, 50);
}
//-->
</script>
</head>
<body onload="drawGradient();">
<div id="fadeBandsV"></div>
<div id="fadeBandsH"></div>
<div id="pageContent">
<h1>A test heading</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras lorem. Proin laoreet fringilla sem. Pellentesque malesuada, urna tristique ornare feugiat, turpis wisi ultrices nisl, ac vulputate dolor justo non sapien. Sed fermentum velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam at nulla. Maecenas tortor nulla, adipiscing eget, auctor sed, cursus id, quam. Suspendisse at sem nonummy orci lobortis ultrices. Proin odio est, dictum id, dictum nec, ullamcorper sit amet, sem. Proin ullamcorper lacus vitae risus. Nulla feugiat posuere erat. In nec est ac eros lacinia congue. Suspendisse potenti. In a ipsum rhoncus ipsum volutpat consectetuer.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras lorem. Proin laoreet fringilla sem. Pellentesque malesuada, urna tristique ornare feugiat, turpis wisi ultrices nisl, ac vulputate dolor justo non sapien. Sed fermentum velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam at nulla. Maecenas tortor nulla, adipiscing eget, auctor sed, cursus id, quam. Suspendisse at sem nonummy orci lobortis ultrices. Proin odio est, dictum id, dictum nec, ullamcorper sit amet, sem. Proin ullamcorper lacus vitae risus. Nulla feugiat posuere erat. In nec est ac eros lacinia congue. Suspendisse potenti. In a ipsum rhoncus ipsum volutpat consectetuer.</p>
</div>
</body>
</html>
You can use "createGradientV" to create a vertical gradient (North to South), or "createGradientH" to create a horizontal gradient (West to East).
Each of the functions takes one or more sets of 4 parameters, documented in the code above.
To add more colour bands, simply add more sets of parameters to the "createGradient" method calls. To have less colour bands, remove any extra "createGradient" method calls.
This code has been tested working on IE/Win 6, NN/Win 7, Opera/Win 7, FF/Win, FF/Mac, and Safari/Mac.
It does NOT work on IE/Mac (tested on version 5.22).
No comments:
Post a Comment