Code Couch » Graphical http://www.codecouch.com The ramblings of two code monkeys Mon, 09 Jan 2012 21:11:09 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Creating a coloured gradient background without images http://www.codecouch.com/2006/05/creating-a-coloured-gradient-background-without-images/ http://www.codecouch.com/2006/05/creating-a-coloured-gradient-background-without-images/#comments Wed, 03 May 2006 10:33:23 +0000 Dan http://www.codecouch.com/?p=97 Update: This article was written long before CSS gradient support was widespread. I’d strongly advise using CSS to create gradients in an modern web browswer!

Here’s some code to dynamically create a gradient background without using images. The width and/or height of each colour band, as well as the total number of colour bands can be easily changed.

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.

To add more colour bands, simply add more sets of parameters to the relevant “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).

<!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>

Post to Twitter

]]> http://www.codecouch.com/2006/05/creating-a-coloured-gradient-background-without-images/feed/ 0