3

I want to have a dynamic amount of divs (sometimes 3, sometimes 10 etc), which should be colored based on a color gradient (say green to red).

So, when there are only two divs, make the first one #0F0, the second one #F00. But when there are 10 divs, make the first and last the same, but all those between change gradually from green to red.

Is there a way to do this with pure css? If not, how would you do it with javascript? I'm thinking about doing it with javascript right now, but it's gonna get reaaally complicated the way i think about it. any advice? thanks

user3787706
  • 659
  • 1
  • 6
  • 18

3 Answers3

1

Here a fiddle that does what you want ;)

https://jsfiddle.net/tkzr99vx/

It does create div with the amount you pass in the createDivs method.

Use rgb values as I did for simpler code. You still can use HEX values but you will have to convert it to rgb.

Hugo
  • 71
  • 2
1

CSS doesn't provide the functionality required to calculate values from an input like javascript does, so my personal advice would be to define container classes for different amounts of children. For example:

.two{
    div:nth-child(1){background-color: ...}
    div:nth-child(2){background-color: ...}
}

.three{
    div:nth-child(1){background-color: ...}
    div:nth-child(2){background-color: ...}
    div:nth-child(3){background-color: ...}
}

.four{
    div:nth-child(1){background-color: ...}
    div:nth-child(2){background-color: ...}
    div:nth-child(3){background-color: ...}
    div:nth-child(4){background-color: ...}
}

The limitations for this being it's not dynamic, but it can simulate the desired functionality up to as many classes you declare.

leuquim
  • 636
  • 6
  • 16
  • As far as I know, this is the only way to accomplish the effect in pure CSS, since CSS cannot determine the number of dynamic elements and it can't do color calculations. If you're feeling saucy, you might want to learn SASS and write a simple loop that generates this code, along with the proper color calculations, so you don't have to do all that work. – jeffjenx Oct 27 '15 at 15:53
1

Here's a quick little script for just the two colors using hex values.

var elements = document.querySelectorAll('div');
var total = elements.length;
var step = 255 / (total - 1);

Array.prototype.forEach.call(elements, function(elem, i){
    var colorHexValue1 = (step * i).toString(16);
    var colorHexValue2 = (255 - step * i).toString(16);
    var formattedColor1 = ("0" + colorHexValue1).split('.')[0].slice(-2);
    var formattedColor2 = ("0" + colorHexValue2).split('.')[0].slice(-2);
    
    elem.style.backgroundColor = '#'+formattedColor1+formattedColor2+'00';
});
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
Joseph Marikle
  • 76,418
  • 17
  • 112
  • 129
  • could you please explain why you call the array.prototype? – user3787706 Oct 27 '15 at 17:12
  • 1
    @user3787706 the question is not tagged jQuery, so I had to use only javascript functions. Otherwise, I would use jQuery's `.each()`. I could have used a for loop with `for(var i = 0, len = elements.length; i < len, i++)` and referenced the element with `elements[i]`, but I like the way forEach works instead, so I used that simply out of preference. When using `forEach` on anything other than an array, you have to call the prototype function and pass it what you are iterating over (in this case, `elements`). Ultimately it was just a choice based on preference. – Joseph Marikle Oct 27 '15 at 17:19
  • Also, if IE compatibility for version 8 or older is important, don't use `forEach`. it's IE 9+ only. – Joseph Marikle Oct 27 '15 at 17:21