Разместить текст внутри круга
Как разместить текст внутри круга, чтобы он был в пределах круга и не выходил за его границы?
body < display: flex; align-items: center; justify-content: center; >:root < --size: 460px; --half-size: calc(var(--size) / 2); >.text < flex-shrink: 0; position: relative; width: var(--size); height: var(--size); padding: 20px; hyphens: auto; text-align: center; font-size: 18px; line-height: 2; background: url('https://i.stack.imgur.com/Uk2ai.png') center center no-repeat; >.text:before
Земля – чудесная планета, ее природа разнообразна. Природа нашей планеты – это совокупность каждого элемента: физических естественных и материальных. Природой можно называть только то, что создавалось без непосредственного участия человека.
Природа также представляет собой все физические, биохимические процессы на планете, а также жизнь в целом. Люди также являются частью природы, однако их зачастую рассматривают отдельно.
Отслеживать
28.1k 12 12 золотых знаков 74 74 серебряных знака 143 143 бронзовых знака
задан 18 мар 2020 в 17:24
user376731 user376731
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Вариант без перевода строк с помощью тега
body < display: flex; align-items: center; justify-content: center; >:root < --size: 460px; --half-size: calc(var(--size) / 2); >.text < flex-shrink: 0; position: relative; width: var(--size); height: var(--size); padding: 20px; hyphens: auto; text-align: center; font-size: 18px; line-height: 2; background: url('https://i.stack.imgur.com/Uk2ai.png') center center no-repeat; >.text:before < content: ''; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #FFF; border-radius: 50%; box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.25), inset 0 0 15px 0 rgba(0, 0, 0, 0.25); >.shape < display: block; width: 50%; height: 100%; >.shape__left < float: left; shape-outside: radial-gradient(var(--size) at right, transparent 50%, black 0); >.shape__right
Земля – чудесная планета, ее природа разнообразна. Природа нашей планеты – это совокупность каждого элемента: физических естественных и материальных. Природой можно называть только то, что создавалось без непосредственного участия человека.
Природа также представляет собой все физические, биохимические процессы на планете, а также жизнь в целом. Люди также являются частью природы, однако их зачастую рассматривают отдельно.
Как создать текст внутри круга с помощью CSS
Вы хотите создать текст внутри круга с помощью HTML и CSS? Звучит бредово, правда?
На самом деле, нет! Благодаря свойству shape-outside и некоторым трюкам CSS это вполне возможно.
Однако такой вариант вёрстки может оказаться не самым удобным. Необходимо принимать во внимание множество разных нюансов, среди них: количество символов, количество слов, варианты начертания, размер шрифта, форматирование текста и требования к адаптивности. Здесь сложно подогнать всё под один размер. Но давайте всё-таки попытаемся это сделать.
Наша цель: отобразить элемент (цитату) и имя автора в круге. Также мы хотим сделать вёрстку максимально универсальной. Она не потребует каких-либо дополнительных файлов и оставит HTML- разметку без изменений.
Вот к чему мы стремимся:
На момент написания этой статьи функция shape-outside не поддерживается браузерами Internet Explorer и Microsoft Edge 18 и ниже
Начнём с HTML
В конце нам в любом случае понадобится «обёртка» (элемент, который инкапсулирует другие объекты страницы), поэтому давайте используем семантический тэг как внутренний элемент. Содержащая его «обёртка» может быть элементом div:
Experience design is the design of anything, independent of medium, or across media, with human experience as an explicit outcome, and human engagement as an explicit goal.
Мы помещаем саму цитату в тэг
, а имя автора в тэг . Затем создаём названия классов, которые понадобятся нам при работе с CSS.
Теперь немного базового CSS
Начнем с «обёртки», созданной с помощью элемента div. Сначала устанавливаем минимальный (адаптивный) размер квадрата со значением 300px, чтобы он вписывался в маленькие экраны. Затем придаём свойству position значение relative (позже нам это понадобится).
.quote-wrapper
Теперь делаем так, чтобы цитата заполнила весь блок «обёртки», и имитируем форму круга, применяя к фону функцию radial gradient (Да-да, в этом примере мы не будем использоватьborder-radius).
.text
Обратите внимание, что край со значением 70% выглядит более зазубренным. Я вручную понемногу увеличивал процент и обнаружил, что края с 70.3% выглядят наиболее гладко.
Обратите внимание, край справа более гладкий, чем край слева
Теперь у нас есть основной круг. Добавьте к классу .text следующие стили:
.text
Вот что у нас получилось на данный момент:
Применение CSS к тексту
Давайте для начала добавим стили абзацу:
.text p
После первоначальной публикации этой статьи многие оставили комментарии о том, что существует альтернативная техника, суть которой заключается в использовании функции radial-gradient как свойства shape-outside. Так формируется более гладкая полукруглая прямая по периметру многоугольника.
Давайте применим к цитате псевдоэлемент ::before, чтобы изменить её форму. Вот здесь нам понадобится свойство shape-outside. Мы создаём многоугольник с помощью функции polygon(), устанавливаем координаты его вершин и выравниваем по левой стороне, чтобы текст вписался в фигуру.
.text::before
Теперь давайте поменяем цвет градиентного фона на красный. Точки и соединительные линии полигонов в редакторе путей останутся голубыми. Мы меняем цвет временно для большего контраста с инструментами редактирования.
background: radial-gradient( ellipse at center, rgba(210, 20, 20, 1) 0%, rgba(210, 20, 20, 1) 70%, rgba(210, 20, 20, 0) 70.3% );
Мне нравятся инструменты разработчика в Firefox, потому что там есть очень удобные функции, например, редактор путей для shape-outside. Кликните по фигурке многоугольника в «Инспекторе», чтобы отобразить активную фигуру в окне браузера. Большие пальцы вверх команде разработчиков Mozilla Firefox за создание такого классного интерфейса!
Инструмент редактирования фигур в Firefox также можно применять к значениям clip-path и .
Вот что у нас вышло на этом этапе:
Точки по краям фигуры появляются с помощью инструментов редактирования Firefox
Мы можем сделать то же самое с псевдоэлементом абзаца ::before. Применяем свойство shape-outside, чтобы создать такой же многоугольник, но отзеркаленный, затем выравниваем его по правой стороне.
.text p::before
Выглядит неплохо, но куда делся футер? Он вышел за пределы элемента (в котором расположен круглый цветной фон), поэтому мы не можем увидеть этот белый текст на белом фоне.
Добавляем стили к футеру
Теперь мы можем добавить стили элементу и придать свойству position значение absolute, чтобы вернуть наш футер обратно в границы круга.
.quote-wrapper blockquote footer
Опять же, вы можете поменять цвет фона на тот, который нужен вам.
Вот теперь начинается запутанная часть. Сам текст должен быть стилизован так, чтобы количество слов и символов помещалось в фигуру. Я использовал следующие стили CSS, чтобы правильно его разместить:
- font-size;
- shape-margin (нам нужно исключить две области);
- line-height;
- letter-spacing;
- font-weight;
- font-style;
- min-width и min-height (до размеров элемента, содержащего класс .quote-wrapper).
Добавляем кавычки для красоты
Помните гигантские кавычки на самом первом примере? Их мы и собираемся сейчас сделать.
Мы воспользуемся псевдоэлементом ::before для класса .quote-wrapper. Да, придется сильно заморочиться, чтобы он выглядел хорошо. Я обнаружил, что свойство line-height сильно влияет на положение кавычек по вертикали.
.quote-wrapper::before
Вообще, между изогнутыми (“умными”) и прямыми («тупыми») кавычками есть разница. Я бы посоветовал использовать изогнутые кавычки в диалогах, а прямые кавычки в программировании.
Работаем над адаптивным дизайном
Нам, пожалуй, стоит сделать нашу цитату крупнее на больших экранах. Я установил контрольную точку на 850px, но вы, возможно, захотите использовать что-то другое.
@media (min-width: 850px) < .quote-wrapper < height: 370px; width: 370px; >.quote-wrapper::before < font-size: 300px; >.text p < font-size: 26px; >.quote-wrapper blockquote footer < bottom: 32px; >>
Ну , вот и всё !
Мы поместили текст в фигуру круга, используя комбинацию старых и новых техник CSS, чтобы создать красивый и привлекающий внимание блок с цитатой. И мы добились желаемого результата без каких-либо дополнительных файлов, оставив разметку HTML нетронутой и семантической.
Надеюсь, эта статья мотивировала вас исследовать новые возможности вёрстки со свойством shape-outside. Теперь ждите появления функции shape-inside.
Текст внутри круга с помощью CSS
Вписать текст в окружность можно с помощью CSS-свойства shape-outside и некоторых хитростей.
Для реализации стоит принять во внимание множество разных вещей: количество символов, количество слов, варианты шрифтов, размер шрифта, форматирование шрифта, требования к отзывчивости, макет дизайна и т.д. Один размер на все случаи здесь не подойдет, но рассмотрим всё по порядку.
Определим цель: надо отобразить цитату и имя автора внутри круга. Макет должен быть максимально гибким, сохранять HTML разметку безупречно чистой и кроме неё использовать только CSS.
Примечание: будущий уровень CSS Shapes определит свойство shape-inside , которое будет регулировать форму для обтекания содержимого внутри элемента.
Сперва HTML-разметка
Для примера понадобится элемент-оболочка, используем семантический в качестве внутреннего элемента. Внешней оболочкой может быть обыкновенный div :
Experience design is the design of anything, independent of medium, or across media, with human experience as an explicit outcome, and human engagement as an explicit goal.
Разместим цитату в параграф
, а имя автора (подпись) – в . Ещё понадобится несколько названий CSS-классов для использования в таблице стилей.
Теперь немного базового CSS
Начинаем с оболочки div . Установим адаптивный квадрат c минимальным размером 300 пикселей, чтобы он поместился на небольших экранах и добавим относительное позиционирование (оно понадобится позже).
.quote-wrapper
Далее заставляем контейнер с цитатой заполнить всё отведенное пространство и имитировать форму круга с радиальным градиентом в качестве фона. Неожиданно, но в примере с текстом внутри окружности не используется border-radius .
.text
Следует отметить, что целые 70% отображают несколько грубые края. В ходе эксперимента выяснилось, что 70,3% края выглядят гораздо плавнее.
Теперь, когда получился базовый круг, пора добавить эти css-свойства для css-класса .text .
.text
На сей момент всё будет выглядеть так:
Обработка текста CSS
Сперва стилизуем параграф:
.text p
Используем псевдоэлемент ::before для создания формы. Здесь вступает в игру свойство shape-outside . Применим координаты для polygon() и сдвинем его влево, чтобы текст обернулся внутри фигуры.
.text::before
Изменим ненадолго цвет радиального фона на красный. Точки многоугольника и соединительные линии останутся синего цвета. Это временно, для удобной отладки.
background: radial-gradient( ellipse at center, rgba(210, 20, 20, 1) 0%, rgba(210, 20, 20, 1) 70%, rgba(210, 20, 20, 0) 70.3% );Вот что получается на сей момент:
То же самое нужно сделать для псевдоэлемента ::before параграфа p . Используем shape-outside , отражаем зеркально многоугольник и сдвигаем его вправо.
.text p::before
Выглядит неплохо, но подпись оказалась за пределами – белый текст на белом фоне за пределами цветной окружности.
Стилизация footer
Теперь настало время стилизовать и указать ему абсолютное позиционирование, чтобы вернуть его внутрь круга.
.quote-wrapper blockquote footer
Цвет фона выбирайте любой, какой нравится.
Теперь подошли к неудобной части. Текст должен быть оформлен таким образом, чтобы все слова и символы оставались внутри фигуры (окружности). Лучше оперировать этими CSS-свойствами:
- font-size
- shape-margin
- line-height
- letter-spacing
- font-weight
- font-style
- min-width и min-height (для управления контейнером .quote-wrapper )
Декорирование этой конструкции кавычками
На демке видно гигантские кавычки. Это то, о чем пойдёт речь далее. Чтобы все выглядело правильно, потребуется не очень много усилий. Следует обратить внимание на то, что высота строки сильно влияет на вертикальное положение значка.
Тут можно воспользоваться наличием псевдоэлемента ::before у контейнера .quote-wrapper .
.quote-wrapper::before
Стили для адаптивности
На больших экранах цитату можно немного увеличить. Определим для перехода рубеж 850 пикселей, но можете использовать любое значение, которое будет уместно.
@media (min-width: 850px) < .quote-wrapper < height: 370px; width: 370px; >.quote-wrapper::before < font-size: 300px; >.text p < font-size: 26px; >.quote-wrapper blockquote footer < bottom: 32px; >>Для масштабирования всей конструкции текста, вписанного в окружность, используется совсем немного CSS-свойств. Многоугольники, которые определяют окружность, не требуют изменений css при масштабировании.
Вот результат
Текст и HTML размещены внутри окружности с использованием комбинаций старых и новых CSS-свойств, чтобы сделать цитату яркой и привлекающей внимание. Всё это сделано без каких-либо дополнительных зависимостей и сохраняет HTML разметку чистой и семантической.
Как сделать круг в css а внутри поместить текст
В виду всех этих нюансов наиболее правильным решением все же будет использование html и css.
Допустим у нас задача написать по кругу сверху «Привет», а снизу «мир».
Создадим адаптивный круг (div с классом “disk”), вокруг которого будет располагаться наш текст.
div class="disk"> div>
.disk position: relative; background: #4a9266; width: 30%; padding: 15% 0; border-radius: 50%; /* адаптивный круг */ margin: 10% auto; font: 4.5vmin monospace; >
Далее, для того чтобы расположить правильно текст, нужно будет позиционировать каждую букву отдельно. Для этого заключим каждую букву в отдельный тег, например b. Зададим ему свойство абсолютного позиционирования.
div class="disk"> b>Пb> b>рb> b>иb> b>вb> b>еb> b>тb> b>мb> b>иb> b>рb> div>
.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) градуса и далее высчитываем. Получаем:
.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.
В отличии от использования обычной картинки:
- Увеличивается скорость загрузки страницы, так как не нужно грузить дополнительную графику;
- Вы получаете возможность быстро и легко редактировать размер и цвет шрифта, радиус круга и непосредственно сам текст.