Генератор шкалы отступов CSS
Создайте компактную шкалу отступов для интерфейса: от малого базового значения до крупных интервалов. Выберите коэффициент роста, число ступеней, округление и префикс переменных CSS. Каждая следующая ступень равна базовой величине, умноженной на коэффициент в соответствующей степени; затем значение округляется до заданного шага. Шкала помогает сохранить ритм, но конкретные отступы нужно проверить в макете на разных ширинах экрана.
Исходные данные
Замените примерные значения своими. Результат готовится в браузере.
Как работает инструмент
Каждая следующая ступень равна базовой величине, умноженной на коэффициент в соответствующей степени; затем значение округляется до заданного шага.
Что учитывать
Шкала помогает сохранить ритм, но конкретные отступы нужно проверить в макете на разных ширинах экрана.
Пример для значений в форме
Эти результаты получены из значений, уже заполненных выше. Кнопка «Сбросить» возвращает исходный пример.
- Готово:
- spacing-scale.css
- Переменных:
- 8
Как получить свой результат
- Введите данные в поле «Базовый отступ, px» и остальные параметры.
- Проверьте ограничения метода и нажмите «Сгенерировать».
- Скопируйте результат либо сохраните его в текстовом или специальном формате.
Ещё генераторы
Генератор адресов страниц из названий
Преобразуйте список названий в короткие адреса для страниц, файлов или карточек товара.
Открыть инструмент →План пакетного переименования файлов
Подготовьте список новых имён для серии фотографий, документов или сканов.
Открыть инструмент →Генератор последовательных номеров
Составьте последовательность внутренних номеров для заказов, актов, накладных или образцов.
Открыть инструмент →