Котаны, вам ещё и скидка по промокоду htmlshit, налетайте!

#фишка дня

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

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

Есть ли что-то подобное в 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