КодSEOБлогИное

Как сделать текст полукругом на CSS и SVG

Текст сбоку по дуге обтекает круг с помощью float и shape-outside CSS

На голубом фоне смайликЭффект пока виден только на WebKit-браузерах [caniuse.com]. Получается красиво, когда крайние буквы прижаты к обтекаемому блоку, что можно добиться с помощью свойства text-align. В случае обтекания двух элементов с противоположных краёв родителя можно выравнять абзац по ширине. Свойство border-radius позволяет сделать из квадратной картинки круг, но оно не обязательно, когда само изображение круглое с прозрачными краями. Свойство margin-right позволяет настроить отступ от рисунка.
<style>
#round {
  text-align: justify;
  hyphens: auto;
}
#round img {
  float: left;
  shape-outside: circle(50%);
  margin-right: .5em;
  border-radius: 50%;
}
</style>

<div id="round">
  <img src="http://2.bp.blogspot.com/-c4ScvKxvKBs/TkoXOfNQFHI/AAAAAAAACLA/0x_aaffS0t0/s00/background.jpg" alt="На голубом фоне смайлик" width="120" height="120">
  текст
</div>

Написать текст по окружности SVG

Шпаргалка блоггера 
<svg viewBox="0 0 70 70" width="40%">
  <path d="M35,35m-23,0a23,23 0 1,1 46,0a23,23 0 1,1 -46,0" fill="lightpink" id="tophalf"/>
  <text style="font: initial;">
    <textPath xlink:href="#tophalf" startOffset="0%">Шпаргалка</textPath>
    <textPath xlink:href="#tophalf" startOffset="56%">блоггера</textPath>
  </text>
</svg>

Тег path с id="tophalf" рисует круг-контур, по которому располагаются слова, указанные в textPath с xlink:href="#tophalf". То есть ссылка xlink:href определяет по какому контуру размещать буквы. Чтобы контур скрыть, тег path следует поместить в тег defs.

Атрибут startOffset указывает на точку контура, от которой начинается текст. Шпаргалка блоггера 

<svg viewBox="0 0 70 70" width="40%">
  <defs>
    <path d="M35,35m-23,0a23,23 0 1,1 46,0a23,23 0 1,1 -46,0" fill="lightpink" id="tophalf"/>
  </defs>
  <text style="font: initial;">
    <textPath xlink:href="#tophalf" startOffset="0%">Шпаргалка</textPath>
    <textPath xlink:href="#tophalf" startOffset="56%">блоггера</textPath>
  </text>
</svg>

Сделать изогнутую надпись вокруг круглого элемента сверху и снизу с помощью transform CSS

Автор идеи: css-tricks.com

Ш п а р г а л к а б л о г г е р а s h p a r g a l k a b l o g . r u 
<style>
#circle {
  position: relative;
  width: 40%; padding-top: 40%; border-radius: 100%;  /* сделать "резиновый" круг */
  background: lightpink;
  font: 5vmin monospace;  /* моноширный шрифт */
  margin: 10% auto;
}
#circle b {
  position: absolute; left: 50%;  /* все буквы собрать в одну точку по середине */
  width: 0;  /* убрать отступ */
}
/* верхние 17 букв «Шпаргалка блоггера» */
#circle b:nth-of-type(-n+17) {
  bottom: 50%;
  transform-origin: 0% 100%;
  padding-bottom: 50%;  /* от значения свойства зависит приближение текста к центру круга */
}
#circle b:nth-of-type(1) {transform: rotate(310deg);}
#circle b:nth-of-type(2) {transform: rotate(315deg);}
#circle b:nth-of-type(3) {transform: rotate(320deg);}
#circle b:nth-of-type(4) {transform: rotate(325deg);}
#circle b:nth-of-type(5) {transform: rotate(330deg);}
#circle b:nth-of-type(6) {transform: rotate(335deg);}
#circle b:nth-of-type(7) {transform: rotate(340deg);}
#circle b:nth-of-type(8) {transform: rotate(345deg);}
#circle b:nth-of-type(9) {transform: rotate(350deg);}
#circle b:nth-of-type(10) {transform: rotate(10deg);}
#circle b:nth-of-type(11) {transform: rotate(15deg);}
#circle b:nth-of-type(12) {transform: rotate(20deg);}
#circle b:nth-of-type(13) {transform: rotate(25deg);}
#circle b:nth-of-type(14) {transform: rotate(30deg);}
#circle b:nth-of-type(15) {transform: rotate(35deg);}
#circle b:nth-of-type(16) {transform: rotate(40deg);}
#circle b:nth-of-type(17) {transform: rotate(45deg);}
/* нижние 17 букв «shpargalkablog.ru» */
#circle b:nth-last-of-type(-n+17) {
  top: 50%;
  transform-origin: 50% 0;
  padding-top: 50%;
}
#circle b:nth-last-of-type(1) {transform: rotate(325deg);}
#circle b:nth-last-of-type(2) {transform: rotate(330deg);}
#circle b:nth-last-of-type(3) {transform: rotate(335deg);}
#circle b:nth-last-of-type(4) {transform: rotate(340deg);}
#circle b:nth-last-of-type(5) {transform: rotate(345deg);}
#circle b:nth-last-of-type(6) {transform: rotate(350deg);}
#circle b:nth-last-of-type(7) {transform: rotate(355deg);}
#circle b:nth-last-of-type(8) {transform: rotate(0deg);}
#circle b:nth-last-of-type(9) {transform: rotate(5deg);}
#circle b:nth-last-of-type(10) {transform: rotate(10deg);}
#circle b:nth-last-of-type(11) {transform: rotate(15deg);}
#circle b:nth-last-of-type(12) {transform: rotate(20deg);}
#circle b:nth-last-of-type(13) {transform: rotate(25deg);}
#circle b:nth-last-of-type(14) {transform: rotate(30deg);}
#circle b:nth-last-of-type(15) {transform: rotate(35deg);}
#circle b:nth-last-of-type(16) {transform: rotate(40deg);}
#circle b:nth-last-of-type(17) {transform: rotate(45deg);}
</style>

<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>е</b>
  <b>р</b>
  <b>а</b>

  <b>s</b>
  <b>h</b>
  <b>p</b>
  <b>a</b>
  <b>r</b>
  <b>g</b>
  <b>a</b>
  <b>l</b>
  <b>k</b>
  <b>a</b>
  <b>b</b>
  <b>l</b>
  <b>o</b>
  <b>g</b>
  <b>.</b>
  <b>r</b>
  <b>u</b>
</div>
◄▲►
Все комментарии