How to gradually set color for k children?

Question

How to gradually set color for k children?

84 Views Asked by Spätzle At 04 April 2025 at 12:25

I have k children of class tab_title, I want to gradually paint their background from color1 to color2.

For example: If k=3, color1=red(#FF0000), color2=yellow(#FFFF00) then the background for the 1st element is red(#FF0000), for the 2nd orange(#FF8000) and for the 3rd is yellow(#FFFF00); k=5, color1=white, color2=black then 1st is white, 2nd is gray25%, 3rd is gary50%, 4th is gary75% and 5th is black.

I want this to work for any k, without specifying explicitly the tone for each nth-child(). Any way of doing this purely with css or sass? since class can be added or removed, I would prefer not involving any JS code.

I am using the following code:

@mixin gradbg($n, $c1, $c2){
    @for $i from 1 through $n {
        &:nth-child(#{$i}) {
            background-color: mix($c1,$c2,((1 - (($i - 1) / ($n - 1)))*100%));
        }
    }
}

and then

li.tab_title{
    $from: #097380;
    $to: #4da759;
    @include gradbg(3,$from,$to);
}

the only thing missing is somehow counting k automatically so I can use gradbg(k,$from,$to) instead of gradbg(3,$from,$to)

Thanks a lot,

Guy

Original Q&A

There are 1 best solutions below

**Deepak Bandi** · Answer 1

I have done it for hardcoded array values, may be you cn tweak the logic and make a recursive function to get it.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>

        <style>
            li{
                height: 100px;
                width: 100px;
            }
        </style>
    </head>
    <body>

        <ul>
            <li class="tab"></li>
            <li class="tab"></li>
            <li class="tab"></li>
        </ul>

        <script>
         var k = ["#FF0000", "#FFFF00"];
         var hex = [];
         var intermeidate_color = "";

         function hexToRgb(hex) {
            var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
            return result ? {
                r: parseInt(result[1], 16),
                g: parseInt(result[2], 16),
                b: parseInt(result[3], 16)
            } : null;
        }

        k.map(function(item, index){
            hex.push({
                r : hexToRgb(item).r,
                g : hexToRgb(item).g,
                b : hexToRgb(item).b
            })
        });

        console.log(hex);

        for (var i = 0; i < hex.length - 1; i++) {
            intermeidate_color = {
                r : parseInt((hex[i].r + hex[i+1].r) / 2),
                g : parseInt((hex[i].g + hex[i+1].g) / 2),
                b : parseInt((hex[i].b + hex[i+1].b) / 2)
            }
        }

        function rgbToHex(r, g, b) {
            return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
        }


        k.splice(1, 0, rgbToHex(intermeidate_color.r, intermeidate_color.g, intermeidate_color.b));
                

        var tabs = document.getElementsByClassName('tab');
        for (var i=0; i < tabs.length; i++) {
            tabs[i].style.backgroundColor = k[i];
        }
        //document.body.style.backgroundColor = rgbToHex(intermeidate_color.r, intermeidate_color.g, intermeidate_color.b);
        </script>
    </body>
</html>

How to gradually set color for k children?

There are 1 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in SASS

Related Questions in COMPASS-SASS

Trending Questions

Popular # Hahtags

Popular Questions