clamp() — это математическая функция CSS, задающая значение между минимумом и максимумом: clamp(MIN, VAL, MAX). Она возвращает VAL, пока оно между MIN и MAX — когда VAL опускается ниже MIN, возвращается MIN, а когда поднимается выше MAX — MAX. Это делает плавную типографику возможной без медиа-запросов.
Задайте минимальный и максимальный размеры шрифта плюс диапазон вьюпорта, в котором происходит масштабирование. Инструмент вычисляет идеальную формулу на основе vw и показывает предпросмотр размера шрифта при шести ширинах вьюпорта, а также кривую изменения размера по всему диапазону.
Frequently Asked Questions
Q: Что делает clamp() в CSS?
Что делает clamp() в CSS? clamp(MIN, VAL, MAX) выбирает значение между MIN и MAX. Если VAL меньше MIN, возвращается MIN; если больше MAX — MAX; иначе VAL. Идеально для плавных размеров, которые никогда не становятся слишком малыми или большими.
Q: Чем clamp() отличается от min() и max()?
Чем clamp() отличается от min() и max()? min() выбирает наименьшее значение, max() — наибольшее, а clamp() объединяет оба: зажимает среднее значение между нижней и верхней границей. clamp() — рабочая лошадка плавной типографики.
Q: Поддерживается ли clamp() во всех браузерах?
Поддерживается ли clamp() во всех браузерах? Да. clamp(), min() и max() поддерживаются во всех современных браузерах с 2020 года (Chrome 79+, Firefox 75+, Safari 13.1+).
Q: Какие размеры вьюпорта использовать для плавной типографики?
Какие размеры вьюпорта использовать для плавной типографики? Обычные диапазоны: 320px-1200px для обычных сайтов или 360px-768px для mobile-first проектов. За пределами vmax размер остаётся на максимуме — это задумано.
Q: Можно ли использовать clamp() и для отступов?
Можно ли использовать clamp() и для отступов? Да. Плавные паддинги и промежутки используют ту же формулу: clamp(16px, 4vw, 48px). Плавные отступы сохраняют ритм между устройствами без лишних медиа-запросов.
Русские традиционные цвета
От гжельской синевы до хохломского золота — русская палитра рождена народными промыслами, иконописью и северной природой. Эти цвета до сих пор вдохновляют дизайнеров по всему миру.
Алый #FF2400Алый цвет знамён, сарафанов и праздничной символики
Васильковый #6495EDЦвет полевых васильков — символ русских лугов
Золото Хохломы #D4AF37Золотой орнамент хохломской росписи
Гжель Синий #005A9CКобальтовая синева гжельской керамики
Изумрудный #50C878Цвет уральских самоцветов и малахита
Бордовый #800020Тёмно-красный цвет театральных занавесов
Янтарный #FFBF00Балтийский янтарь — золото Калининграда
Сиреневый #C8A2C8Нежная сирень майских садов
Охристый #CC7722Цвет иконописи и древних фресок
Снежно-белый #F8F8FFБелый снег русских зим
Q: Что такое гжель?
Что такое гжель? Гжель (#005A9C) — традиционная русская керамика с синей кобальтовой росписью на белом фоне, производимая в Подмосковье с XVIII века и ставшая символом русского народного искусства.
Q: Что такое хохлома?
Что такое хохлома? Хохлома — традиционная деревянная роспись с золотым орнаментом (#D4AF37) на чёрном или красном фоне, создаваемая в Нижегородской области с XVII века.