Служебный раздел · лаборатория
Переходы между секциями
Пять вариантов на одном содержимом и на обоих стыках. Грани с главной сняты 20.08 — страница нужна, чтобы выбрать им замену по картинке, видя цену. Выбранный вариант переезжает на главную, остальные остаются здесь.
Высота слоя
1. Дымка
Размытые монохромные слои сходятся к линии стыка. Формы нет — есть туман.
Карточка секцииСодержимое верхней секции. Переход обязан заезжать под него.
Карточка секцииСодержимое нижней секции. Тот же переход, стык в другую сторону ниже.
Карточка секцииИ снова верхний тон — чтобы обратный стык было с чем сравнить.
- Вес: три градиента в CSS, ни одного запроса
- 390px: высота вдвое меньше, размытие с 70 до 40px
- Оба стыка: да, пятна красятся тоном своей области
2. Скруглённая плита
Нижняя секция скругляется сверху и наезжает на верхнюю. Граней нет вовсе — объём даёт тень.
Карточка секцииСодержимое верхней секции. Переход обязан заезжать под него.
Карточка секцииСодержимое нижней секции. Тот же переход, стык в другую сторону ниже.
Карточка секцииИ снова верхний тон — чтобы обратный стык было с чем сравнить.
- Вес: одна фигура в CSS, ни одного запроса
- 390px: радиус с 64 до 32px, иначе скругление съедает половину полосы
- Оба стыка: да, плита всегда красится тоном нижней секции
3. Стеклянная полка
Полоса стекла на стыке: сквозь неё просвечивает верхняя секция.
Карточка секцииСодержимое верхней секции. Переход обязан заезжать под него.
Карточка секцииСодержимое нижней секции. Тот же переход, стык в другую сторону ниже.
Карточка секцииИ снова верхний тон — чтобы обратный стык было с чем сравнить.
- Вес: CSS, но backdrop-filter — работа для видеокарты, не для трафика
- 390px: полоса пропорционально ниже; на слабых телефонах стекло дороже всего
- Оба стыка: да, но на светлом стекле ловить нечего — приём живёт тёмной половиной
4. Растровый рельеф
Кадр дымки во всю ширину, сгенерированный по брифу docs/design/MJ_BRIEFS.md §А.
Карточка секцииСодержимое верхней секции. Переход обязан заезжать под него.
Карточка секцииСодержимое нижней секции. Тот же переход, стык в другую сторону ниже.
Карточка секцииИ снова верхний тон — чтобы обратный стык было с чем сравнить.
- Вес: 378 КБ (светлое → тёмное) и 272 КБ (тёмное → светлое), webp
- 390px: тот же кадр, обрезается по высоте
- Оба стыка: да, но комплекта два — у дымки есть верх и низ, перевернуть нельзя
5. Грани
Нынешний полигональный вариант — как есть, для сравнения. Именно его владелец снял с главной.
Карточка секцииСодержимое верхней секции. Переход обязан заезжать под него.
Карточка секцииСодержимое нижней секции. Тот же переход, стык в другую сторону ниже.
Карточка секцииИ снова верхний тон — чтобы обратный стык было с чем сравнить.
- Вес: два SVG-слоя на стык плюс генератор геометрии src/data/facets.ts
- 390px: своя геометрия и высота 150px — иначе грани вырождаются в клинья
- Оба стыка: да; высота задана в модуле и ползунком не двигается