Функції CSS — довідник: calc(), var() та інші

CSS функції є частиною CSS і використовуються для виконання різних обчислень і маніпуляцій зі значеннями властивостей CSS. Вони дозволяють додавати динамічність до стилів і забезпечують більш гнучке і потужне керування зовнішнім виглядом веб-сторінок.

CSS функції можуть бути використані для встановлення значень властивостей, які залежать від контексту, обчислення математичних виразів, зміни кольорів, розмірів, шрифтів та багатьох інших атрибутів. Вони дозволяють виконувати операції, такі як додавання, віднімання, множення, ділення, округлення, генерація випадкових чисел і багато інших.

Наприклад, функція calc() дозволяє виконувати арифметичні операції з числовими значеннями. Вона може бути використана для визначення ширини, висоти, відступів та інших розмірів на основі математичних формул.

Також є функції для зміни кольорів, такі як rgba(), hsl(), color(), linear-gradient() та інші. Вони дозволяють встановлювати кольори за допомогою RGB, HSL або інших систем кольорових моделей, а також створювати градієнти.

CSS функції дозволяють реагувати на дії користувача, змінювати стилі під час анімацій та транзицій, забезпечують підтримку різних пристроїв та адаптивний дизайн. Вони розширюють можливості CSS і дозволяють створювати більш динамічні та інтерактивні веб-сторінки.

Функція	Опис
abs	Розраховує абсолютне значення числа, що означає його відстань від нуля. Вона повертає додатнє значення незалежно від знаку вхідного числа.
acos	Обернене косинус-значення числа
asin	Обчислює обернене синус-значення числа
atan	Арктангенс числа, вираженого як відношення y до x, в радіанах.
atan2	Арктангенс відношення координат y до x для заданої точки. Вона дозволяє виміряти кут між позитивним напрямком осі x та відрізком, що з'єднує точку (0, 0) з заданою точкою (x, y).
calc	Математичні розрахунки з числами та одиницями виміру CSS. Дозволяє вказувати динамічні значення для CSS властивостей, які можуть залежати від інших значень або контексту.
clamp	Встановлює значення властивості в межах заданих обмежень
cos	Розрахунок косинуса заданого кута.
exp	Розраховує експоненту вказаного числа.
hypot	Розраховує гіпотенузу за допомогою переданих значень довжин.
log	Розрахунок логарифма числа в певній основі.
max	Визначення максимального значення серед вказаного переліку значень
min	Визначення мінімального значення серед вказаного переліку значень
mod	Розраховує модуль залишку від ділення.
pow	Піднесення числового значення до певного степеню. Вона дозволяє обчислювати результат степеневої операції.
rem	Розрахвує залишок від ділення.
round	Округлення числових значень до найближчого цілого числа
sign	Повертає знак числа. Вона повертає -1, 0 або 1 в залежності від того, чи від'ємне, нульове або додатне вхідне число.
sin	Обчислення синуса заданого кута
sqrt	Розрахунок квадратного кореня числа.
tan	Обчислення тангенса заданого кута.
color	Задає кольори відповідно до конкретного простору кольорів (colorspace), як вказано в функціональній нотації. Вона дозволяє встановити кольори, які не обов'язково знаходяться в стандартному sRGB просторі кольорів, що використовується більшістю інших функцій кольору.
color-contrast	Порівнює колір зі переліком кольорів та обирає найбільш контрастний.
color-mix	Змішує два кольори в заданому просторі кольорів за вказаною кількістю.
device-cmyk	Задає колір в колірній моделі CMYK (Cyan, Magenta, Yellow, Key color).
hsl	Задає колір елементу за допомогою значень відтінку (hue), насиченості (saturation) та світлості (lightness).
hsla	Колір у моделі HSL із прозорістю (альфа-каналом).
hwb	Задає колір елементу за допомогою значень відтінку (hue), білого (whiteness) та чорного (blackness).
lab	Задає колір колірній моделі lab() (Lightness, a, b). Чудово підходить для зміни кольорових властивостей на основі яскравості та кольорових компонентів A та B.
lch	Задає колір в колірній моделі lch() (Lightness, Chroma, Hue). Чудово підходить для зміни яскравості та насиченості, порівняно з іншими кольоровими моделями.
light-dark	Два кольори одним рядком: перший для світлої схеми, другий для темної.
oklab	Визначає колір за допомогою параметрів яскравості (lightness), кольорового компонента A та кольорового компонента B в моделі Oklab. Вона надає зручний спосіб задати кольори, особливо для визначення кольорових властивостей на основі яскравості та кольорових компонентів.
oklch	Задає колір колірній моделі Oklch (Oklab).
rgb	Задає колір елементу за допомогою червоного, зеленого та синього каналів (RGB кольорів).
rgba	Колір у моделі RGB із прозорістю (альфа-каналом).
conic-gradient	Конічний градієнт, що охоплює коло або еліпс.
linear-gradient	Лінійний градієнт, що переходить від одного кольору до іншого.
radial-gradient	Радіальний градієнт тла елемента.
repeating-conic-gradient	Повторюваний конічний градієнт.
repeating-linear-gradient	Повторюваний лінійний градієнт, який повторюється на протязі елементу.
repeating-radial-gradient	Повторюваний радіальний градієнт, який повторюється на протязі елементу.
blur	Ефект розмиття для елемента з заданим радіусом розмиття.
brightness	Ефект зміни яскравості елемента з використанням вказаного коефіцієнта яскравості.
contrast	Ефект зміни контрастності елемента.
drop-shadow	Створює тінь до вказаного елемента.
grayscale	Перетворює кольорове зображення або елемент в його відтінок сірого шляхом зменшення насиченості кольорів
hue-rotate	Змінює колір елемента, повертаючи тоновий кут кольору на вказаний кут у просторі кольорів HSL.
invert	Змінює кольори елемента на протилежні (кольори інвертуються).
opacity	Прозорість елемента, дозволяючи контролювати ступінь видимості елемента та його дочірніх елементів.
saturate	Збільшення або зменшення насиченості кольору елемента.
sepia	Ефект сепії до елемента, що надає йому старовинний, потертий вигляд чорно-білої фотографії.
matrix	2D-трансформація шляхом через матрицю трансформації
matrix3d	3D-трансформація через 4x4 матрицю трансформації.
perspective	Трансформації в перспективна для 3D-елементів (змінює відстань до площини перегляду).
rotate	Обертання елементу навколо його центру
rotate3d	Обертання елемента у тривимірному просторі.
rotateX	Обертає елемент навколо горизонтальної вісі X
rotateY	Обертання елементу навколо вертикальної вісі Y
rotateZ	Обертання елементу навколо вісі Z
scale	Масштабує елемент.
scale3d	Зміну масштабу до вибраного елемента в тривимірному просторі
scaleX	Масштабування елемента по горизонталі (Розтягування в ширину)
scaleY	Масштабування елемента по вертикалі (Розтягування в висоту)
scaleZ	Масштабування елемента по вісі Z (Розтягування в глибину)
skew	Нахил елемента в двовимірному просторі
skewX	Нахил елемента вздовж горизонтальної осі
skewY	Нахил елемента вздовж вертикальної осі
translate	Зміщення елементу в двовимірному просторі
translate3d	Дозволяє вказувати динамічні значення для CSS властивостей, які можуть залежати від інших значень або контексту
translateX	Зміщує елемент по горизонталі
translateY	Зміщує елемент по вертикалі
translateZ	Зміщує елемент по вісі Z
circle	Задає форму елемента схожу на коло.
ellipse	Задає форму елемента схожу на еліпс.
inset	Встановлення кордонів елемента відносно його контейнера.
path	Задає форму елемента за допомогою SVG-шляхів.
polygon	Задає форму елемента схожу на багатокутник.
cross-fade	Накладає кілька світлин, створивши між ними певний плавний перехід.
element	Визначає значення <image>, яке генерується з HTML елемента. Ця зображення є "живим", що означає, що якщо HTML елемент змінюється, CSS властивості, що використовують отримане значення, автоматично оновлюються.
image	Задає зображення, подібно до функції `url()`, але з додатковими можливостями, такими як вказівка напрямку зображення, відображення лише частини зображення за допомогою фрагменту медіа та вказівка твердого кольору як запасного в разі неможливості відтворення зображень.
image-set	Набір зображень з різними розмірами і роздільністю, з яких веб-браузер може вибрати найбільш слушне зображення для використання на основі доступних розмірів пристрою.
paint	Дозволяє задати свою JS програму для малювання.
url	Задає URL-адресу ресурсу, який потрібно використати, наприклад, для зображення тла, шрифту, зовнішнього файлу в CSS, тощо.
fit-content	Функція fit-content() встановлює ширину або висоту елемента таким чином, щоб вона була рівною або меншою за вміст елемента.
minmax	Встановлює мінімальне та максимальне значення, які елемент може мати.
repeat	Повторення значень у CSS властивості для сітки або флексу.
counter	Створення та форматування лічильників у CSS.
counters	Створення властивості content елемента, яка відображає значення лічильника (counter()) або комбінації значень лічильників, які відносяться до певних елементів документу.
symbols	Задає набір символів, для використання в переліках `<ul>`, замість типових їх маркерів.
attr	Отримує значення HTML-атрибута для його використовувати в CSS.
env	Отримує значення змінної оточення для її використання в CSS.
var	Отримує значення CSS змінної (custom properties) для його використання в CSS.
cubic-bezier	Задає кубічну криву Безьє для анімації.
scroll	Задає CSS властивість animation-timeline елементу на часову шкалу прогресу прокручування.
steps	Задає послідовність кроків анімації, де елемент переходить миттєво з одного стану до іншого на кожному кроці.
annotation	Задає варіант анотації для використання в тексті.
character-variant	Задає альтернативний варіант для певних символів у шрифті.
ornaments	Задає стилізований варіант орнаментів для використання в тексті.
styleset	Задає стилістичний набір для певних символів у шрифті.
stylistic	Задає стилістичну альтернативу для певних символів у шрифті.
swash	Задає стилізований варіант символів для використання в тексті.
ch	Відносна одиниця вимірювання: ширина символу «0» поточного шрифту.
ex	Відносна одиниця вимірювання: висота малої літери «x» поточного шрифту.