Обзор фигур

Спецификация определяет несколько свойств, включая:

• shape-outside — Позволяет определить основные фигуры.
• shape-image-threshold — Устанавливает значение порога непрозрачности. Если для определения фигуры используется изображение, то только те части изображения, у которых непрозрачность равна или больше порога, используются в фигуре. Любые другие части игнорируются.
• shape-margin — Устанавливает отступ вокруг определенной фигуры.

Свойство shape-outside позволяет нам определить фигуру. Оно принимает различные значения, которые определяют разные фигуры, заданные в типе данных <basic-shape>.

В следующем примере изображение выровнено влево. Мы применяем свойство shape-outside со значением circle(50%). В результате содержимое теперь изгибается вокруг круговой формы, а не следует за прямоугольником, созданным рамкой изображения.

Здесь мы использовали функцию circle(), которая поддерживается всеми современными браузерами. Если бы мы использовали новый тип фигуры, который не имеет полной поддержки, пользователи браузеров, не поддерживающих его, увидели бы, как содержимое обтекает стороны прямоугольника из-за того, что изображение размещено с плавающей позицией. Фигуры представляют собой визуальное поэтапное улучшение.

Значение circle(50%) является примером основной фигуры. Спецификация определяет несколько значений <basic-shape>, включая:

• circle()
• ellipse()
• inset()
• path()
• polygon()
• rect()
• shape()
• xywh()

Три из этих функций определяют только прямоугольники. С помощью функции inset() вы определяете четыре значения смещения, тем самым приближая линейные блоки любого обтекаемого содержимого к объекту, чем это было бы в противном случае. Функция rect() определяет прямоугольник, задавая расстояние от верхнего и левого краёв контейнерного блока. Функция xywh() работает, задавая расстояния от верхнего и левого краёв справочного блока и устанавливая ширину и высоту прямоугольника от этой начальной точки.

Мы уже видели, как circle() создает круговую форму. ellipse() — это по существу сплющенный круг. Если ни одна из этих простых фигур не подходит, вы можете создать более сложные фигуры, используя функцию polygon(), которая позволяет определить ряд линий. Функции path() и shape() могут использоваться для создания ЛЮБОЙ фигуры с помощью ряда команд линий, кривых и перемещения.

В нашем Руководстве по основным фигурам мы изучаем каждую из возможных основных фигур и способы их создания.

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

• border-box
• padding-box
• content-box
• margin-box

В примере ниже вы можете изменить значение border-box на любое другое допустимое значение, чтобы увидеть, как фигура приближается или удаляется от рамки.

Чтобы более подробно изучить значения рамки, ознакомьтесь с нашим руководством, посвященным Фигурам по значениям рамки.

Интересный способ сгенерировать свой путь — использовать изображение с альфа-каналом; затем текст будет обтекать непрозрачные части изображения. Это позволяет накладывать обтекаемый текст поверх изображения или использовать изображение, которое никогда не отображается на странице, исключительно в качестве метода создания сложной фигуры без необходимости тщательного отображения многоугольника.

Обратите внимание, что используемые таким образом изображения должны быть совместимы с CORS, в противном случае shape-outside будет действовать так, как будто none было задано в качестве значения, и вы не получите фигуру.

В этом следующем примере у нас есть изображение с полностью прозрачной областью, и мы используем значение изображения в качестве URL для shape-outside. Фигура создается вокруг непрозрачной области — изображения воздушного шара.

shape-image-threshold

Свойство shape-image-threshold используется для установки порога прозрачности изображения, используемого для определения области изображения, используемой для фигуры. Если значение shape-image-threshold равно 0.0 (что является начальным значением), то область должна быть полностью прозрачной. Если значение равно 1.0, то она полностью непрозрачна. Промежуточные значения означают, что вы можете задать полупрозрачную область в качестве определяющей области фигуры.

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

Чтобы узнать больше о создании фигур из изображений, см. руководство Фигуры из изображений.

Свойство shape-margin добавляет отступ к shape-outside. Это дополнительно сократит линейные блоки любого содержимого, обтекающего фигуру, отодвинув его от самой фигуры.

В примере ниже мы добавили shape-margin к основной фигуре. Измените отступ, чтобы сильнее отодвинуть текст от пути, который фигура должна была бы пройти по умолчанию.

В приведенных выше примерах мы использовали изображения или видимый элемент для определения фигуры, что означает, что вы можете видеть фигуру на странице. Вместо этого вы можете захотеть расположить текст по непрямоугольной невидимой линии. Например, мы могли бы добавить пустой плавающий элемент <div> или <span> в наш DOM и сделать его невидимым. Однако мы можем создать фигуру только с помощью CSS, используя сгенерированное содержимое и сохранить всю функциональность стилей внутри CSS.

В этом примере мы используем сгенерированное содержимое для вставки элемента с высотой и шириной 150 пикселей. Затем мы можем использовать основные фигуры, значения рамки или даже альфа-канал изображения, чтобы создать фигуру, вокруг которой будет обтекаться текст.

Основные фигуры и значения рамки, используемые для создания фигур, совпадают со значениями, используемыми для clip-path. Поэтому, если вы хотите создать фигуру с помощью изображения и также обрезать часть этого изображения, вы можете использовать те же значения.

На приведенном ниже изображении показано квадратное изображение с синим фоном. Мы определили фигуру, используя shape-outside: ellipse(40% 50%);, а также использовали clip-path: ellipse(40% 50%); для обрезки той же области, которую мы использовали для определения фигуры.

В инструментах разработчика Firefox есть Редактор путей фигур. Этот инструмент можно использовать для проверки значений circle(), inset(), ellipse(), и polygon(). Если ваш многоугольник не совсем правильный, вы можете использовать редактор фигур для его настройки, а затем скопировать новое значение обратно в CSS.

В этом руководстве мы обсуждали обтекание текста вокруг плавающих фигур. Обратитесь к модулю CSS Фигуры для ссылок на все функции модуля, а также на дополнительные связанные функции. Это включает все функции фигур и соответствующие руководства.