Изменение цвета постепенно

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

Это неудобно, особенно если добавить еще 20 детей.Можно ли было бы использовать что-то вроде этого, кормя calc() позицию и используя ее в rgb()?

Есть ли другой способ сделать это?(counter()?)

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

Следующее показывает обещание, но я не думаю, rgb() принимает внутренний 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

Поскольку вы еще не сказали, что хотите использовать решение только для CSS, я бы порекомендовал вам использовать решение на основе 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;
}

Приведенный выше код генерирует это:

#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

Глядя на ваши шестнадцатеричные значения, вы просто меняете оттенок на 8 каждый раз.то есть:

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

и т. д.

Так вот, как вы будете делать это в МЕНЬШЕ:

@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

Приведенный выше код будет предполагать, что разметка будет выглядеть примерно так (5 детей):

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

и создаст следующий 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;
}

Answer 3

С помощью jQuery вы можете делать следующее при загрузке страницы:

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

См. Jsfiddle с 4 потомками и 20 потомками

Answer 4

Либо используйте JS, либо один из вариантов, предложенных pradeek.На данный момент нет способа использовать переменные на родном языке CSS, если не использовать counter-reset и counter-increment, но тогда вы должны использовать их вместе с content, и это изменит содержимое, отображаемое внутриэлемент, они не будут рассматриваться как переменные для использования в операциях.

Прочитайте здесь или здесь , чтобы понять, почему переменные не соответствуют CSS.

Answer 5

Firefox 31+ или 29+ (ширина параметры ) выпуск (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);
}

Как сказал @Jose, функция counter используется только для свойства content. Но vars теперь включен в CSS. Chrome и Firefox имеют разный синтаксис. Существуют две спецификации CSS-переменных модуля уровня 1 (реализация Chrome) и CSS-свойств для каскадных переменных модуля уровня 1 (реализация Firefox).