Довідник по CSS функціям
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 властивостей, які можуть залежати від інших значень або контексту. |
| 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. |
| exp() | Розраховує експоненту вказаного числа. |
| fit-content() | Функція fit-content() встановлює ширину або висоту елемента таким чином, щоб вона була рівною або меншою за вміст елемента. |
| grayscale() | Перетворює кольорове зображення або елемент в його відтінок сірого шляхом зменшення насиченості кольорів |
| hsl() | Задає колір елементу за допомогою значень відтінку (hue), насиченості (saturation) та світлості (lightness). |
| 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). Чудово підходить для зміни яскравості та насиченості, порівняно з іншими кольоровими моделями. |
| 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 кольорів). |
| 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. |