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

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

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

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

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

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

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