With this JavaScript code example, you can easy make CSS gradient background, [URL="http://www.javascriptbank.com/=JavaScript color gradient"]JavaScript color gradient</a... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Step 2: Copy & Paste HTML code below in your BODY section
HTML
How to setup
Step 1: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Code:
<script type="text/javascript"> // Created by: Joseph Myers | http://www.codelib.net/ // This script downloaded from www.JavaScriptBank.com function colorscale(hexstr, scalefactor) { /* declared variables first, in order; afterwards, undeclared local variables */ var r = scalefactor; var a, i; if (r < 0 || typeof(hexstr) != 'string') return hexstr; hexstr = hexstr.replace(/[^0-9a-f]+/ig, ''); if (hexstr.length == 3) { a = hexstr.split(''); } else if (hexstr.length == 6) { a = hexstr.match(/(\w{2})/g); } else return hexstr; for (i=0; i<a.length; i++) { if (a[i].length == 2) a[i] = parseInt(a[i], 16); else { a[i] = parseInt(a[i], 16); a[i] = a[i]*16 + a[i]; } } var maxColor = parseInt('ff', 16); function relsize(a) { if (a == maxColor) return Infinity; return a/(maxColor-a); } function relsizeinv(y) { if (y == Infinity) return maxColor; return maxColor*y/(1+y); } for (i=0; i<a.length; i++) { a[i] = relsizeinv(relsize(a[i])*r); a[i] = Math.floor(a[i]).toString(16); if (a[i].length == 1) a[i] = '0' + a[i]; } return a.join(''); } function showrainbow(f) { var colorcell, hex, i, nhex; hex = f.orig.value; hex = hex.replace(/\W/g, ''); nhex = colorscale(hex, f.scalef.value-0); if (nhex != hex) { f.outp.value = nhex; colorcell = document.getElementById('origcolor'); i = document.getElementById('newcolor'); colorcell.style.background = '#' + hex; i.style.background = '#' + nhex; for (i=0; i<256; i++) { colorcell = document.getElementById('colorcell'+i); nhex = colorscale(hex, i/(256-i)); colorcell.style.background = '#' + nhex; colorcell.nhexvalue = nhex; } } } </script>
HTML
Code:
<div style="width: 400px;"> <form> <p> Original color: <input type="text" name="orig" value="339990"><br> Scale factor: <input type="text" name="scalef" value="4"><br> <input type="button" value="Output" onclick="showrainbow(this.form)"> <input type="text" readonly name="outp" style="border: none;"> </p> </form> <table width="150"> <tr> <td width="50%" height="50" id="origcolor">Original</td> <td width="50%" id="newcolor">New</td></tr> </table> <table cellpadding="0" cellspacing="0"> <tr> <script type="text/javascript"> for (i=0; i<256; i++) document.write('<td width="10" height="50" id="colorcell', i, '" onclick="document.forms[0].outp.value = this.nhexvalue"></td>'); </script> </tr> </table> </div>
Comment