Monday, July 23, 2012

Generating gradiants with out using images

This is written in JQuery. Below is the code.

<script src="" > </script>


function gradiant(selector,rgb1,rgb2){
var $src = $(selector);
var height = $src.height()*1;
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>');

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];


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

No comments:

Post a Comment