Css, Html 및 Javascript로 그라디언트 타일 만들기

Question

각각의 배경색을 가진 div 세트를 만드는 방법은 어떻게됩니까?하지만 색상은 주어진 두 색상 사이의 그라디언트 범위에 있어야합니다. div에 일반 그래디언트 배경을 만드는 방법을 알고 있으며 필요한 것은 아닙니다. 나는 이런 것을 필요로한다.

CSS와 HTML 일 필요는 없습니다 (이상적이라고 생각하는 경우). 내가 괜찮은 자바 스크립트를 사용해야 할 경우. 이 작업을 수행하는 데 PHP를 사용해야하는 경우에도 괜찮습니다. https://jsfiddle.net/1q6nrow9/

각 사업부가 자신의 고유 한 색상의이 있어야합니다 여기

내가 필요한 시각적 데모입니다. 각 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

이는 자바 스크립트를 수행 할 수 있습니다 여기에

는 바이올린의 코드의 샘플입니다. 그라데이션을 만들기 위해 HSL을 사용하는 JavaScript 함수를 작성했습니다. 다른 색상 공간을 처리해야하는 경우 HSL로 변환하거나 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>