Функция CSS `log()`

log() — это экспоненциальная CSS-функция, возвращающая логарифм числа.

Логарифм — это обратная операция возведения в степень. Это число, в которое нужно возвести фиксированное основание, чтобы получить число, переданное в качестве первого параметра.

В CSS, если передан один параметр, используется натуральный логарифм e, или приблизительно 2.7182818, однако основание можно задать любым значением с помощью необязательного второго параметра.

Синтаксис

/* A <number> value */
width: calc(100px * log(7.389)); /* 200px */
width: calc(100px * log(8, 2)); /* 300px */
width: calc(100px * log(625, 5)); /* 400px */

Параметры

Функция log(value [, base]?) принимает два значения, разделённых запятой, в качестве параметров.

value

Вычисляемое значение, результатом которого является <number>, большее или равное 0. Это значение, логарифм которого нужно найти.

base

Необязательный параметр. Вычисляемое значение, результатом которого является <number>, большее или равное 0. Это основание логарифма. Если оно не задано, используется основание логарифма по умолчанию e.

Возвращаемое значение

Логарифм value, если задано base.

Натуральный логарифм (с основанием e) от value, если base не задано.

Формальный синтаксис

<log()> = 
  log( <calc-sum>, <calc-sum>? )

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*

<calc-product> = 
  <calc-value> [ '*' <calc-value> | '/' <number> ]*

<calc-value> = 
  <number> |
  <dimension> |
  <percentage> |
  <calc-constant> |
  ( <calc-sum> )

<calc-constant> = 
  e |
  pi |
  infinity |
  -infinity |
  NaN

Примеры

Использование функции log() для логарифмической шкалы

В этом примере показано, как функцию log() можно использовать для визуализации значений данных с помощью логарифмической шкалы. Ширина каждой полосы в этом примере пропорциональна значению данных на логарифмической шкале с основанием 10. Для каждого элемента значение присваивается пользовательскому свойству CSS с именем --value, которое затем используется классом .bar для вычисления ширины.

HTML

<div class="bar" style="--value: 50">50</div>
<div class="bar" style="--value: 100">100</div>
<div class="bar" style="--value: 500">500</div>
<div class="bar" style="--value: 10000">10,000</div>
<div class="bar" style="--value: 2000000">2,000,000</div>

CSS

.bar {
  width: calc(log(var(--value), 10) * 2em);
}

.bar {
  height: 2em;
  background-color: tomato;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.25em 0;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• pow()
• sqrt()
• hypot()
• exp()