Найти в Дзене

Как сделать текст по дуге с помощью CSS?

CSS Concept Letterpress Type. Автор: enterlinedesign
CSS Concept Letterpress Type. Автор: enterlinedesign

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

-2

Как видно из примера все блоки, кроме того в котором находится буква "е", имею свой id и class. На данном этапе можно сказать что основной "каркас" готов. Остается только добавить CSS-стили:

-3

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

Вот что в итоге должно получиться:

Фото автора
Фото автора

Полный код данного примера можно найти в моем профиле на codepen.

Спасибо за внимание!

Остались вопросы? Что-то не получилось? Пишите в комментариях. Вместе мы сможем со всем разобраться)

Если статья оказалась полезной предлагаю подписаться на канал.