Cambio de color de forma incremental

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

esto es incómodo, especialmente si agrega otros 20 niños. ¿Sería posible usar algo como esto, alimentando calc() la posición y usándola en rgb()?

¿Hay alguna otra forma de hacerlo? (? counter())

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

Los siguientes se muestra prometedor, pero no creo rgb() acepta una interna 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); 
} 

Answer 1

Dado que no ha dicho que desea una solución de solo CSS, le recomendaría que utilice una solución basada en SASS/LESS.

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

El código anterior genera este:

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

Answer 2

Cualquiera de usar JS o una de las opciones propuestas por pradeek. A partir de ahora, no hay forma de usar variables en el lenguaje nativo de CSS, si no usando counter-reset y counter-increment, pero luego debe usarlos junto con content, y eso cambiará el contenido que se muestra dentro del elemento, no se tratarán como variables para usar para las operaciones.

Read here o here para comprender por qué las variables no se ajustan a CSS.

Answer 3

Firefox 31+ o 29+ (options anchura) problema (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); 
} 

Como dijo @Jose, counter función utiliza solamente para content propiedad. Pero vars a ahora habilitado en CSS. Chrome y Firefox tiene una sintaxis diferente. Hay dos especificaciones de W3C CSS Variables Module Level 1 (implementación de Chrome) y CSS Custom Properties for Cascading Variables Module Level 1 (implementación de Firefox).

Answer 4

con jQuery puede hacer lo siguiente cuando se carga la página:

$(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)"); 
    } 
}); 

Véase el jsFiddle con 4 children y con 20 children

Answer 5

En cuanto a sus valores hexadecimales, que son esencialmente simplemente cambiando el tono de 8 cada vez. es decir:

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

etc.

Así que esto es cómo se van haciendo sobre esto en menos:

@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

Los codepen anteriores asumirían algo marcado como así (5 hijos):

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

y produce el siguiente 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; 
}