Перейти к содержанию
Ciko

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

Рекомендуемые сообщения

Ciko    2 604

Сейчас покажу как сделать круглый шар а  вокруг слова без всяких программ и фоторедакторов! 


Например, чтобы сделать так 


post-2-0-16775200-1445532968.png


Достаточно просто ввести данный код) вот берите код и редактируйте под себя!



<div id="circle">
<b>Р</b>
<b>а</b>
<b>з</b>
<b>д</b>
<b>е</b>
<b>л</b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b>C</b>
<b>S</b>
<b>S</b>

<b>i</b>
<b>p</b>
<b>b</b>
<b>m</b>
<b>a</b>
<b>s</b>
<b>t</b>
<b>e</b>
<b>r</b>
<b>.</b>
<b>r</b>
<b>u</b>

</div>
<style>
#circle {
position: relative;
width: 40%; padding: 20% 0; border-radius: 100%; /* сделать адаптивный круг */
background: #42aaff;
font: 5vmin monospace; /* моноширный шрифт */
margin: 10% auto;
}

#circle b {
position: absolute; left: 50%; /* все буквы собрать в одну точку по середине */
width: 0; /* убрать отступ */
}

/* Шпаргалка блоггера */
#circle b:nth-of-type(-n+17) {
bottom: 50%;
-ms-transform-origin: 0% 100%; -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%;
padding-bottom: 50%; /* от значения свойства зависит приближение текста к центру круга */
}
#circle b:nth-of-type(1) {-ms-transform: rotate(310deg); -webkit-transform: rotate(310deg); transform: rotate(310deg);}
#circle b:nth-of-type(2) {-ms-transform: rotate(315deg); -webkit-transform: rotate(315deg); transform: rotate(315deg);}
#circle b:nth-of-type(3) {-ms-transform: rotate(320deg); -webkit-transform: rotate(320deg); transform: rotate(320deg);}
#circle b:nth-of-type(4) {-ms-transform: rotate(325deg); -webkit-transform: rotate(325deg); transform: rotate(325deg);}
#circle b:nth-of-type(5) {-ms-transform: rotate(330deg); -webkit-transform: rotate(330deg); transform: rotate(330deg);}
#circle b:nth-of-type(6) {-ms-transform: rotate(335deg); -webkit-transform: rotate(335deg); transform: rotate(335deg);}
#circle b:nth-of-type(7) {-ms-transform: rotate(340deg); -webkit-transform: rotate(340deg); transform: rotate(340deg);}
#circle b:nth-of-type(8) {-ms-transform: rotate(345deg); -webkit-transform: rotate(345deg); transform: rotate(345deg);}
#circle b:nth-of-type(9) {-ms-transform: rotate(350deg); -webkit-transform: rotate(350deg); transform: rotate(350deg);}
#circle b:nth-of-type(10) {-ms-transform: rotate(10deg); -webkit-transform: rotate(10deg); transform: rotate(10deg);}
#circle b:nth-of-type(11) {-ms-transform: rotate(15deg); -webkit-transform: rotate(15deg); transform: rotate(15deg);}
#circle b:nth-of-type(12) {-ms-transform: rotate(20deg); -webkit-transform: rotate(20deg); transform: rotate(20deg);}
#circle b:nth-of-type(13) {-ms-transform: rotate(25deg); -webkit-transform: rotate(25deg); transform: rotate(25deg);}
#circle b:nth-of-type(14) {-ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg);}
#circle b:nth-of-type(15) {-ms-transform: rotate(35deg); -webkit-transform: rotate(35deg); transform: rotate(35deg);}
#circle b:nth-of-type(16) {-ms-transform: rotate(40deg); -webkit-transform: rotate(40deg); transform: rotate(40deg);}
#circle b:nth-of-type(17) {-ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);}

/* shpargalkablog.ru */
#circle b:nth-of-type(n+18) {
top: 50%;
-ms-transform-origin: 50% 0; -webkit-transform-origin: 50% 0; transform-origin: 50% 0;
padding-top: 50%; /* от значения свойства зависит приближение текста к центру круга */
}
#circle b:nth-last-of-type(1) {-ms-transform: rotate(325deg); -webkit-transform: rotate(325deg); transform: rotate(325deg);}
#circle b:nth-last-of-type(2) {-ms-transform: rotate(330deg); -webkit-transform: rotate(330deg); transform: rotate(330deg);}
#circle b:nth-last-of-type(3) {-ms-transform: rotate(335deg); -webkit-transform: rotate(335deg); transform: rotate(335deg);}
#circle b:nth-last-of-type(4) {-ms-transform: rotate(340deg); -webkit-transform: rotate(340deg); transform: rotate(340deg);}
#circle b:nth-last-of-type(5) {-ms-transform: rotate(345deg); -webkit-transform: rotate(345deg); transform: rotate(345deg);}
#circle b:nth-last-of-type(6) {-ms-transform: rotate(350deg); -webkit-transform: rotate(350deg); transform: rotate(350deg);}
#circle b:nth-last-of-type(7) {-ms-transform: rotate(355deg); -webkit-transform: rotate(355deg); transform: rotate(355deg);}
#circle b:nth-last-of-type(8) {-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);}
#circle b:nth-last-of-type(9) {-ms-transform: rotate(5deg); -webkit-transform: rotate(5deg); transform: rotate(5deg);}
#circle b:nth-last-of-type(10) {-ms-transform: rotate(10deg); -webkit-transform: rotate(10deg); transform: rotate(10deg);}
#circle b:nth-last-of-type(11) {-ms-transform: rotate(15deg); -webkit-transform: rotate(15deg); transform: rotate(15deg);}
#circle b:nth-last-of-type(12) {-ms-transform: rotate(20deg); -webkit-transform: rotate(20deg); transform: rotate(20deg);}
#circle b:nth-last-of-type(13) {-ms-transform: rotate(25deg); -webkit-transform: rotate(25deg); transform: rotate(25deg);}
#circle b:nth-last-of-type(14) {-ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg);}
#circle b:nth-last-of-type(15) {-ms-transform: rotate(35deg); -webkit-transform: rotate(35deg); transform: rotate(35deg);}
#circle b:nth-last-of-type(16) {-ms-transform: rotate(40deg); -webkit-transform: rotate(40deg); transform: rotate(40deg);}
#circle b:nth-last-of-type(17) {-ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);}
</style>

Посещение:
  • Нравится 2

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
ARO    2

А можно сделать чтобы он двигался, как стрелка на часах?

Посещение:

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×