Эффект обводки текста в Тильда

Решение

Эффект обводки текста реализуется через свойства -webkit-text-stroke и text-stroke. Решение адаптировано под работу в Zero Block стили применяются к текстовому элементу с классом .sd-outline.

В основе — предоставленный код: он задаёт обводку толщиной 1 px и цветом #ED1F7E.

Зачем это нужно и где применять

• Акцентные заголовки — обводка повышает читаемость текста на сложных или пёстрых фонах.
• Теги и бейджи — позволяет стилизовать отдельные слова как метки без использования дополнительных рамок и контейнеров.
• Карточки товаров и сетки — эффективно выделяет статусы («Хит», «Новинка»), цены или короткие подписи.
• Промо‑баннеры и слайдеры — помогает тексту оставаться заметным поверх изображений и градиентов.
• Оформление инструкций и гайдов — акцентирует ключевые термины и команды.

Логика работы

1. Свойство text-stroke (и его префиксная версия-webkit-text-stroke) рисует контур вокруг символов, повторяя их форму — в отличие от border, который создаёт рамку вокруг блока.
2. Селектор .sd-outline .tn-atom обеспечивает точечное применение: класс ставится на контейнер, а стили применяются к текстовому элементу внутри него.
3. Эффект не ломает вёрстку: при отсутствии поддержки свойства в браузере текст отображается без обводки.

Полностью код, пошаговая инструкция и пример.

Если хочешь адаптировать скрипт под свой проект — напиши в комментарии или в ЛС. Подскажу, какие строки поменять и почему.

Сохрани пост, чтобы не потерять рабочий код. И если есть задача, где стандартных блоков не хватает — давай обсудим кастомное решение.