Старт
Основы
Утилиты
Компоненты
Смарт-компоненты
search
[!Switch](size=1 title='Темный' on='Включен' off='Выключен')#theme_switch [!Switch](size=1 title='Широкий формат' on='Включен' off='Выключен')#widescreen_switch [!Radio className=lang_size name=radio_switch](size=1 count=3 text=A title="Размер текста" checked=1 description=[Уменьшенный,По умолчанию ,Повышенный])#size_switch
Утилиты
  • Макет
    • Соотношение сторон (Aspect Ratio)
    • Контейнер (container)
    • Максимальный размер контейнера (max-container)
    • Метод расчёта размера элемента (box-sizing)
    • Метод отображения элемента (display)
    • Позиция элемента (element-position)
    • Переполнение элемента (overflow)
    • Плавающий элемент (float)
    • Перенос после плавающих элементов (clear)
    • Видимость элемента (visibility)
    • Положение элемента по оси Z (z-index)
    • Оформление элемента, разбитого на несколько строк (box-decoration-break)
    • Контекст наложения (isolation)
  • Разрыв макета
    • Колонки (column)
    • Разрыв после колонки (break-after)
    • Разрыв до элемента (break-before)
    • Разрыв внутри элемента (break-inside)
  • Объекты
    • Заполнение объектом (object-fit)
    • Позиционирование объекта (object-position)
  • Размеры
    • Ширина (width)
    • Минимальная ширина (min-width)
    • Максимальная ширина (max-width)
    • Высота (height)
    • Минимальная высота (min-height)
    • Максимальная высота (max-height)
  • Отступы
    • Внутренний отступ (padding)
    • Внешний отступ (margin)
    • Промежутки (space)
  • Сетка
    • Шаблон колонок сетки (grid-template-columns)
    • Размер колонки сетки (grid-column)
    • Начальное положение колонки сетки (grid-column-start)
    • Конечное положение колонки сетки (grid-column-end)
    • Автоматическая ширина столбцов сетки (grid-auto-columns)
    • Шаблон строк сетки (grid-template-rows)
    • Размер строки сетки (grid-row)
    • Начальное положение строки сетки (grid-row-start)
    • Конечное положение строки сетки (grid-row-end)
    • Автоматический размер строк сетки (grid-auto-rows)
    • Автоматическое формирование сетки (grid-auto-flow)
  • Флексбоксы
    • Базисный размер (flex-basis)
    • Направление размещения (flex-direction)
    • Перенос элементов (flex-wrap)
    • Гибкость элементов (flex)
    • Растяжимость элементов (flex-grow)
    • Сжимаемость (flex-shrink)
  • Утилиты для сетки и флексбоксов
    • Сортировка (order)
    • Промежутки между элементами (gap)
    • Выравнивание содержимого по основной оси (justify-content)
    • Выравнивание каждого элемента по основной оси внутри ячейки (justify-items)
    • Выравнивание отдельного элемента в ячейке по основной оси (justify-self)
    • Выравнивание содержимого по поперечной оси (align-content)
    • Выравнивание каждого элемента в ячейках по поперечной оси (align-items)
    • Выравнивание отдельного элемента по поперечной оси (align-self)
    • Размещение содержимого по обеим осям (place-content)
    • Размещение элементов по обеим осям (place-items)
    • Размещение отдельного элемента (place-self)
    • Одновременное выравнивание по двум осям (flex-align)
  • Типографика
    • Параметры по умолчанию (text-default)
    • Модификаторы ролей текста
    • Размер текста (text-size)
    • Размер заголовков (title-size)
    • Семейство шрифтов (font-family)
    • Сглаживание шрифтов (font-smoothing)
    • Стиль шрифта (font-style)
    • Толщина шрифта (font-weight)
    • Начертание шрифта (капитель) (font-variant)
    • Начертание цифр (font-variant-numeric)
    • Трансформация текста (text-transform)
    • Высота строки (line-height)
    • Трекинг текста (letter-spacing)
    • Отступ текста (text-indent)
    • Длина строки (text-max-width)
    • Выравнивание текста (text-align)
    • Выравнивание по вертикали (vertical-align)
    • Стиль маркера списка (list-style-type)
    • Положение маркера списка (list-style-position)
    • Обрезка текста (text-overflow)
    • Обработка пробелов (white-space)
    • Перенос строк (word-break)
    • Содержимое
  • Оформление текста
    • Цвет текста
    • Оформление текста
    • Цвет оформления текста
    • Стиль оформления текста
    • Толщина оформления текста
    • Смещение подчеркивания текста
    • Выделение текста
    • Оформление кода
  • Ссылки
    • Параметры по умолчанию для ссылок
    • Наследственный цвет ссылок
    • Оформление ссылок
    • Подчеркивание ссылок
  • Таблицы
    • Параметры по умолчанию для таблиц
    • Оформление таблицы
    • Чередование строки и столбцов
    • Активные строки и ячейки
    • Границы таблицы
    • Границы вокруг ячеек
    • Макет таблицы
  • SVG
    • Размер SVG-изображений
    • Цвет заливки
    • Тип заливки
    • Цвет обводки
    • Толщина обводки
    • Углы обводки (Line Join)
    • Концы обводки (Line Cap)
  • Граница
    • Параметры по умолчанию (для границ)
    • Толщина границы
    • Стиль границы
    • Цвет границы
    • Закругление границ
  • Разделитель
    • Параметры по умолчанию
    • Толщина разделителя
    • Стиль разделителя
    • Цвет разделителя
  • Внешняя граница
    • Параметры по умолчанию
    • Толщина внешней границы
    • Отступ внешней границы
    • Стиль внешней границы
    • Цвет внешней границы
  • Цвет фона
  • Фоновое изображение
    • Вложение фона
    • Обрезка фона
    • Вложение фона
    • Положение фона
    • Повтор фона
    • Размер фона
    • Паттерн фона
  • Маска
    • Область маски
    • Композиция маски
    • Режим маски
    • Вложение маски
    • Положение маски
    • Повтор маски
    • Размер маски
    • Тип маски
  • Градиент
    • Вид градиента
    • Градиент фона
  • Тени
    • Тень элемента
    • Цвет тени
    • Падающая тень (drop-shadow)
    • Цвет падающей тени (drop-shadow-color)
  • Полосы
    • Размер полосок
    • Цвет полос
  • Фильтры элемента
    • Размытие элемента (filter-blur)
    • Прозрачность элемента (filter-opacity)
    • Яркость элемента (filter-brightness)
    • Контрастность элемента (filter-contrast)
    • Монохромность элемента (filter-grayscale)
    • Вращение оттенка элемента (filter-hue-rotate)
    • Инвертирование цвета элемента (filter-invert)
    • Насыщенность элемента (filter-saturate)
    • Сепия элемента (filter-sepia)
  • Фильтры подложки
    • Размытие фона элемента (backdrop-blur)
    • Прозрачность фона элемента (backdrop-opacity)
    • Контрастность фона элемента (backdrop-contrast)
    • Фон в оттенках серого элемента (backdrop-grayscale)
    • Вращение оттенка фона элемента (backdrop-hue-rotate)
    • Инвертирование цвета фона элемента (backdrop-invert)
    • Насыщенность подложки (backdrop-saturate)
    • Сепия подложки (backdrop-sepia)
  • Анимация
    • Параметры по умолчанию для анимации
    • Общее свойство перехода
    • Продолжительность перехода
    • Функция времени перехода
    • Задержка перехода
    • Анимация при появлении
    • Тип анимации
  • Прокрутка
    • Поведение при прокрутке
    • Плавность прокрутки
    • Внешний отступ прокрутки
    • Внутренний отступ прокрутки (scroll-padding)
    • Выравнивание привязки прокрутки (scroll-snap-align)
    • Ограничитель прокрутки (scroll-snap-stop)
    • Тип привязки прокрутки (scroll-snap-type)
    • Цвет подложки прокрутки (scroll-backdrop-color)
    • Толщина подложки прокрутки (scroll-backdrop-width)
    • Радиус границы подложки прокрутки (scroll-backdrop-radius)
    • Цвет ползунка прокрутки (scroll-slider-color)
    • Толщина ползунка прокрутки (scroll)
    • Радиус границы ползунка прокрутки (scroll-slider-radius)
    • Полоса прокрутки при наведении (scroll-hover)
  • Преобразования
    • Масштабирование (transform-scale)
    • Вращение (transform-rotate)
    • Смещение (transform-translate)
    • Наклон (transform-skew)
    • Исходные координаты (transform-origin)
  • Формы
    • Акцентный цвет (accent-color)
    • Цвет каретки (caret-color)
    • Сброс стиля (appearance)
    • События указателя (pointer-events)
    • Изменение размера (resize)
  • Интерактивность
    • Вид курсора (cursor)
    • Сенсорное действие (touch-action)
    • Выделение текста (user-select)
    • Подготовка к изменениям (will-change)
  • Печать
    • Отображение элемента при печати (display-print)
    • Видимость элемента при печати (print-visibility)

Фоновое изображениеlink

Утилиты категории Фоновое изображение помогают настраивать связанные CSS-свойства и паттерны в интерфейсе.

Материалы разделаlink

  • Вложение фона
  • Обрезка фона
  • Вложение фона
  • Паттерн фона
  • Положение фона
  • Повтор фона
  • Размер фона

Связанные категорииlink

  • Фоновый цвет
  • Маска
  • Градиент
Навигация
  • Фоновое изображение
  • Материалы раздела
  • Связанные категории
[!Fab](size=2 type=default scheme=primary)