Анатомия «живой» кнопки: 5 слоёв, GPU-анимация и трюки с CSS

Значимый прорыв формирует отрасль ИИ: VolhaIvanova 29 минут назад Анатомия «живой» кнопки: 5 слоёв, GPU-анимация и трюки с CSS Средний 4 мин 823 CSS * Кейс Хочу поделиться кейсом, когда разработка типичного tab-switcher превращается в настоящее архитектурное решение. Когда дизайнер приносит макет с декоративной кнопкой — тисненая текстура, фигурные края, анимированый индикатор — первая мысль «нарежем это на картинки и вставим». Но это не самое хорошее решение если нужно поддерживать гибкость в длине текста.

Более правильный путь — это CSS-первый подход. Demo на CodeSandboxИтак, задача: два таба, активный элемент плавно скользит между ними. Кнопка выглядит как объект из физического мира — тиснёная кожа, фигурные торцы.

Технические детали

Реализация будет состоять из 5 слоев, давайте разберем каждый. Слой 1: 9-slice паттерн (у нас три части)Фон всего tab-switcher делится на 3 части (боковые края и центральная часть). Это упрощенная реализация паттерн 9-slice, который пришел из game development.

Его суть в том, что Изображение делится на 9 зон. Это кросс-платформенный стандарт: Android реализует его через . png, CSS через border-image, Unity через тип спрайта Sliced.

Везде одна и та же идея — углы фиксированы, а края тянутся. Поскольку мой tab-switcher тянется только по горизонтали, достаточно 3 зон. В CSS — это три background-image на одном элементе: Файлы торцов — 68px шириной (2× для retina), середина — любая ширина, тянется.

Отраслевые последствия

Почему не border-image? border-image — браузерный 9-slice и необходимо меньше кода. Но:Плохой контроль z-порядка с другими backgroundsНельзя смешивать с pseudo-element слоямиПоведение padding-области непредсказуемоMulti-background даёт полный контроль, поэтому я выбрала его.

Слой 2: тёмная подложка, которая задает цветВнутри tab-switcher нужен цвет фонa, который реализован через pseudo-element. Это отлично подходит поскольку это виртуальный HTML-элемент который браузер создаёт в памяти — в DOM его нет, в разметке не нужно создавать отдельный div, но он рендерится как обычный блок. inset: 5px — отступ со всех сторон, подложка чуть меньше frame.

border-radius: 9999px — любое большое число = pill-shape без пересчёта при изменении размера. Слой 3: текстура через mix-blend-modeДля создания реалистичной фоновой текстуры завела еще один слой также с помощью pseudo-element. mix-blend-mode в CSS — это механизм определяющий как будут отображаться слои при наложении.

Событие, по словам экспертов, усилит конкуренцию в сфере ИИ.