Как использовать calc () для переключения между значениями цвета? - PullRequest
Новая
       23

Как использовать calc () для переключения между значениями цвета?

0 голосов
/ 27 июня 2018

Можно ли использовать функцию calc() в CSS для манипулирования шестнадцатеричным значением цвета?

В следующем фрагменте CSS я хотел бы использовать переменную --enable для переключения между двумя шестнадцатеричными значениями цвета для свойства background-color MyBtnStyle : --enable-color и --disable-color.

Этого можно было достичь при использовании цветового формата rgb(r,g,b), где каждый компонент цвета вычислялся с использованием calc(), но я бы предпочел напрямую переключаться между шестнадцатеричными значениями цвета. 

    :root {
        --enable: 0;
        --disable-color: #ff0000;
        --disable-r: 255;
        --disable-g: 0;
        --disable-b: 0;
        --enable-color: #00ff00;
        --enable-r: 0;
        --enable-g: 255;
        --enable-b: 0;
    }

    .MyBtnStyle {
        width: 100%;
        height: 100%;
        text-align: center;
        border: 2px;
        margin: 1px 1px;
        color: black;
        padding: 1px 1px;
        background-color: calc(var(--enable-color)*var(--enable) + var(--disable-color)*(1 - var(--enable))); 
    }

/* this works */
    /* rgb( calc(var(--enable-r)*var(--enable) + var(--disable-r)*(1 - var(--enable)) ), 
            calc(var(--enable-g)*var(--enable) + var(--disable-g)*(1 - var(--enable)) ), 
            calc(var(--enable-b)*var(--enable) + var(--disable-b)*(1 - var(--enable)) )) */

1 Ответ

0 голосов
/ 27 июня 2018

Вы не можете умножать шестнадцатеричные значения, как Вы делаете. Хитрость заключается в том, чтобы использовать градиент и контролировать процент цветов. Это будет работать с любым форматом цвета: 

:root {
  --enable: 0;
  --disable-color: red;
  --enable-color: #00ff00;
}

.MyBtnStyle {
  text-align: center;
  margin: 5px;
  color: black;
  padding:20px;
  background:
   linear-gradient(
     var(--enable-color)  calc(100% * var(--enable)),
     var(--disable-color) calc(100% * var(--enable)), 
     var(--disable-color) calc(100% * (1 - var(--enable))) 
   );
     
 }
<div class="MyBtnStyle" style="--enable:1">some text</div>

<div class="MyBtnStyle">some text</div>

Вот еще один синтаксис, в котором вы настраиваете background-size: 

:root {
  --enable: 0;
  --disable-color: red;
  --enable-color: #00ff00;
}

.MyBtnStyle {
  text-align: center;
  margin: 5px;
  color: black;
  padding:20px;
  background:
   linear-gradient(var(--enable-color),var(--enable-color)) 0 0/100% calc(100% * var(--enable)),
   var(--disable-color);
}
<div class="MyBtnStyle" style="--enable:1">some text</div>

<div class="MyBtnStyle">some text</div>

Похожие: Как изменить цвет

...