Css color line

Question

There is a color bar, is there an option to tame the code, it is very cumbersome and not very convenient to work out. And what can be done to adapt, some of the colors were hidden or less remained with their dimensions.

.orange, .purple, .blue, .pink, .yellow, .green{ width:calc(100% / 24); height: 20px; float: left; } .orange{ background: #ee6a51; } .purple{ background: #a883b9; } .pink{ background: #eb649f; } .blue{ background: #00b6ef; } .yellow{ background: #ffd749; } .green{ background: #abc933; }

 <div class="colorLine"> <span class="orange"></span> <span class="purple"></span> <span class="pink"></span> <span class="blue"></span> <span class="yellow"></span> <span class="green"></span> <span class="orange"></span> <span class="purple"></span> <span class="pink"></span> <span class="blue"></span> <span class="yellow"></span> <span class="green"></span> <span class="orange"></span> <span class="purple"></span> <span class="pink"></span> <span class="blue"></span> <span class="yellow"></span> <span class="green"></span> <span class="orange"></span> <span class="purple"></span> <span class="pink"></span> <span class="blue"></span> <span class="yellow"></span> <span class="green"></span> </div>

Nothing is clear, CSS is not cumbersome at all, html is built according to what you need.
What do you mean by "when adapting, some of the colors were hidden or less remained with their size" in your example?

Qwertiy ♦ Qwertiy 76k 17 73 199 · Accepted Answer · 2016-04-05T13:39:01

So good?

 .color-line { height: 20px; background: repeating-linear-gradient(to right, #ee6a51 0 , #ee6a51 20px, #a883b9 20px, #a883b9 40px, #eb649f 40px, #eb649f 60px, #00b6ef 60px, #00b6ef 80px, #ffd749 80px, #ffd749 100px, #abc933 100px, #abc933 120px ); }

 <div class="color-line"></div>

Answer 2 · 2016-04-04T20:28:32

Possible without JavaScript and one element (using CSS3):

 .colorLine { background: -moz-repeating-linear-gradient(to right, #ee6a51, #ee6a51 4.17%, #a883b9 4.17%, #a883b9 8.33%, #eb649f 8.33%, #eb649f 12.5%, #00b6ef 12.5%, #00b6ef 16.67%, #ffd749 16.67%, #ffd749 20.83%, #abc933 20.83%, #abc933 25%); background: -webkit-repeating-linear-gradient(to right, #ee6a51, #ee6a51 4.17%, #a883b9 4.17%, #a883b9 8.33%, #eb649f 8.33%, #eb649f 12.5%, #00b6ef 12.5%, #00b6ef 16.67%, #ffd749 16.67%, #ffd749 20.83%, #abc933 20.83%, #abc933 25%); background: repeating-linear-gradient(to right, #ee6a51, #ee6a51 4.17%, #a883b9 4.17%, #a883b9 8.33%, #eb649f 8.33%, #eb649f 12.5%, #00b6ef 12.5%, #00b6ef 16.67%, #ffd749 16.67%, #ffd749 20.83%, #abc933 20.83%, #abc933 25%); height: 20px; }

 <div class="colorLine"></div>

See repeating-linear-gradient ()

Ps. Does not work in old IE!

the color is indicated as a percentage, if I have 6 different colors and each color is 5%, it will be good on the PC, but I’ll have trouble with mobiles, I would like not to use "@media"

Daniel-664 Daniel-664 502 2 four · Answer 3 · 2016-04-04T20:19:24

To blocks remained at their dimensions, they need to be fixed. And if you need to hide the blocks when the block size changes, then the easiest way is to rebuild it. Maybe so?

 <div class="colorLine"></div> .colorLine span { width: 50px; height: 20px; float: left; } .orange{ background: #ee6a51; } .purple{ background: #a883b9; } .pink{ background: #eb649f; } .blue{ background: #00b6ef; } .yellow{ background: #ffd749; } .green{ background: #abc933; } var colors = ['orange', 'purple', 'pink', 'blue', 'yellow', 'green']; var blockWidth = 50; var init = function () { $('.colorLine').empty(); for (var i=0; i<$('.colorLine').first().width()-blockWidth-1; i+=blockWidth) { $('.colorLine').append("<span class="+colors[(i/blockWidth) % colors.length]+"></span>"); } }; $(window).resize(init); init();

Everything is good, but it would be necessary for the entire width to be, and up to 50px of emptiness
For such a case, you can slightly modify the function var init = function () { var width = $('.colorLine').first().width(); $('.colorLine').empty(); for (var i=0; i<width; i+=blockWidth) { $('.colorLine').append(""); if (width - blockWidth < i) { $('.colorLine').children().last().css('width', (width - i) + 'px'); } } };
var init = function () { var width = $('.colorLine').first().width(); $('.colorLine').empty(); for (var i=0; i<width; i+=blockWidth) { $('.colorLine').append(""); if (width - blockWidth < i) { $('.colorLine').children().last().css('width', (width - i) + 'px'); } } };
excellent, thank you, but only for some reason it acts on one line, if two or more, then only on the last
Because for several it is necessary to cycle through a loop var init = function () { var width = $('.colorLine').first().width(); $('.colorLine').empty(); for (var i=0; i<width; i+=blockWidth) { $('.colorLine').append(""); if (width - blockWidth < i) { $('.colorLine').each(function(){ $(this).children().last().css('width', (width - i) + 'px'); }); } } };
var init = function () { var width = $('.colorLine').first().width(); $('.colorLine').empty(); for (var i=0; i<width; i+=blockWidth) { $('.colorLine').append(""); if (width - blockWidth < i) { $('.colorLine').each(function(){ $(this).children().last().css('width', (width - i) + 'px'); }); } } };

Css color line

3 answers 3

More articles: