Эффект многослойного текста в CSS: как это работает и что можно сделать

Тема пришла из обсуждения на Reddit: пользователи r/webdev спорили о том, как реализовать эффект многослойного текста в CSS. Пост набрал 2 тысячи голосов за день — значит, задело.

Как это вообще работает

Эффект многослойного текста в CSS достигается с помощью свойства text-stroke и background-clip. Один из способов реализации — использование двух слоев: один для обводки, другой для заливки.

Проблема в том, что разные браузеры могут отображать этот эффект по-разному. Например, Chrome и Firefox могут рендерить обводку немного шире или уже.

Что говорят люди в комментариях

«Firefox rendering looks much easier on the eyes» — iamapizza

«Chrome renders the outer stroke slightly wider — kills the look. Firefox keeps them tight.» — ExplorerPrudent4256

Анализ рынка: что уже существует

За рубежом

• Free Frontend — коллекция из 15 примеров использования text-stroke для создания эффектов обводки и hollow text.
• Frontend Planet — коллекция из 30 примеров CSS-текстовых эффектов, включая многослойный текст.
• Alvaro Trigo — примеры CSS-анимаций текста, включая многослойный эффект.

В России

• Хабр — есть статьи о CSS-текстовых эффектах, но нет конкретных примеров реализации многослойного текста.

Незакрытая ниша: нет русскоязычного ресурса с примерами и уроками по реализации многослойного текста в CSS.