Generating gradiants with out using images

This is written in JQuery. Below is the code.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" > </script>

<script> $(function(){ gradiant('div.newGradiant',[255,0,0],[0,0,0]); }); function gradiant(selector,rgb1,rgb2){ var $src = $(selector); var height = $src.height()*1; $src.css('background','yellow'); var x = $src.offset().left + $src.width(); var y = $src.offset().top; //var r=256,g=256;b=256; var r=rgb1[0],g=rgb1[1];b=rgb1[2]; var rr=rgb2[0],gg=rgb2[1];bb=rgb2[2]; for(var i=0;i<height;i++){ var tr= Math.round(r+((rr-r)*i/height)); var tg=Math.round(g+((gg-g)*i/height)); var tb=Math.round(b+((bb-b)*i/height)); var newColor = hex(tr)+hex(tg)+hex(tb); var div =('<DIV style="BORDER-BOTTOM: #ffffff 0px;' +' BORDER-LEFT: #ffffff 0px solid; BACKGROUND-COLOR: ' +'#'+ newColor +'; MIN-HEIGHT: 1px; HEIGHT:' +' 1px; FONT-SIZE: 1px; OVERFLOW: hidden; BORDER-TOP: ' +'#ffffff 0px; BORDER-RIGHT: #ffffff 0px solid"></DIV>'); $src.append($(div)); } } var hexDigits = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"); function hex(x) { return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16]; } </script> <div class="newGradiant" style="width:100px; height:200px; background:yellow; border: 1px solid black">

This generates the gradiant as follows. The algo can be modified to take the edge rgb values and then do the magic. This is just a naive example ;)

Tested this on IE-7, IE-8, IE-9. Chrome 20.0, firefox 13.0 version.

The only issue i see is when we combine this with jQuery corner apis. The results are working in IE but not in chrome!!!