CSS function log()
Опис
log() - ця CSS-функція використовується для обчислення натурального логарифму заданого числа. Логарифм - це математична функція, яка визначає показник, до якого потрібно піднести певне число (основу логарифма), щоб отримати дане число. Використання функції log() дозволяє виконувати обчислення логарифмів та використовувати їх результат у стилях CSS.
Функція log() приймає два аргументи - число та його основу. Число вказується як перший аргумент, а основа - як другий. Значення числа повинно бути додатнім, а значення основи має бути більше 0 і не може бути рівним 1. Наприклад, log(8, 2) обчислить натуральний логарифм числа 8 за основою 2.
Функція log() може бути корисною для обчислення складних значень або визначення властивостей на основі математичних розрахунків. Наприклад, ви можете використовувати log() для визначення прозорості або інтенсивності кольору на основі логарифмічної шкали.
Приклад використання функції log():
.element {
font-size: calc(10px + log(8, 2) * 5px);
}
У цьому прикладі, функція log(8, 2) обчислить натуральний логарифм числа 8 за основою 2, що дорівнює приблизно 3, і використає результат для визначення розміру шрифту .element. Результатом буде розмір шрифту, обчислений згідно логарифмічної формули.
| Порада: | Переконайтеся, що передаєте числові значення для обчислення логарифма. Наприклад, |
| Порада: | Використовуйте функцію |
Синтаксис
log(number, base);<number>Приймає числові значення для обчислення логарифма.
Переглядачі
| Переглядач | ||
|---|---|---|
112 |
15.4 |
| Переглядач | ||
|---|---|---|
112 |
15.4 |
Мобільних переглядачів ще не додано.
Приклади
Елемент з обчисленою шириною за допомогою функції log().
<iframe height="600" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/BonD007-the-flexboxer/embed/gOQMmbN?default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/BonD007-the-flexboxer/pen/gOQMmbN">
Untitled</a> by BonD007 (<a href="https://codepen.io/BonD007-the-flexboxer">@BonD007-the-flexboxer</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>