Tips
All Tips ]

Multi-coloured, shadowed text

Had enough of black text on a white background? Dare to be different with colours and shadows using this script.



To obtain this effect, insert the following script in the header of your page, between the tags <head> and </head>:

<SCRIPT LANGUAGE="JavaScript">
        
        var hexa = "0123465789ABCDEF";
        
        function DecToHexa(DecNb) {
            x = Math.floor(DecNb / 16);
            h = hexa.charAt(x);
            x = DecNb % 16;
            h += hexa.charAt(x);
        
            return h;
        }
        
        function Degrade(dr,dg,db,fr,fg,fb,texte) {
            steps = texte.length;
            cr = dr; cg = dg; cb = db;
            sr = (fr - dr) / steps;
            sg = (fg - dg) / steps;
            sb = (fb - db) / steps;
            
            for (var x = 0; x <= steps; x++) {
                document.write('<FONT COLOR="#' + DecToHexa(cr) + DecToHexa(cg) + DecToHexa(cb) + '">');
                document.write(texte.charAt(x));
                document.write('</FONT>');
                cr += sr; cg += sg; cb += sb;
            }
        }
</SCRIPT>

Next, insert this part of the script in the location where you want your text to appear in the page.

<SCRIPT LANGUAGE = "JavaScript">
Degrade(255,0,0,0,0,255,"a multi-coloured, shadowed text!");
</SCRIPT>

The first three values in this code correspond to RVB values of the starting colour (red here 255,0,0). The next three values correspond to RVB values of the ending shadowed colour (blue here 0,0,255). Simply place your text within quotation marks after these values.

Discover all Webmaster tips.