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

[Ciko 2 604]

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

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

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

<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>

[Chub 65]

Ахах, круто.

[ARO 2]

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

[Дмитрий Кор 0]

спасибо, взял

 

[gangaster 0]

забрал

[Brian 1]

+ реп

[123123 1]

Как раз искал! Спасибо!