Css генератор мультяшних заголовків
Енді Кларк презентував абсолютно новий ресурс. Він створює веселу типографіку, котра базується на мультяшних заголовках і яку Енді часто використовує у власних роботах.
Наразі доступно кілька параметрів налаштувань:
- декілька різновидів шрифтів
- колір
- обведення
- міжлітерний інтервал
- тінь для тексту
По завершенню ви зможете скопіювати собі готовий css код і використовувати в своїх проектах.
Також є вже готові варіанти заголовків котрі можна відфільтровувати за різними параметрами.
А що, якщо ви хочете стилізувати кожну літеру окремо? На жаль, наразі в CSS не існує такого селектора, як :nth-letter. Втім, є інструменти, які обгортають кожен символ в окремий <span> і найвідоміший із них - це SplitText.js. Але Енді вирішив створити власний інструмент - Splinter.js, бо він побачив можливості покращити доступність згенерованої розмітки й запобігти проблемам у деяких допоміжних технологіях (наприклад скрінрідерах), які можуть "спотикатись" об ці span. Доречі, GSAP також добре з цим справляється.
Тож замість:
<h2>
<span>H</span>
<span>u</span>
<span>m</span>
<!-- etc. -->
</h2>…ми отримуємо розмітку з ARIA-атрибутами:
<h2 data-split="toon" aria-label="Hum Sweet Hum">
<span class="toon-char" aria-hidden="true">H</span>
<span class="toon-char" aria-hidden="true">u</span>
<span class="toon-char" aria-hidden="true">m</span>
</h2>І це ще й підтримує перенесення рядків!
Обовʼязково спробуйте погратися з цим конструктором =)