#фишка дня

На macOS пункт меню после клика не исчезает сразу. Сначала выбранный пункт коротко моргает: подсветка пропадает, возвращается — и только потом меню закрывается.

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

На CSS сам эффект делается просто:

.menu-item:target {
  animation: blink 150ms linear;
}

.menu:has(.menu-item:target) {
  animation: close 150ms step-end forwards;
}

То есть выбранный пункт моргает, а меню ждёт те же 150 мс перед скрытием.

Вот даже собрал кодпен с примером: https://codepen.io/editor/alinaki/pen/01a0f12b-8d69-7192-90d7-b8b7562ef482

Без JavaScript это можно собрать через :target и :has(): выбранный пункт хранится в URL fragment. Для демки подходит отлично, для обычного компонента я бы всё-таки оставил состояние и закрытие на JS, а blink — в CSS.

Apple отдельно описывает такую обратную связь в HIG:
https://developer.apple.com/design/human-interface-guidelines/feedback

Такая-то мелочь, а насколько сильно меняется восприятие!

#css #macos #hig

Если хочется немного обновить свою Telegram-ленту, собрали папку RIA — Recommended Iconic Authors.

Внутри в основном авторские IT-каналы: разработка, инструменты, библиотеки, релизы, заметки из реальной работы и всё то, что обычно интереснее очередного пересказа документации.

Разумеется, без AI тоже никуда: чат-боты, агенты, вайбкодинг и прочие способы заставить компьютер работать вместо себя хотя бы несколько минут.

Есть QA, информационная безопасность и просто хорошие технические каналы, где авторы не только пишут посты, но и отвечают в комментариях и обсуждениях.

В общем, вот папка. Подписываться на всё подряд не обязательно — можно спокойно выбрать то, что действительно хочется читать.

Котаны, вам ещё и скидка по промокоду 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