Функции значений CSS

Функции значений CSS — это инструкции, которые вызывают специальную обработку данных или вычисления, чтобы вернуть CSS-значение для свойства CSS. Функции значений CSS представляют более сложные типы данных и могут принимать входные аргументы для вычисления возвращаемого значения.

Синтаксис

selector {
  property: function([argument]? [, argument]!);
}

Синтаксис значения начинается с имени функции, за которым следует открывающая скобка (. Далее идут аргументы, а функция завершается закрывающей скобкой ).

Функции могут принимать несколько аргументов, форматируемых аналогично значениям свойств CSS. Пробелы допускаются, но не обязательны внутри скобок. В некоторых функциональных нотациях несколько аргументов разделяются запятыми, а в других — пробелами.

Функции преобразования

CSS <transform-function> тип данных описывает преобразование внешнего вида. Он используется в качестве значения свойства transform.

Функции перемещения

translateX()

Перемещает элемент по горизонтали.

translateY()

Перемещает элемент по вертикали.

translateZ()

Перемещает элемент вдоль оси z.

translate()

Перемещает элемент в двумерной плоскости.

translate3d()

Перемещает элемент в трёхмерном пространстве.

Функции поворота

rotateX()

Поворачивает элемент вокруг горизонтальной оси.

rotateY()

Поворачивает элемент вокруг вертикальной оси.

rotateZ()

Поворачивает элемент вокруг оси z.

rotate()

Поворачивает элемент вокруг фиксированной точки в двумерной плоскости.

rotate3d()

Поворачивает элемент вокруг фиксированной оси в трёхмерном пространстве.

Функции масштабирования

scaleX()

Увеличивает или уменьшает масштаб элемента по горизонтали.

scaleY()

Увеличивает или уменьшает масштаб элемента по вертикали.

scaleZ()

Увеличивает или уменьшает масштаб элемента вдоль оси z.

scale()

Увеличивает или уменьшает масштаб элемента в двумерной плоскости.

scale3d()

Увеличивает или уменьшает масштаб элемента в трёхмерном пространстве.

Функции наклона

skewX()

Наклоняет элемент по горизонтали.

skewY()

Наклоняет элемент по вертикали.

skew()

Наклоняет элемент в двумерной плоскости.

Матричные функции

matrix()

Описывает однородную матрицу двумерного преобразования.

matrix3d()

Описывает трёхмерное преобразование в виде однородной матрицы 4×4.

Функции перспективы

perspective()

Задаёт расстояние между пользователем и плоскостью z=0.

Математические функции

Математические функции позволяют задавать числовые значения CSS в виде математических выражений.

На каждой странице ниже содержится подробная информация о синтаксисе математической функции, данных о совместимости с браузерами, примерах и многом другом. Для общего введения в математические функции CSS см. раздел Использование математических функций CSS.

Базовая арифметика

calc()

Выполняет основные арифметические вычисления с числовыми значениями.

calc-size()

Выполняет вычисления с внутренними значениями размеров, такими как auto, fit-content и max-content, которые не поддерживаются функцией calc().

Функции сравнения

min()

Вычисляет наименьшее значение из списка.

max()

Вычисляет наибольшее значение из списка.

clamp()

Вычисляет центральное значение на основе минимального, центрального и максимального значений.

Функции значений с шагом

round()

Вычисляет округлённое число в соответствии со стратегией округления.

mod()

Вычисляет остаток по модулю (со знаком делителя) при делении одного числа на другое.

progress()

Вычисляет положение значения между двумя другими значениями — начальным и конечным. Результат представляет прогресс между начальным и конечным значениями, где 0 соответствует началу, а 1 — концу.

rem()

Вычисляет остаток (со знаком делимого) при делении одного числа на другое.

Тригонометрические функции

sin()

Вычисляет тригонометрический синус числа.

cos()

Вычисляет тригонометрический косинус числа.

tan()

Вычисляет тригонометрический тангенс числа.

asin()

Вычисляет тригонометрический арксинус числа.

acos()

Вычисляет тригонометрический арккосинус числа.

atan()

Вычисляет тригонометрический арктангенс числа.

atan2()

Вычисляет тригонометрический арктангенс двух чисел на плоскости.

Экспоненциальные функции

pow()

Вычисляет основание, возведённое в степень числа.

sqrt()

Вычисляет квадратный корень числа.

hypot()

Вычисляет квадратный корень суммы квадратов аргументов.

log()

Вычисляет логарифм числа.

exp()

Возводит e в степень числа.

Функции, связанные со знаком

abs()

Вычисляет абсолютное значение числа.

sign()

Вычисляет знак числа (положительный или отрицательный).

Функции фильтров

CSS <filter-function> тип данных представляет графический эффект, который может изменить внешний вид исходного изображения. Он используется в свойствах filter и backdrop-filter.

blur()

Увеличивает гауссово размытие изображения.

brightness()

Делает изображение светлее или темнее.

contrast()

Увеличивает или уменьшает контрастность изображения.

drop-shadow()

Добавляет падающую тень за изображением.

grayscale()

Преобразует изображение в оттенки серого.

hue-rotate()

Изменяет общий оттенок изображения.

invert()

Инвертирует цвета изображения.

opacity()

Добавляет прозрачность изображению.

saturate()

Изменяет общую насыщенность изображения.

sepia()

Усиливает эффект сепии на изображении.

Функции цвета

CSS <color> тип данных задаёт различные представления цвета.

rgb()

Задаёт цвет с помощью компонентов красного, зелёного, синего и альфа-канала (прозрачности).

hsl()

Задаёт цвет с помощью компонентов оттенка, насыщенности, светлоты и альфа-канала (прозрачности).

hwb()

Задаёт цвет с помощью компонентов оттенка, белизны и черноты.

lch()

Задаёт цвет с помощью компонентов светлоты, цветности и оттенка.

oklch()

Задаёт цвет с помощью компонентов светлоты, цветности, оттенка и альфа-канала (прозрачности).

lab()

Задаёт цвет с помощью светлоты, расстояния по оси a и расстояния по оси b в цветовом пространстве Lab.

oklab()

Задаёт цвет с помощью светлоты, расстояния по оси a, расстояния по оси b в цветовом пространстве Lab и альфа-канала (прозрачности).

color()

Задаёт определённое цветовое пространство вместо неявного цветового пространства sRGB.

color-mix()

Смешивает два цветовых значения в заданном цветовом пространстве в заданной пропорции.

contrast-color()

Возвращает цвет с максимальной контрастностью для заданного цвета.

device-cmyk()

Задаёт цвета CMYK способом, зависящим от устройства.

alpha()

Возвращает цвет с изменённым альфа-каналом (прозрачностью).

light-dark()

Возвращает один из двух заданных цветов в зависимости от текущей цветовой схемы.

dynamic-range-limit-mix()

Создаёт пользовательское ограничение максимальной яркости, представляющее собой смесь ключевых слов dynamic-range-limit в заданных процентных соотношениях.

Функции изображений

CSS <image> тип данных обеспечивает графическое представление изображений или градиентов.

Функции градиентов

linear-gradient()

В линейных градиентах цвета плавно переходят вдоль воображаемой линии.

radial-gradient()

В радиальных градиентах цвета плавно переходят от центральной точки (начала).

conic-gradient()

В конических градиентах цвета плавно переходят по кругу.

repeating-linear-gradient()

Похожа на linear-gradient() и принимает те же аргументы, но бесконечно повторяет цветовые точки во всех направлениях, покрывая весь контейнер.

repeating-radial-gradient()

Похожа на radial-gradient() и принимает те же аргументы, но бесконечно повторяет цветовые точки во всех направлениях, покрывая весь контейнер.

repeating-conic-gradient()

Похожа на conic-gradient() и принимает те же аргументы, но бесконечно повторяет цветовые точки во всех направлениях, покрывая весь контейнер.

Функции изображений

image()

Задаёт <image> аналогично типу <url>, но с дополнительными возможностями, включая указание направления изображения и резервных изображений на случай, если предпочтительное изображение не поддерживается.

image-set()

Выбирает наиболее подходящее CSS-изображение из заданного набора, в первую очередь для экранов с высокой плотностью пикселей.

cross-fade()

Смешивает два или более изображений с заданной прозрачностью.

element()

Задаёт значение <image>, созданное на основе произвольного HTML-элемента.

paint()

Задаёт значение <image>, созданное с помощью PaintWorklet.

Функции счётчиков

Функции счётчиков CSS обычно используются со свойством content, хотя теоретически их можно использовать везде, где поддерживается <string>.

counter()

Возвращает строку, представляющую текущее значение именованного счётчика, если он существует.

counters()

Позволяет использовать вложенные счётчики и возвращает объединённую строку, представляющую текущие значения именованных счётчиков, если они существуют.

symbols()

Определяет стили счётчиков непосредственно в значении свойства.

Функции фигур

Базовые фигуры

CSS <basic-shape> тип данных представляет графическую фигуру. Он используется в свойствах clip-path, offset-path и shape-outside.

circle()

Задаёт форму круга.

ellipse()

Задаёт форму эллипса.

inset()

Задаёт форму прямоугольника с отступами.

rect()

Задаёт форму прямоугольника, используя расстояния от верхнего и левого краёв опорного блока.

xywh()

Задаёт форму прямоугольника, используя указанные расстояния от верхнего и левого краёв опорного блока, а также ширину и высоту прямоугольника.

polygon()

Задаёт форму многоугольника.

path()

Принимает строку пути SVG для рисования фигуры.

shape()

Принимает разделённый запятыми список команд, определяющих рисуемую фигуру.

Другие функции фигур

ray()

Допускается в свойстве offset-path; задаёт отрезок, по которому может двигаться анимированный элемент.

superellipse()

Задаёт кривизну эллипса; может использоваться для указания <corner-shape-value>, который применяется со свойством corner-shape и его составными и связанными свойствами.

Функции ссылок

Следующие функции используются в качестве значений свойств для ссылки на значение, определённое в другом месте:

attr()

Использует атрибуты, заданные в HTML-элементе.

env()

Использует переменную окружения, заданную пользовательским агентом.

if()

Условно задаёт значение свойства в зависимости от результата запроса стиля, медиазапроса или запроса поддержки функции.

url()

Использует файл по указанному URL.

var()

Использует значение пользовательского свойства вместо любой части значения другого свойства.

Функции сетки

Следующие функции используются для определения сетки CSS:

fit-content

Ограничивает заданный размер доступным размером согласно формуле min(maximum size, max(minimum size, argument)).

minmax()

Задаёт диапазон размеров: не меньше min и не больше max.

repeat()

Представляет повторяющийся фрагмент списка дорожек и позволяет задавать большое количество столбцов или строк с повторяющимся шаблоном.

Функции шрифтов

Функции шрифтов CSS используются со свойством font-variant-alternates для управления использованием альтернативных глифов.

stylistic()

Включает стилистические альтернативы для отдельных символов. Параметр — имя, заданное в шрифте и сопоставленное с числом. Соответствует значению OpenType salt, например salt 2.

styleset()

Включает стилистические альтернативы для наборов символов. Параметр — имя, заданное в шрифте и сопоставленное с числом. Соответствует значению OpenType ssXY, например ss02.

character-variant()

Включает определённые стилистические альтернативы для символов. Функция похожа на styleset(), но не создаёт согласованные глифы для набора символов: отдельные символы получают независимые и не обязательно согласованные стили. Параметр — имя, заданное в шрифте и сопоставленное с числом. Соответствует значению OpenType cvXY, например cv02.

swash()

Включает глифы с росчерками. Параметр — имя, заданное в шрифте и сопоставленное с числом. Соответствует значениям OpenType swsh и cswh, например swsh 2 и cswh 2.

ornaments()

Включает орнаменты, например флероны и другие декоративные глифы. Параметр — имя, заданное в шрифте и сопоставленное с числом. Соответствует значению OpenType ornm, например ornm 2.

annotation()

Включает аннотации, например цифры в кружках или перевёрнутые символы. Параметр — имя, заданное в шрифте и сопоставленное с числом. Соответствует значению OpenType nalt, например nalt 2.

Функции плавности

CSS <easing-function> тип данных представляет математическую функцию. Он используется в свойствах переходов и анимации:

linear()

Функция плавности, которая выполняет линейную интерполяцию между точками.

cubic-bezier()

Функция плавности, задающая кубическую кривую Безье.

steps()

Переход по заданному количеству шагов, каждый из которых отображается в течение одинакового времени.

Функции анимации

Следующие функции используются в качестве значений различных свойств animation-timeline:

scroll()

Задаёт для animation-timeline элемента анонимную временную шкалу прогресса прокрутки.

view()

Задаёт для animation-timeline элемента анонимную временную шкалу прогресса просмотра.

Функции позиционирования относительно якоря

Функции позиционирования относительно якоря используются для позиционирования и задания размеров элементов, расположенных относительно якоря, с учётом положения и размера связанных с ними якорных элементов.

anchor()

Возвращает длину относительно положения краёв связанного якорного элемента элемента, расположенного относительно якоря.

anchor-size()

Возвращает длину относительно размера связанного якорного элемента.

Функции подсчёта в дереве

Следующие функции возвращают целочисленное значение на основе DOM-дерева, а не плоского дерева, как это делают большинство значений CSS:

sibling-index()

Возвращает целое число, отражающее положение выбранного элемента среди его соседних элементов.

sibling-count()

Возвращает целое число, отражающее общее количество соседних элементов, включая выбранный элемент.

Алфавитный указатель функций

• -moz-image-rect() Нестандартное Устарело
• abs()
• acos()
• alpha
• anchor()
• anchor-size()
• asin()
• atan()
• atan2()
• attr()
• blur()
• brightness()
• calc()
• calc-size() Экспериментальная
• circle()
• clamp()
• color()
• color-mix()
• conic-gradient()
• contrast()
• contrast-color()
• cos()
• counter()
• counters()
• cross-fade()
• cubic-bezier()
• device-cmyk()
• drop-shadow()
• dynamic-range-limit-mix() Экспериментальная
• element() Экспериментальная
• ellipse()
• env()
• exp()
• fit-content
• grayscale()
• hsl()
• hue-rotate()
• hwb()
• hypot()
• if() Экспериментальная
• image()
• image-set()
• inset()
• invert()
• lab()
• layer()
• lch()
• light-dark()
• linear()
• linear-gradient()
• log()
• matrix()
• matrix3d()
• max()
• min()
• minmax()
• mod()
• oklab()
• oklch()
• opacity()
• paint()
• palette-mix()
• path()
• perspective()
• polygon()
• pow()
• progress()
• radial-gradient()
• random()
• ray()
• rect()
• rem()
• repeat()
• repeating-conic-gradient()
• repeating-linear-gradient()
• repeating-radial-gradient()
• rgb()
• rotate()
• rotate3d()
• rotateX()
• rotateY()
• rotateZ()
• round()
• saturate()
• scale()
• scale3d()
• scaleX()
• scaleY()
• scaleZ()
• scroll()
• sepia()
• shape()
• sibling-count()
• sibling-index()
• sign()
• sin()
• skew()
• skewx()
• skewy()
• sqrt()
• steps()
• superellipse() Экспериментальная
• symbols()
• tan()
• translate()
• translate3d()
• translateX()
• translateY()
• translateZ()
• type() Экспериментальная
• url()
• var()
• view()
• xywh()

См. также

• Модуль значений и единиц измерения CSS
• Изучите: значения и единицы измерения