Css、Html、Javascriptでグラデーションタイルを作成する

Question

それぞれの背景色を持つdivのセットを作成するにはどうすればよいですか？色は2つの指定された色の間のグラデーション範囲内になければなりません。私はdivに通常のグラデーションの背景を作成する方法を知っている、それは私が必要としているものではありません。私はこれのようなものが必要です。

CSSとHTMLである必要はありません（理想的だと思われます）。私はOKのいくつかのJavaScriptを使用する必要がある場合。これを達成するためにPHPを使用しなければならなくても、それは私にとっては大丈夫です。ここで

は私が必要なものの視覚的なデモンストレーションです：https://jsfiddle.net/1q6nrow9/

各div要素は、それ自身の明確な色を持っている必要があります。色は各divの境界線から出るべきではありません。ここで

はフィドルからのコードのサンプルです：

This: no 
<div class="gradient-wrapper"></div> 

<div class="wrapper liquid"> 
<div class="tile"></div> 
<div class="tile"></div> 
<div class="tile"></div> 
<div class="tile"></div> 
<div class="tile"></div> 
<div class="tile"></div> 
<div class="tile"></div> 
<div class="tile"></div> 
<div class="tile"></div> 
</div> 

This: yes 
<div class="wrapper"> 
<!-- <div class="tile tile-01"></div> --> 
<div class="tile tile-02"></div> 
<!-- <div class="tile tile-03"></div> --> 
<div class="tile tile-04"></div> 
<!-- <div class="tile tile-05"></div> --> 
<div class="tile tile-06"></div> 
<!-- <div class="tile tile-07"></div> --> 
<div class="tile tile-08"></div> 
<!-- <div class="tile tile-09"></div> --> 
<div class="tile tile-10"></div> 
<!-- <div class="tile tile-11"></div> --> 
<div class="tile tile-12"></div> 
<!-- <div class="tile tile-13"></div> --> 
<div class="tile tile-14"></div> 
<!-- <div class="tile tile-15"></div> --> 
<div class="tile tile-16"></div> 
<!-- <div class="tile tile-17"></div> --> 
<div class="tile tile-18"></div> 
</div> 

いくつかのCSS：

body { 
    padding: 50px; 
} 
.gradient-wrapper { 
    width: 459px; 
    height: 50px; 
    border: 1px solid #333; 
    margin-bottom: -52px; 
    background: -moz-linear-gradient(0deg, rgba(0,255,0,1) 0%, rgba(255,0,0,1) 100%); /* ff3.6+ */ 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0,255,0,1)), color-stop(100%, rgba(255,0,0,1))); /* safari4+,chrome */ 
    background: -webkit-linear-gradient(0deg, rgba(0,255,0,1) 0%, rgba(255,0,0,1) 100%); /* safari5.1+,chrome10+ */ 
    background: -o-linear-gradient(0deg, rgba(0,255,0,1) 0%, rgba(255,0,0,1) 100%); /* opera 11.10+ */ 
    background: -ms-linear-gradient(0deg, rgba(0,255,0,1) 0%, rgba(255,0,0,1) 100%); /* ie10+ */ 
    background: linear-gradient(90deg, rgba(0,255,0,1) 0%, rgba(255,0,0,1) 100%); /* w3c */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#ff0000',GradientType=1); /* ie6-9 */ 
} 
.liquid { 
    margin-bottom: 50px; 
} 
.wrapper { 
    width: 459px; 
    height: 50px; 
    border-left: 1px solid #333; 
    border-top: 1px solid #333; 
    border-bottom: 1px solid #333; 

} 
.tile { 
    border-right: 1px solid #333; 
    height: 50px; 
    width: 50px; 
    float: left; 
} 
.tile-01{background: #0DF200;} 
.tile-02{background: #1BE400;} 
.tile-03{background: #29D600;} 
.tile-04{background: #38C700;} 
.tile-05{background: #46B900;} 
.tile-06{background: #54AB00;} 
.tile-07{background: #629D00;} 
.tile-08{background: #708F00;} 
.tile-09{background: #7F8000;} 
.tile-10{background: #8D7200;} 
.tile-11{background: #9B6400;} 
.tile-12{background: #A95600;} 
.tile-13{background: #B74800;} 
.tile-14{background: #C53A00;} 
.tile-15{background: #D42B00;} 
.tile-16{background: #E21D00;} 
.tile-17{background: #F00F00;} 
.tile-18{background: #FE0100;} 

Answer 1

これはJavaScriptで行うことができます。私は、HSLを使ってグラデーションを作成するいくつかのJavaScript関数を書きました。他の色空間に対処する必要がある場合は、HSLとの間で変換を行うことができますが、これは良いジャンプオフポイントになるはずです。コードスニペットの書式設定は本当に台無しです。 https://jsfiddle.net/tu47tjb5/1/

function HSLColor(hue, sat, light) { 
 
    this.hue = hue; 
 
    this.saturation = sat; 
 
    this.lightness = light; 
 
    this.getCSS = function(){ 
 
    return "hsl("+this.hue+","+this.saturation+"%,"+this.lightness+"%)"; 
 
    } 
 
} 
 

 
function linearInterpolateColor(startColor, endColor, percentage) 
 
{ 
 
\t 
 
    var hueDiff = (endColor.hue - startColor.hue) * percentage; 
 
    var satDiff = (endColor.saturation - startColor.saturation) * percentage; 
 
    var lightDiff = (endColor.lightness - startColor.lightness) * percentage; 
 
    return new HSLColor(startColor.hue + hueDiff,startColor.saturation + satDiff, startColor.lightness + lightDiff); 
 
} 
 

 
function getInterpolationArray(startColor, endColor, steps) 
 
{ 
 
\t var interpolArray = []; 
 
\t for(var i = 0; i < steps; i++) 
 
    { 
 
    \t interpolArray.push(linearInterpolateColor(startColor, endColor, i/(steps-1))); 
 
    } 
 
    return interpolArray; 
 
} 
 

 
/** 
 
Container should be a jquery object 
 
*/ 
 
function generateSteps(startColor, endColor, steps, container) 
 
{ 
 
\t var interpolArray = getInterpolationArray(startColor, endColor, steps) 
 
\t 
 
    interpolArray.forEach(function(color){ 
 
    \t var colorBlock = $("<div>").addClass("colorBlock").css('background-color',color.getCSS()); 
 
    container.append(colorBlock); 
 
    }); 
 
    
 
} 
 

 
var start = new HSLColor(0, 100, 50); 
 
var end = new HSLColor(40, 25, 100); 
 
generateSteps(start, end, 10, $("#container"));

.colorBlock { 
 
    width: 50px; 
 
    height: 50px; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
</div>