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

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

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

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

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

translateX()

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

translateY()

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

translateZ()

Смещает элемент по оси z.

translate()

Смещает элемент на 2D плоскости.

translate3d()

Смещает элемент в 3D пространстве.

rotateX()

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

rotateY()

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

rotateZ()

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

rotate()

Вращает элемент вокруг фиксированной точки на 2D плоскости.

rotate3d()

Вращает элемент вокруг фиксированной оси в 3D пространстве.

scaleX()

Масштабирует элемент по горизонтали.

scaleY()

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

scaleZ()

Масштабирует элемент по оси z.

scale()

Масштабирует элемент на 2D плоскости.

scale3d()

Масштабирует элемент в 3D пространстве.

skewX()

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

skewY()

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

skew()

Наклоняет элемент на 2D плоскости.

matrix()

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

matrix3d()

Описывает 3D преобразование как однородную матрицу 4×4.

perspective()

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

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

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

calc()

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

min()

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

max()

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

clamp()

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

round()

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

mod()

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

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()

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

color-contrast()

Выбирает наибольший цветовой контраст из списка цветов по сравнению с базовым значением цвета.

device-cmyk()

Определяет цвета CMYK в зависимости от устройства.

light-dark()

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

Тип данных 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()

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

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

attr()

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

env()

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

<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()

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

annotation()

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

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

linear()

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

cubic-bezier()

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

steps()

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

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

scroll()

Устанавливает animation-timeline элемента в анимацию прокрутки по умолчанию.

view()

Устанавливает animation-timeline элемента в анимацию просмотра по умолчанию.

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

anchor()

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

anchor-size()

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

• CSS Значения и единицы
• Введение в CSS: Значения и единицы