Часто для уникальности и красоты сайта дизайнеры придумывают разные декоративные украшения, трансформирование текста. И важная задача верстальщика при этом сделать все как можно правильнее - сделать все что можно посредством html и css не используя картинки.
Самый легкий способ решения данной задачи - воспользоваться каким - либо графическим редактором. Это не составит большого труда. При этом Вы получаете отсутствие проблем с кроссбраузерностью. Но есть ряд недостатков такого метода:
- не возможно скопировать текстовую информацию;
- сложность внесения исправлений в текст и его параметры;
- повышается трафик на сервере данного сайта
- увеличение количества обращений к серверу при обновлении страницы
В виду всех этих нюансов наиболее правильным решением все же будет использование html и css.
Допустим у нас задача написать по кругу сверху «Привет», а снизу «мир».
Создадим адаптивный круг (div с классом “disk”), вокруг которого будет располагаться наш текст.
Html:
<div class="disk"> </div>
Css:
.disk { position: relative; background: #4a9266; width: 30%; padding: 15% 0; border-radius: 50%; /* адаптивный круг */ margin: 10% auto; font: 4.5vmin monospace; }
Далее, для того чтобы расположить правильно текст, нужно будет позиционировать каждую букву отдельно. Для этого заключим каждую букву в отдельный тег, например b. Зададим ему свойство абсолютного позиционирования.
Html:
<div class="disk"> <b>П</b> <b>р</b> <b>и</b> <b>в</b> <b>е</b> <b>т</b> <b>м</b> <b>и</b> <b>р</b> </div>
Css:
.disk b { position: absolute; left: 50%; /* все буквы ставим в одну точку*/ width: 0; /* убираем отступ */ }
Строку, которая будет сверху круга («Привет»), позиционируем
.disk b:nth-of-type(-n+6) { bottom: 50%; /* отступ от центра по радиусу */ -ms-transform-origin: 0% 100%; -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; padding-bottom: 50%; /* отступ от центра круга */ }
Где 6 — это количество букв в текущей части текста.
Далее позиционируем каждую букву отдельно, поворачивая ее на определенное количество градусов. Так как размер шрифта у нас 4,5 %. Пусть на каждый символ у нас приходится 6 градусов.
Очень важно проставляя поворот каждой букве учесть пробел между словами, если он есть. Как символ мы его не считаем, но пропустить 6 градусов для пробела в нужном месте нужно.
Исходя из этого определяем символы которые будут в центре, ставим им поворот 3 и -3 (357) градуса и далее высчитываем. Получаем:
Css:
.disk b:nth-of-type(1) {-ms-transform: rotate(345deg); -webkit-transform: rotate(345deg); transform: rotate(345deg);} /*Укажем расположение для буквы П*/ .disk b:nth-of-type(2) {-ms-transform: rotate(351deg); -webkit-transform: rotate(351deg); transform: rotate(351deg);} /*Укажем расположение для буквы Р*/ .disk b:nth-of-type(3) {-ms-transform: rotate(357deg); -webkit-transform: rotate(357deg); transform: rotate(357deg);} /*Укажем расположение для буквы И*/ .disk b:nth-of-type(4) {-ms-transform: rotate(3deg); -webkit-transform: rotate(3deg); transform: rotate(3deg);} /*Укажем расположение для буквы В*/ .disk b:nth-of-type(5) {-ms-transform: rotate(9deg); -webkit-transform: rotate(9deg); transform: rotate(9deg);} /*Укажем расположение для буквы Е*/ .disk b:nth-of-type(6) {-ms-transform: rotate(15deg); -webkit-transform: rotate(15deg); transform: rotate(15deg);} /*Укажем расположение для буквы Т*/
Затем тоже самое проделываем для нижней части. Селектор .disk b:nth-of-type(n+7) начинается с 7, поскольку в слове выше было использовано 6 букв.
Подробнее о работе псевдоклассов css можно почитать в соответствующей статье.
/* мир */ .disk b:nth-of-type(n+7) { top: 50%; -ms-transform-origin: 50% 0; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; padding-top: 50%; /* влияет на удаление букв от средины окружности */ } .disk b:nth-last-of-type(1) {-ms-transform: rotate(354deg); -webkit-transform: rotate(354deg); transform: rotate(354deg);} /*Укажем расположение для буквы М*/ .disk b:nth-last-of-type(2) {-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);} /*Укажем расположение для буквы И*/ .disk b:nth-last-of-type(3) {-ms-transform: rotate(6deg); -webkit-transform: rotate(6deg); transform: rotate(6deg);} /*Укажем расположение для буквы Р*/
Все готово. Если вам нужен просто текст, Вы можете сделать прозрачным круг.
Кроссбраузерность
Этот код работает во всех современных браузерах, поддерживающих html 5 и css 3.
В отличии от использования обычной картинки:
- Увеличивается скорость загрузки страницы, так как не нужно грузить дополнительную графику;
- Вы получаете возможность быстро и легко редактировать размер и цвет шрифта, радиус круга и непосредственно сам текст.
