Получить оттенки 6-значного шестнадцатеричного цвета, используя только CSS?

Question

У меня есть элемент с box-shadow, который имеет концентрические слои с оттенками основного цвета.Цвета в настоящее время жестко запрограммированы.

Есть ли хитрый способ получить оттенки 6-значного шестнадцатеричного базового цвета, используя только CSS?т.е. без использования препроцессоров JavaScript или CSS?

Я ищу что-то вроде: --layer-01: calc(var(--base-color) + 55), чтобы установить непрозрачность в этом случае.

:root {
  --base-color: #1d5769;
  --layer-01: #c5ecf8;
  --layer-02: #d4f0f9;
  --layer-03: #e9f8fc;
  --layer-04: #f2fbfd;
}

.button {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  background-color: var(--layer-01);
  box-shadow: 
    0 0 0 4px var(--layer-01), 
    0 0 0 6px var(--base-color), 
    0 0 0 46px var(--layer-02), 
    0 0 0 86px var(--layer-03), 
    0 0 0 126px var(--layer-04);
}

<div class="button"></div>

Answer 1

Вы можете использовать свойство filter, хотя оно применяется ко всему элементу.Применение его к: псевдо позволяет взломать 2 из 5 слоев: Codepen .

:root {
  --base-color: #1d5769;
  --layer-01: #c5ecf8;
  --layer-02: #d4f0f9;
  /*--layer-03: #e9f8fc;
  --layer-04: #f2fbfd;*/
}

.box {
  position: relative;
  height: 5rem;
  margin: 10rem;
  background-color: var(--layer-01);
  box-shadow:
    0 0 0 4px var(--layer-01),
    0 0 0 6px var(--base-color),
    0 0 0 46px var(--layer-02);/*,
    0 0 0 86px var(--layer-03),
    0 0 0 126px var(--layer-04);*/
}

.box::before {
  box-sizing: border-box;
  content: '';
  position: absolute;
  top: -126px;
  left: -126px;
  display: block;
  width: calc(100% + 252px);
  height: calc(100% + 252px);
  border: 40px solid var(--base-color);
  filter: brightness(800%);
}

.box::after {
  box-sizing: border-box;
  content: '';
  position: absolute;
  top: -86px;
  left: -86px;
  display: block;
  width: calc(100% + 172px);
  height: calc(100% + 172px);
  border: 40px solid var(--base-color);
  filter: brightness(700%);
}

<div class="box"></div>

Таким образом, здесь вам понадобится дополнительный пустой элемент, который принесет еще 3 области, которые можно стилизовать ...

Может быть, пользовательский PNG (.SVG?) маска сработает?Или напоследок замените ваш box-shadow на SVG, сделанный из 5 прямоугольников surimpposed .Их fill цвет будет вашим выбранным цветом, и у 4 из них есть фильтр яркости.

Вероятно, хорошие идеи в Узнайте о пользовательских свойствах CSS через их умное использование (Крис Койер) иего ссылка на СУХОЕ переключение или, если у вас есть --picked: 240, 127, 172;, то Тематика с переменными CSS в RGBA (Бен Сабо) должна сработать.

Answer 2

Вы можете учитывать hsl цвета, и у вас будет лучшая гибкость для управления lightness, например

:root {
  --base-color:194, 57%;
  --layer-00: hsl(var(--base-color), 20%);
  --layer-01: hsl(var(--base-color), 40%);
  --layer-02: hsl(var(--base-color), 50%);
  --layer-03: hsl(var(--base-color), 60%);
  --layer-04: hsl(var(--base-color), 70%);
}

.button {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  background-color: var(--layer-00);
  box-shadow: 
    0 0 0 4px var(--layer-01), 
    0 0 0 46px var(--layer-02), 
    0 0 0 86px var(--layer-03), 
    0 0 0 126px var(--layer-04);
}

<div class="button"></div>

Для непрозрачности вы можете рассмотреть синтаксис rgba, как показано ниже:

:root {
  --base-color:29, 87, 105;
  --layer-00: rgba(var(--base-color), 1);
  --layer-01: rgba(var(--base-color), 0.8);
  --layer-02: rgba(var(--base-color), 0.6);
  --layer-03: rgba(var(--base-color), 0.4);
  --layer-04: rgba(var(--base-color), 0.2);
}

.button {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  background-color: var(--layer-00);
  box-shadow: 
    0 0 0 4px var(--layer-01), 
    0 0 0 46px var(--layer-02), 
    0 0 0 86px var(--layer-03), 
    0 0 0 126px var(--layer-04);
}

<div class="button"></div>