Функція log() в CSS — логарифм числа з довільною основою
Опис
автор: Bond
Загальний опис
автор: NagarD
- Порада
-
Переконайтеся, що передаєте числові значення для обчислення логарифма. Наприклад,
автор: Bondlog(100, 10)абоlog(256, 2). - Порада
-
Використовуйте функцію
автор: Bondlog()для обчислення логарифмів в різних ситуаціях, де вам потрібно здійснити обчислення на основі логарифмів.
Синтаксис
log(number, base);Функція log може отримувати єдине значення:
-
<number> -
Приймає числові значення для обчислення логарифма.
автор: Bond
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 120 | 118 | 15.4 | 106 | 120 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 120 | 120 | 118 | 15.4 |
Приклади
+ запропонувати свій приклад у пісочниці
log(8, 2) — логарифм 8 за основою 2, тобто 3: обчислена ширина блока — 3 × 60px = 180px. Без другого аргументу основою є число e.
HTML
<div class="box">width: calc(log(8, 2) * 60px)</div>CSS
.box {
/* log(8, 2) = 3, отже 180px */
width: calc(log(8, 2) * 60px);
background: #0172ad;
color: #fff;
padding: 8px;
}Перша група — логарифмічна шкала: ширина смуги дорівнює calc(log(--n, 2) * 30px), і кожне подвоєння числа додає рівно один крок. Друга показує, що один аргумент дає НАТУРАЛЬНИЙ логарифм, а не десятковий. Третя — log(0) і log(-1): оголошення дійсне, ширина тихо затискається до нуля. Остання — три записи поспіль, з яких два відкинуто, і смуга лишилась завширшки 360px.
HTML
<p class="head">Ширина смуги — calc(log(--n, 2) * 30px). Щоб смуга подовшала
на один крок, число мусить подвоїтися:</p>
<div class="col">
<div class="line"><span class="tag">log(2, 2) = 1</span><span class="bar b1"></span></div>
<div class="line"><span class="tag">log(4, 2) = 2</span><span class="bar b2"></span></div>
<div class="line"><span class="tag">log(8, 2) = 3</span><span class="bar b3"></span></div>
<div class="line"><span class="tag">log(16, 2) = 4</span><span class="bar b4"></span></div>
<div class="line"><span class="tag">log(64, 2) = 6</span><span class="bar b5"></span></div>
<div class="line"><span class="tag">log(256, 2) = 8</span><span class="bar b6"></span></div>
<div class="line"><span class="tag">log(1024, 2) = 10</span><span class="bar b7"></span></div>
</div>
<p class="head">Один аргумент — це НАТУРАЛЬНИЙ логарифм, за основою e.
Ті самі 100 за трьома основами:</p>
<div class="col">
<div class="line"><span class="tag">log(100) ≈ 4.605</span><span class="bar n1"></span></div>
<div class="line"><span class="tag">log(100, 10) = 2</span><span class="bar n2"></span></div>
<div class="line"><span class="tag">log(100, 2) ≈ 6.644</span><span class="bar n3"></span></div>
<div class="line"><span class="tag">log(2.71828…) = 1</span><span class="bar n4"></span></div>
</div>
<p class="head">Нуль і від'ємне число не валять оголошення: вираз стає мінус
нескінченністю або NaN, і ширина мовчки затискається до нуля:</p>
<div class="col">
<div class="line"><span class="tag">calc(log(1) * 30px + 60px)</span><span class="bar z1"></span><b>60px</b></div>
<div class="line"><span class="tag">calc(log(0) * 30px + 60px)</span><span class="bar z2"></span><b>0px</b></div>
<div class="line"><span class="tag">calc(log(-1) * 30px + 60px)</span><span class="bar z3"></span><b>0px</b></div>
</div>
<p class="head">Результат — ЧИСЛО, а не довжина, і аргументи безрозмірні.
Дві смуги нижче отримали невалідні оголошення й лишились по 240px:</p>
<div class="col">
<div class="line"><span class="tag">width: log(8, 2)</span><span class="bar bad e1"></span><b>відкинуто</b></div>
<div class="line"><span class="tag">width: calc(log(8px, 2) * 1px)</span><span class="bar bad e2"></span><b>відкинуто</b></div>
<div class="line"><span class="tag">width: calc(log(8, 2) * 40px)</span><span class="bar good e3"></span><b>120px</b></div>
</div>CSS
.head {
margin: 20px 0 8px;
max-width: 620px;
color: #5a6472;
font-size: .9em;
}
.col {
display: flex;
flex-direction: column;
gap: 5px;
}
.line {
display: flex;
align-items: center;
gap: 10px;
}
.tag {
width: 230px;
color: #333;
font: 12px/1 ui-monospace, monospace;
text-align: right;
}
.line b {
color: #5a6472;
font: 700 12px/1 ui-monospace, monospace;
}
.bar {
display: block;
height: 26px;
background: #2f6fd0;
}
.b1 { width: calc(log(2, 2) * 30px); }
.b2 { width: calc(log(4, 2) * 30px); }
.b3 { width: calc(log(8, 2) * 30px); }
.b4 { width: calc(log(16, 2) * 30px); }
.b5 { width: calc(log(64, 2) * 30px); }
.b6 { width: calc(log(256, 2) * 30px); }
.b7 { width: calc(log(1024, 2) * 30px); }
.n1 { width: calc(log(100) * 30px); background: #3a9a4f; }
.n2 { width: calc(log(100, 10) * 30px); background: #3a9a4f; }
.n3 { width: calc(log(100, 2) * 30px); background: #3a9a4f; }
.n4 { width: calc(log(2.718281828459045) * 30px); background: #3a9a4f; }
.z1 { width: calc(log(1) * 30px + 60px); background: #e08a1e; }
.z2 { width: calc(log(0) * 30px + 60px); background: #e08a1e; }
.z3 { width: calc(log(-1) * 30px + 60px); background: #e08a1e; }
.bad {
width: 240px;
background: #d64545;
}
.good {
width: 240px;
background: #3a9a4f;
}
.e1 { width: log(8, 2); }
.e2 { width: calc(log(8px, 2) * 1px); }
.e3 { width: calc(log(8, 2) * 40px); }Коментарі
Коментарів ще немає — будьте першим!