Использование CSS для размещения текста внутри круга

Использование CSS для размещения текста внутри круга

От автора: вы хотите разместить текст внутри фигуры круга с помощью HTML и CSS? Звучит безумно, верно? На самом деле, нет! Благодаря shape-outside и некоторым хитростям CSS можно сделать именно это.

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

Вот цель: мы хотим отобразить цитату <blockquote> и имя автора в фигуре круга. Мы также хотим сделать макет максимально гибким. Этот макет не требует никаких дополнительных файлов и поддерживает чистую разметку HTML. Вот, что мы хотим получить:

На момент написания этой статьи функция shape-outside не поддерживается в Internet Explorer или Microsoft Edge 18 и ниже.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Сначала HTML

Нам понадобится элемент-оболочка, поэтому давайте используем семантику <blockquote> в качестве внутреннего элемента. Внешняя оболочка может быть дивом:

Если вы хотите узнать больше о цитатах HTML, вам повезло. Мы собираемся установить саму цитату в <p> и имя автора внутри <footer>. У нас есть имена классов для хуков CSS-стилей, которые нам понадобятся.

Далее немного базового CSS

Давайте начнем с div-оболочки. Во-первых, мы установим минимальный (адаптивный) размер квадрата в 300 пикселей, чтобы он помещался на экранах малого размера. После этого мы добавим относительное позиционирование (потому что оно понадобится нам позже).

Теперь мы заставим цитату заполнить всю оболочку и имитируем фигуру круга с помощью радиального градиентного фона. (Все верно, мы не используем в этом примере border-radius).

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

Использование CSS для размещения текста внутри круга

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

Вот что мы имеем на данный момент:

Использование CSS для размещения текста внутри круга

Применение к тексту CSS

Давайте сначала стилизуем абзац:

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

Давайте изменим цвет фона на красный. Точки многоугольника в редакторе контура и соединительные линии также синего цвета. Мы временно меняем с помощью редактора этот цвет для большей контрастности.

Мне нравятся инструменты разработчика Firefox, потому что в них есть очень удобные функции, такие как редактор контура shape-outside. Нажмите на форму многоугольника в инспекторе, чтобы увидеть активную форму в окне браузера. Большое спасибо команде разработчиков Mozilla за создание очень классного инструмента!

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Использование CSS для размещения текста внутри круга

Вот что мы имеем на данный момент:

Использование CSS для размещения текста внутри круга

Эти точки вдоль фигуры взяты из инструмента редактирования Firefox. Мы можем сделать то же самое для псевдо-элемента абзаца ::before. Мы используем shape-outside, чтобы создать тот же многоугольник, только в обратном порядке, а затем сместить его вправо.

Использование CSS для размещения текста внутри круга

Выглядит хорошо, но куда делся футер? Он вышел за пределы <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 имеет огромное влияние на вертикальное положение знака.

На самом деле есть разница между фигурными («умными») и прямыми (тупыми) кавычками. Я бы предложил использовать фигурные кавычки для диалогов и прямые кавычки для кода.

Обработка адаптивных стилей

Возможно, нам следует увеличить блок на больших экранах. Я устанавливаю контрольную точку на 850px, но вы можете использовать другое значение.

Все готово!

Мы помещаем HTML-текст в фигуру круга, используя комбинацию старых и новых техник CSS, чтобы создать привлекательный блок <blockquote>. И мы достигли нашей цели — отображения без каких-либо дополнительных зависимостей, сохраняя разметку HTML чистой и семантической. Я надеюсь, что эта статья побудит вас изучить новые возможности макета shape-outside. Используйте shape-inside.

Автор: Kerry Smyth

Источник: https://joshwcomeau.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook: