Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Текст по кругу посредством css

Раздел: 

Текст по кругу css

Часто для уникальности и красоты сайта дизайнеры придумывают разные декоративные украшения, трансформирование текста. И важная задача верстальщика при этом сделать все как можно правильнее - сделать все что можно посредством 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.

В отличии от использования обычной картинки:

  • Увеличивается скорость загрузки страницы, так как не нужно грузить дополнительную графику;
  • Вы получаете возможность быстро и легко редактировать размер и цвет шрифта, радиус круга и непосредственно сам текст.