#фишка дня

Каждому смотрящему сериалы известно, что один из самых лучших способов сделать текст субтитров видимым на практически любом фоне — это добавить инверсную обводку.

Белый контур для чёрного текста, чёрный — для белого (внезапно).

Есть ли что-то подобное в CSS? Ну, конечно, есть! Как минимум, можно бросить тень aka text-shadow. Правда, синтаксис не очень интуитивный да и выглядит иногда странненько.

Какие ещё варианты? SVG text, очевидно, но там свои нюансы с доступностью и стилями.

И есть ещё!

-webkit-text-stroke-color

Несмотря на префикс, Firefox тоже его поддерживает (спорное решение, но уж как есть).

Вот только как всегда есть нюанс. По-умолчанию, обводка будет нарисована перед слоем с текстом. Это очевидно, если понимать разницу между штрихом (stroke) и обводкой (outline), но всё же.

Поэтому paint-order: stroke нам в помощь! Таким образом, штрих будет отрисован первым, натуральным образом превратившись в обводку (при достаточной толщине, конечно же):

  -webkit-text-stroke-color: white; 
  -webkit-text-stroke-width: var(--stroke); 
  paint-order: stroke;

#css #stroke #outline #бородач

#фишка дня

Давайте нормализуем выкладывание кода вместе с обучающим видео!

Немного раздражает, когда показывают красивый эффект, но оставляют только видео. Посмотреть можно, а понять, как повторить и что именно менять, — уже сложнее. Давайте исправлять: к ролику добавлять рабочий пример и короткий разбор.

Например, эффект с надписью PRO собран из нескольких простых приёмов SVG:

1. Буквы сведены к одному силуэту, поэтому фильтр обрабатывает их как цельную форму.
2. Размытие альфа-канала и композиция создают внутреннюю тень.
3. По буквам движется повторяющийся градиент — он задаёт светлые и тёмные участки.
4. feComponentTransfer переводит оттенки в цвет по таблицам RGB.
5. На финальном шаге контур возвращает буквам чёткость, а зерно добавляет фактуру. Цвет контура зависит от градиента и меняется вместе с ним.

Хороший пример показывает результат по этапам: включил шаг — увидел, что он добавил. Ещё полезно приложить минимальный запускаемый код, дать менять параметры и отметить, если часть значений пришлось восстановить приблизительно.

Собственно, вот вам хороший пример от меня: https://codepen.io/editor/alinaki/pen/01a0f735-901e-7978-a733-f7e89bd82597

Видео хорошо передаёт движение. Демо и код помогают разобраться, повторить и поэкспериментировать.

Хотелось бы, чтобы и публиковали их вместе.

#css #svg #effect #animation

#ссылка дня

В комментариях к посту про моргающее меню а-ля macOS HIG всплыл вопрос: а есть ли вообще ресурсы, где можно подсмотреть, как одни и те же интерфейсные штуки сделаны в разных продуктах?

Есть как минимум два.

На самом деле их сотни были и есть, но почти все достаточно банальны. Я решил отобрать два из разных миров.

Refero Styles собирает стили реальных продуктов. Сейчас там уже больше 2000 примеров: цвета, типографика, отступы, компоненты и прочие детали. Причём всё это ещё и упаковывается в DESIGN.md, который можно скормить Cursor, Claude Code, Codex или чему-нибудь ещё и попросить делать «примерно вот так».

А The Component Gallery заходит с другой стороны: выбираешь конкретный компонент — tabs, accordion, popover, pagination — и смотришь, как он устроен в разных дизайн-системах. Сейчас там 60 типов компонентов, 95 дизайн-систем и больше 2600 примеров.

По сути, это та самая витрина компонентов, которая когда-то была одной из самых полезных частей Storybook Component Encyclopedia. Сам Storybook с тех пор ушёл гораздо дальше в сторону полноценной инфраструктуры для разработки, тестирования и документации, а простое «покажи мне двадцать разных tabs рядом» стало искать заметно сложнее.

Так что Refero — скорее про стиль целиком, Component Gallery — про конкретный паттерн. Для вопроса «а как вообще принято делать вот эту штуку?» оба отлично подходят.

#design #skill

#инструмент дня

Промо-видео на Rust. Что? Да!

Давно знал об FFrames — фреймворке, в котором видео описывается кодом: Rust отвечает за логику и анимации, SVG — за графику, GPU — за рендер. Но всё никак не доводилось попробовать.

Ну как, не доводилось... я не особо понимал, а что там делать и как. Но решился.

Попробовал на промо для своего пульта. Озадачил Codex нарезать скриншоты с эмулятора, дав полную свободу действий, и попросил собрать 15-секундный ролик.

Самое интересное — как он это делает. Интерфейс разбирается на кусочки: кнопки пульта, круг навигации, плитки приложений, диалог ввода, клавиатуру. Каждый элемент становится отдельным слоем со своим временем появления, масштабом, прозрачностью и движением.

На каждом кадре Rust пересчитывает эти параметры. FFrames рисует результат и собирает MP4. На Mac используется Metal.

Например, вот так заголовок плавно поднимается на место за полсекунды:

let y = frame.animate(&fframes::timeline!(
    at 0.0 => 0.5, animate 200.0_f32 => 120.0,
    fframes::animation::Easing::EaseOut,
));

fframes::svgr!(
    <text x="80" y={y} font-size="64" fill="#fff">
        "Всё есть код."
    </text>
)

Наш ролик: 886×1920, 30 fps, 450 кадров. Сам экспорт после сборки проекта занял около пяти секунд.

Все сцены, тексты и переходы лежат в исходниках. Можно хранить проект в Git, смотреть изменения и переиспользовать анимации для следующих роликов.

Причём самому писать Rust необязательно: говоришь агенту «кнопки пусть появляются по очереди», «телефон крупнее», «убери музыку» — он правит код и пересобирает видео. Но API настолько простой, что поправить что-то проблем вообще не составляет.

По пути узнал, что аналогичные видео Codex по-умолчанию создаёт на Python + Pillow, но это чуть менее эффективно.

Короче, такое монтирование видео мне очень и очень нравится.

🎞 Сайт
🐙 GitHub

Всё есть код, котаны.

#rust #fframes

О господи, да неужели я при жизни увижу стилизацию title?!!

Стилизация тултипов

Два года назад я писал о проблеме с title и о принятом рабочей группой CSS предложении добавить псевдо-элемент ::tooltip от Лии Веру. Похоже, команда Edge займётся тултипами, о чём можно судить по статье Патрика Броссета.

Дисклеймер: это обзор раннего предложения новых функций. Синтаксис может измениться в будущем или от функций могут отказаться

Общая практика такова, что стоит избегать использования атрибута title из-за ряда проблем. Патрик описывает эти проблемы в статье. Текущее решение команды Edge — добавить опциональный «сброс», как это сделано в стилизуемом <select>:

<style>
  /*
  Новый псевдо-элемент,
  выбирает все тултипы
  */
  ::tooltip {
    /* Включение стилизации */
    appearance: base;
    /* Стили тултипа */
  }
</style>
<button title="Это тултип">
  Наведи на меня
</button>

Свойство appearance: base включает стилизацию. Системный тултип заменяется на псевдо-элемент с базовыми стилями. Он привязан к элементу с помощью Anchor Positioning и работает под капотом на основе Popover API и Interest Invokers.

Это решает многие проблемы с тултипом title:

- Появляется при наведении и фокусе;
- Стилизуется как обычный псевдо-элемент;
- Задержка появления контролируется свойством interest-delay;
- Реагирует на изменение размера шрифта;
- Закрывается при нажатии Esc;
- Можно навести курсор на контент.

Но некоторые проблемы доступности не решаются. Вспомогательные технологии работают с title непоследовательно. Кроме того, в сообществе есть стойкое убеждение, что title это плохо и его не стоит использовать.

В качестве альтернативы предлагается новый атрибут tooltip. Он работает как title, но без отображения системного тултипа, с определённой семантикой и связями и ограничен <button>, <a>, <input>, <textarea>, <select>:

<style>
  ::tooltip {
    /* Стили тултипа */
  }
</style>
<button tooltip="Это тултип">
  Наведи на меня
</button>

С точки зрения доступности рекомендации для стилизуемых тултипов выглядят так:
- Не переопределяют имя элемента;
- Встроенная роль tooltip;
- Элемент ссылается на тултип через aria-describedby.

Но есть и другой способ создания тултипов — сочетание уже существующих Popover API и Interest Invokers. Вместо атрибута можно использовать элемент, связать его с триггером через Anchor Positioning и добавить поведение через атрибуты:

<!--
interestfor связывает кнопку
с тултипом и отображает
при наведении и фокусе
-->
<button
  interestfor="my-tooltip"
  aria-describedby="my-tooltip"
>
  Наведи на меня, у меня есть тултип с HTML
</TMLbutton>
<!--
popover делает элемент
всплывающим и позволяет
добавить любой контент
-->
<div
  id="my-tooltip"
  popover
  role="tooltip"
>
  Это тултип с <span>HTML</span>
</div>

В свежем 547 выпуске Веб-стандартов обсуждалась статья Патрика. Ведущие задались вопросом: зачем нам два разных способа создания тултипов, когда Popover и Interest Invokers решают задачу? Я вижу это как решения разных задач.

Простые задачи должны решаться просто. Атрибут title/tooltip и псевдо-элемент ::tooltip как раз для простых задач, где нужно вывести короткий текст или подпись к элементу. Браузер сам сделает магию связывания и доступности.

В более сложных сценариях, когда нужны тултипы с HTML или тонкий контроль, в дело вступают Interest Invokers. Но с ними нужно больше повозиться, чтобы сделать хорошо. Часть магии браузера не будет автоматически применяться.

Поэтому нужно вручную:

- Добавить отдельный элемент с popover, id и role;
- Позиционировать тултип относительно триггера через Anchor Positioning;
- Добавить триггеру interestfor и aria-describedby;
- Стилизовать тултип.

Это немного больше работы, чем просто указать текст в атрибуте и стилизовать в CSS через псевдо-элемент. Поэтому оба подхода уместны на мой взгляд. Патрик пишет, что даже стили остаются, меняется только селектор.

Можно оставить обратную связь по предложению Edge.

#html #css #ui