Changing color incrementally

Question

#mainbody :nth-child(1){ border-color: #FFCC00; } #mainbody :nth-child(2) { border-color: #FFAA00; } #mainbody :nth-child(3) { border-color: #FF8800; } #mainbody :nth-child(4) { border-color: #FF6600; }

This is awkward, especially if you add another 20 children. Would it be possible to use something like this, feeding calc() the position and using it in rgb()?

Is there another way of doing this? (counter()?)

#mainbody h2 { border-color: rgb(255, calc( 255 / ( childposition / 4 ) ) ,0); }

The following shows promise but I don't think rgb() accepts an internal counter():

body { counter-reset: headcolors 255; } h2:after { counter-increment: headcolors -34; content: "rgb(255," counter(headcolors) ",0);"; } h2 { counter-increment: headcolors -34; color: rgb(255,counter(headcolors),0); }

Check out LESS or SASS

pradeek
– pradeek

2011-11-25 15:45:47 +00:00
Commented Nov 25, 2011 at 15:45 — pradeek
– pradeek, Commented Nov 25, 2011 at 15:45

Aniket · Accepted Answer · 2014-06-30 09:00:28Z

Since you haven't said that you want a CSS only solution, I would recommend you to use a SASS/LESS based solution.

http://sassmeister.com/gist/925757ff999824ec0270

$baseColor: #FFCC00; @for $i from 1 to 5 { #mainbody :nth-child(#{$i}) { border-color: adjust-color($baseColor, $green: ($i - 1) * 1); } $i: $i + 1; }

The above code generates this:

#mainbody :nth-child(1) { border-color: #ffcc00; } #mainbody :nth-child(2) { border-color: #ffcd00; } #mainbody :nth-child(3) { border-color: #ffce00; } #mainbody :nth-child(4) { border-color: #ffcf00; }

Jose Faeti · Accepted Answer · 2011-11-25 16:03:52Z

Either use JS or one of the options suggested by pradeek. As of now, there is no way to use variables in CSS native language, if not by using counter-reset and counter-increment, but then you have to use them along with content, and that will change the content displayed inside the element, they will not treated as variables to use for operations.

Read here or here to understand why variables don't fit with CSS.

clami219 · Accepted Answer · 2014-07-02 10:47:42Z

With jQuery you can do the following when the page is loaded:

$(document).ready(function(){ var startfrom = 204; // CC in Hex, the starting value for the green color var endto = 255 - startfrom; // the ending value for the green color var limit = 4; for(var i = 1; i <= limit; i++) { $("#mainbody :nth-child("+i+")").css("border-color", "rgb(255,"+Math.round(startfrom - (startfrom - endto)*(i-1)/(limit-1))+",0)"); } });

See the jsfiddle with 4 children and with 20 children

you might consider removing :nth-child from this, as if it could be avoided you could use this in IE8 and below I believe. side note, already awarded the bounty, though I did upvote.

Danield · Accepted Answer · 2014-07-02 12:24:18Z

Looking at your hex values, you are essentially just changing the hue by 8 each time. ie:

#ffcc00 = HSL: 48° 100% 50% #ffaa00 = HSL: 40° 100% 50% #ff8800 = HSL: 32° 100% 50%

etc.

So this is how you would go about doing this in LESS:

@base: #ffcc00; @numChildren: 5; .loop(@counter, @color) when (@counter <= @numChildren) { h2:nth-child(@{counter}) { border: 5px solid @color; } @newColor: hsl(hue(@color) - 8, 100%, 50%); .loop((@counter + 1),@newColor); // next iteration } .loop(1,@base); // launch the loop

CODEPEN

The above codepen would assume markup something like so (5 children):

<div class="mainBody"> <h2>one</h2> <h2>two</h2> <h2>three</h2> <h2>four</h2> <h2>five</h2> </div>

and produces the following CSS:

h2:nth-child(1) { border: 5px solid #ffcc00; } h2:nth-child(2) { border: 5px solid #ffaa00; } h2:nth-child(3) { border: 5px solid #ff8800; } h2:nth-child(4) { border: 5px solid #ff6600; } h2:nth-child(5) { border: 5px solid #ff4400; }

Alex · Accepted Answer · 2014-07-02 08:09:09Z

Firefox 31+ or 29+(width options) issue(fiddle):

HTML:

<div> <p><p><p><p> </div>

CSS:

::root { --bg-color: #000000; } div :nth-child(1){ --bg-color: #FFCC00; } div :nth-child(2) { --bg-color: #FFAA00; } div :nth-child(3) { --bg-color: #FF8800; } div :nth-child(4) { --bg-color: #FF6600; } p { display: inline-block; width: 50px; height: 50px; background: var(--bg-color); }

As @Jose said, counter function used only for content property. But vars a now enabled in CSS. Chrome and Firefox has different syntax. There are two specs of W3C CSS Variables Module Level 1(Chrome implementation) and CSS Custom Properties for Cascading Variables Module Level 1(Firefox implementation).

Collectives™ on Stack Overflow

Changing color incrementally

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Linked

Related