Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
BGColors - multiple coloring in background-color by CSS3-gradient
<!DOCTYPE html>
<html>
<head>
<title>BGColors Sample</title>
<script type="text/javascript" src="bg-colors.js"></script>
<script type="text/javascript">
function sampleDraw(){
new BGColors(['red','green','blue','yellow'], document.getElementById('sample'));
}
</script>
</head>
<body onload="sampleDraw();">
<span id="sample" style="padding:5px;color:white;">sample :)</span>
<hr>
I'm sorry. This script is very buggy :-}
</boby>
</html>
/**
* BGColors - multiple coloring in background-color by CSS3-gradient
* -- Only support for webkit, yet. --
* (c) Masanori.
*/
var BGColors = function (opt_colorsArr,opt_obj){
this.colors = opt_colorsArr || [];
this.draw = function(obj){
var gr = '';
for(var i=0;i<this.colors.length;i++){
gr+= 'color-stop('+(100/this.colors.length*(i))+'%,#ffffff),';
gr+= 'color-stop('+(100/this.colors.length*i+1)+'%,'+this.colors[i]+'),';
gr+= 'color-stop('+(100/this.colors.length*(i+0.9))+'%,'+this.colors[i]+'),';
gr+= 'color-stop('+(100/this.colors.length*(i+2))+'%,#ffffff),';
}
console.log(gr);
obj.style.background = '-webkit-gradient(linear, left top, right top, from(#ffffff),' + gr + 'to(#ffffff))';
};
if(opt_obj != null){
this.draw(opt_obj);
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.