СПРАВОЧНИК

Функции CSS

calc, var, цвета, градиенты, трансформации

Функции CSS — это значения-выражения, которые вычисляются браузером прямо в свойствах. С их помощью считают размеры (calc), задают переменные (var), смешивают цвета, рисуют градиенты, трансформируют и фильтруют элементы, описывают grid-дорожки. В этом справочнике собраны самые востребованные функции с короткими объяснениями и рабочими примерами.

Градиенты 4

conic-gradient()
conic-gradient(from угол at позиция, цвет, …)Конический градиент — цвета вращаются вокруг центра.
linear-gradient()
linear-gradient(угол, цвет, цвет, …)Линейный градиент вдоль заданного направления.
radial-gradient()
radial-gradient(форма at позиция, цвет, …)Радиальный градиент из центра наружу.
repeating-linear-gradient()
repeating-linear-gradient(угол, цвет позиция, …)Линейный градиент, повторяющийся как узор.

Математика и размеры 4

calc()
calc(выражение)Арифметика прямо в значении свойства: +, −, *, /.
clamp()
clamp(мин, предпочт, макс)Зажимает значение между минимумом и максимумом.
max()
max(значение, значение, …)Выбирает наибольшее из перечисленных значений.
min()
min(значение, значение, …)Выбирает наименьшее из перечисленных значений.

Переменные 1

var()
var(--имя, запасное)Подставляет значение пользовательского свойства (CSS-переменной).

Прочее 6

attr()
attr(имя-атрибута)Подставляет значение HTML-атрибута в CSS.
counter()
counter(имя, стиль)Выводит значение CSS-счётчика.
cubic-bezier()
cubic-bezier(x1, y1, x2, y2)Задаёт собственную кривую плавности анимации.
env()
env(переменная, запасное)Системная переменная окружения (например, безопасные отступы).
steps()
steps(число, позиция)Ступенчатая функция времени для анимаций.
url()
url(путь)Ссылка на внешний ресурс (картинку, шрифт, SVG).

Сетка и размеры 3

fit-content()
fit-content(предел)Размер по содержимому, но не больше предела.
minmax()
minmax(мин, макс)Задаёт диапазон размера grid-дорожки.
repeat()
repeat(счёт, дорожка)Повторяет описание grid-дорожек.

Трансформации 9

matrix()
matrix(a, b, c, d, e, f)Произвольное 2D-преобразование одной матрицей.
perspective()
perspective(длина)Задаёт глубину 3D-сцены для трансформаций.
rotate()
rotate(угол)Поворачивает элемент на заданный угол.
scale()
scale(sx, sy)Масштабирует элемент.
skew()
skew(ax, ay)Наклоняет (скашивает) элемент по осям.
translate()
translate(x, y)Сдвигает элемент по осям X и Y.
translate3d()
translate3d(x, y, z)Сдвиг в трёх измерениях с GPU-ускорением.
translateX()
translateX(x)Сдвиг только по горизонтали.
translateY()
translateY(y)Сдвиг только по вертикали.

Фильтры 7

blur()
blur(радиус)Размывает элемент по Гауссу.
brightness()
brightness(множитель)Меняет яркость элемента.
contrast()
contrast(множитель)Регулирует контрастность.
drop-shadow()
drop-shadow(x y радиус цвет)Тень по реальной форме элемента (включая прозрачность PNG).
grayscale()
grayscale(доля)Обесцвечивает элемент.
hue-rotate()
hue-rotate(угол)Сдвигает все цвета по цветовому кругу.
saturate()
saturate(множитель)Меняет насыщенность цветов.

Цвета 6

color-mix()
color-mix(in пространство, цвет1 %, цвет2 %)Смешивает два цвета в заданном цветовом пространстве.
hsl()
hsl(H S% L%)Цвет по тону, насыщенности и светлоте.
hsla()
hsla(H, S%, L%, A)HSL с альфа-каналом.
hwb()
hwb(H W% B%)Цвет по тону с добавлением белого и чёрного.
rgb()
rgb(R G B / A)Цвет по компонентам красный/зелёный/синий.
rgba()
rgba(R, G, B, A)RGB с явным альфа-каналом (прозрачностью).
Поддержать проект