shape-outside для обтекания текста
Настраивайте обтекание текста пользовательских фигур с помощью shape-outside для плавающих элементов.
«shape-outside для обтекания текста» — бесплатный урок CSS Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Модуль CSS Shapes
Модуль CSS Shapes позволяет тексту обтекать непрямоугольные формы. Основным свойством является shape-outside, которое задаёт форму, вокруг которой располагается текст.
Требования shape-outside
shape-outside работает только с плавающими элементами. Элемент должен быть плавающим (слева или справа), чтобы соседний текст обтекал заданную форму.
<div class="circle-float"></div>
<p>Text wraps around the circular float, following the shape-outside boundary instead of the element's rectangular box, creating a natural flow around curved shapes for magazine-style layouts.</p>
shape-outside: circle()
Текст обтекает круговой контур, заданный относительно плавающего элемента:
<div class="profile-image"></div>
<p>Paragraph text wraps neatly around the circular profile image thanks to shape-outside matching the visual border-radius.</p>
shape-outside: ellipse()
Текст обтекает эллиптический контур:
<div class="cutout"></div>
<p>Text on the left flows around the elliptical shape on the right, curving inward and outward with the ellipse's boundary.</p>
shape-outside: polygon()
Текст обтекает контур многоугольника, что позволяет создавать сложные редакционные макеты:
<div class="diagonal-image"></div>
<p>Text follows the diagonal polygon edge as it wraps down the page.</p>
shape-outside с изображением
Укажите URL, чтобы использовать альфа-канал изображения как границу формы. Текст будет обтекать непрозрачные области изображения:
<div class="character"></div>
<p>Text hugs the silhouette defined by the gradient's alpha channel, simulating shape-outside from an image mask.</p>
shape-margin
shape-margin добавляет отступ между контуром shape-outside и обтекающим его текстом:
<div class="shape-float"></div>
<p>A 16px shape-margin adds breathing room between the circular float and the wrapping text.</p>
shape-image-threshold
При использовании изображения для shape-outside свойство shape-image-threshold задаёт порог альфа-прозрачности (от 0 до 1), определяющий границу фигуры.
Применение в дизайне
CSS Shapes позволяют создавать журнальные макеты, выносные цитаты с обтеканием изображений по фигуре и области буквиц с нерегулярным потоком текста — эффекты, которые раньше можно было получить только в печатном дизайне или с помощью SVG.
Поддержка браузерами
Свойство shape-outside с базовыми фигурами (circle, ellipse, polygon, inset) поддерживается всеми современными браузерами. Вариант shape-outside с URL изображения поддерживается шире, но поддержка может различаться. Всегда выполняйте тестирование.
Практический пример: буквица
Треугольная область буквицы, вокруг которой обтекает текст, расположенный рядом с большой декоративной буквой:
<div><span class="drop-cap">T</span>his paragraph begins with a large drop cap letter that text wraps around using shape-outside on the enlarged first character, a classic print typography effect brought to CSS.</div>
Быстрая проверка
Что требуется для работы shape-outside на элементе?
Итоги
shape-outside позволяет направлять текст вокруг непрямоугольных фигур, заданных для плавающих элементов. Фигуры могут быть кругами, эллипсами, многоугольниками или альфа-каналами изображений. Используйте shape-margin, чтобы добавить свободное пространство. Объединяйте его с clip-path, чтобы визуально привести элемент в соответствие с заданной фигурой.
Часто задаваемые вопросы
Урок «shape-outside для обтекания текста» бесплатный?
Да — полный текст урока «shape-outside для обтекания текста» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «shape-outside для обтекания текста»?
Настраивайте обтекание текста пользовательских фигур с помощью shape-outside для плавающих элементов. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «shape-outside для обтекания текста»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- clip-path с polygon() и circle()
- shape-outside для обтекания текста
- Анимация фигур clip-path
- Маски CSS и clip-path