Ciko

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

7 сообщений в этой теме

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


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


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 пользователям понравилось это

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


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

Создайте аккаунт или войдите для комментирования

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

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!


Зареєструвати аккаунт

Войти

Уже зарегистрированы? Войдите здесь.


Войти сейчас

  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу

Яндекс.Метрика Рейтинг@Mail.ru Индекс цитирования