Css знак в круге

Текст внутри круга с помощью 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 пикселей, чтобы он поместился на небольших экранах и добавим относительное позиционирование (оно понадобится позже).

Далее заставляем контейнер с цитатой заполнить всё отведенное пространство и имитировать форму круга с радиальным градиентом в качестве фона. Неожиданно, но в примере с текстом внутри окружности не используется border-radius .

Следует отметить, что целые 70% отображают несколько грубые края. В ходе эксперимента выяснилось, что 70,3% края выглядят гораздо плавнее.

Теперь, когда получился базовый круг, пора добавить эти css-свойства для css-класса .text .

На сей момент всё будет выглядеть так:

Обработка текста CSS

Сперва стилизуем параграф:

Используем псевдоэлемент ::before для создания формы. Здесь вступает в игру свойство shape-outside . Применим координаты для polygon() и сдвинем его влево, чтобы текст обернулся внутри фигуры.

Изменим ненадолго цвет радиального фона на красный. Точки многоугольника и соединительные линии останутся синего цвета. Это временно, для удобной отладки.

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 , отражаем зеркально многоугольник и сдвигаем его вправо.

Выглядит неплохо, но подпись оказалась за пределами – белый текст на белом фоне за пределами цветной окружности.

Стилизация 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 .

Стили для адаптивности

На больших экранах цитату можно немного увеличить. Определим для перехода рубеж 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 разметку чистой и семантической.

Источник

Как установить иконку или цифры в центре круга, HTML&CSS

В верстке очень часто нужно установить какие либо элементы внутри других, например, иконки социальных сетей в круге или номера страниц в разделе пагинации. Все это можно сделать только с помощью HTML и CSS.
Здесь мы приведем два способа, как можно реализовать данный элемент верстки.

Первый способ

Логика
Сначала создаем родительский блок нужной ширины и задаем ему относительное позиционирование.
Затем внутри родительского блока создаем дочерний и указываем ему абсолютное позиционирование и центрируем его относительно родительского блока.

Настройка
Родительскому блоку указываем размер шрифта в пикселях, а ширину и высоту в em . Это нужно для того, чтобы при изменении размера шрифта, размер родительского блока увеличивался пропорционально со всех сторон, по ширине и высоте.
Дочернему блоку при необходимости указываем цвет элементов.
Все остальные настройки являются произвольными на ваше усмотрение.

Первый способ

Второй способ

Кроме иконок внутри круга можно добавить цифры, например для меню пагинации. Сделать это можно и первым способом, все будет отлично работать. Но так как все шрифты одного набора имеют одинаковые пропорции, то можно воспользоваться и другим вариантом.

Логика
Создаем ссылку с классом, например page-numbers и этому классу назначаем нужные нам атрибуты, чтобы все выглядело красиво и ровно.

Настройка
Также, как и в первом случае указываем классу размер шрифта в пикселях, а ширину и высоту в em .
Затем указываем ему цвет фона и цвет текста, который нам нужен и другие атрибуты, которые будут нужны, чтобы добиться нужного нам внешнего вида данного элемента.
Центрирование элементов происходит за счет выравнивания текста по центру и подбора высоты между строками.

Источник

Как сделать элемент круглым на CSS

Содержимое, выходящее за границы контура в clip-path , невидно.

  
текст

  
текст

shape-inside : текст в круге

Текст выравнен так, что крайние слова не выходят за границу, обозначенную в shape-inside . Но на момент написания статьи нет поддержки браузерами.

  
текст

Можно установить безопасный отступ, зная формулу, позволяющую найти сторону квадрата через радиус описанной окружности: a = 2R : √ 2

  
текст

Можно нарисовать символ либо картинку в центре круга

  
текст

radial-gradient в background : круглый фон

Когда нужна круглая фоновая картинка.

  
текст

  
текст

radial-gradient в mask : наложить маску на HTML-элемент

  
текст

SVG в background : фоновое круглое изображение

То, что не поддаётся radial-gradient .

  
текст

Источник

How to Add a Circle Around a Number in CSS

Adding a circle around a number can be easily done with CSS. This can be done using the border-radius property.

In this snippet, you can also find a way of adding a circle around numbers having one to four digits.

Now, we’ll show the process step by step.

Create HTML

html> html> head> title>Title of the document title> head> body> div class="circle">1 div> body> html>

Add CSS

• Set the border-radius to «50%».
• Specify the width and height of the element.
• Style the class using the background, border, and color properties.
• Center the number using the «center» value of the text-align property.
• Specify the font of the number.

.circle < border-radius: 50%; width: 34px; height: 34px; padding: 10px; background: #fff; border: 3px solid #000; color: #000; text-align: center; font: 32px Arial, sans-serif; >

Now we can see the full example.

Example of adding a circle around a number:

html> html> head> title>Title of the document title> style> .circle < border-radius: 50%; width: 34px; height: 34px; padding: 10px; background: #fff; border: 3px solid #000; color: #000; text-align: center; font: 32px Arial, sans-serif; > style> head> body> div class="circle">1 div> body> html>

Result

Next, we are going to show an example where we use circles around numbers with one to four digits. This example can be used for any amount of text and any size circle.

Here, we’ll use the line-height property. Note that the width and line-height properties must be of the same value.

Example of adding a circle around numbers with one to four digits:

html> html> head> title>Title of the document title> style> .circle < width: 120px; line-height: 120px; border-radius: 50%; text-align: center; font-size: 32px; border: 3px solid #000; > style> head> body> div class="circle">1 div> div class="circle">100 div> div class="circle">10000 div> div class="circle">1000000 div> body> html>

In our last example, we use -moz- and -webkit- prefixes with the border-radius property. Here, we also use the display property set to «inline-block» to represent the element as an inline-level block container.

Example of adding a circle around a number using the line-height property:

html> html> head> title>Title of the document title> style> span.circle < background: #e3e3e3; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; color: #6e6e6e; display: inline-block; font-weight: bold; line-height: 40px; margin-right: 5px; text-align: center; width: 40px; > style> head> body> span class="circle">1 span> body> html>

Источник