Skip to content

Instantly share code, notes, and snippets.

@mugifly

mugifly/bg-colors.html

Created September 12, 2012 00:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mugifly/3703315 to your computer and use it in GitHub Desktop.
Save mugifly/3703315 to your computer and use it in GitHub Desktop.
Download ZIP
BGColors - multiple coloring in background-color by CSS3-gradient
Raw
bg-colors.html
<!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>
Raw
bg-colors.js
/**
* 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