ЛАБОРАТОРИЯ ДВИЖЕНИЯ / 06

Жидкое стекло выбор

Выбирай эффект, замедляй движение и изучай стекло.

iPhone 17 Pro Max · рабочая модель 440 × 956

9:41Окна дел100%

Раздел настроек

1. Геометрия окон›

Высота фона ICON / колбасы 80 px Размер пиктограммы внутри 68 px Максимальная высота полуокна 360 px Общий радиус · пиктограмма / колбаса / полуокно 40 px Вложенная пиктограмма · % от основной 65% Кегль короткого названия внутри 10.5 px

Фон ICON — та же колбаса, только его ширина равна высоте. Пиктограмма поверх него имеет собственный размер и может быть больше или меньше фона. Радиус один для основной пиктограммы, ICON/колбасы и полуокна; вложенная пиктограмма сохраняет ту же форму в уменьшенном масштабе.

2. Кнопка пиктограммы›

BUTTON-ICON-01

Блик-купол: почти плотный белый сверху → плавный переход → полная прозрачность по нижней дуге.

Тон внутренней площадки 91% Объём внутренней площадки 50% Темнота ободка 66% Толщина ободка 2 px Отступ ободка от края 6%

Блик

Плотность верхнего света 100% Ширина купола 72% Высота купола 48% Отступ купола сверху 6% Мягкость края купола 0.3 px

Внешняя тень

Сила тени 20% Смещение тени вниз 6 px Размытие тени 12 px

Пиктограмма

Масштаб пиктограммы 100%

3. Рабочее поле›

Фон рабочего поля Тон серого 8%

0% — белый, 100% — чёрный.

4. Фон окон›

Фон окна

Красный R 202 Зелёный G 220 Синий B 230 Прозрачность 65% Размытие фона 12 px

Обводка

Толщина обводки 0 px Цвет обводки Прозрачность обводки 0%

5. Расположение текста›

Расстояние от кружка до заголовка 10 px Заголовок сверху 20 px Дополнительный текст сверху 40 px Отступ текста справа 58 px

6. Типографика›

Шрифты

Гарнитура

Заголовок окна

Кегль 14 px Насыщенность Межстрочный 1.18 Межбуквенный 0 px Кегль в полном окне 22 px

Дополнительный текст

Кегль 12 px Насыщенность Межстрочный 1.28

Служебный текст

Кегль 11 px Насыщенность Межстрочный 1.20

7. Анимация и сохранение›

Этап перехода 100%

Переход Характер движения Длительность 500 мс Переразгон 3%

Локальная точка

Общий эталон

Изменения параметров сохраняются автоматически.

8. Фото пиктограммы›

Выбери окно, затем фотографию.

Фотография

Лаборатория: файл не загружается на сервер и не сохраняется после перезагрузки.

Анимация окна

Окно закрыто

Этап раскрытия 0%

Двигай ползунок этапа, чтобы рассмотреть форму в любой момент.

Характер движения

Параметры эффекта

Раскрытие Размер капли Сила линзы Размытие текста по краям Переразгон окна Упругость Появление текста Материал Размытие стекла Плотность заливки Насыщенность фона под стеклом Светлая кромка Тень Размытие всего фона Затемнение всего фона

Фон

Своё фото

Выбери пункт внутри окна — оно свернётся обратно в каплю.