Changing color incrementally

问题:

#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); } 

回答1:

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; } 

回答2:

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.

回答3:

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

回答4:

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; } 

回答5:

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).

文章来源: Changing color incrementally