Фигуры из изображений

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

В примере ниже представлено изображение звезды с тёмно-красной областью и областью, которая полностью прозрачна. Путь к файлу изображения используется в качестве значения для свойства shape-outside. Контент теперь обтекает форму звезды.

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

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

Инструменты разработчика могут помочь вам определить ошибки CORS. В Chrome консоль сообщит вам о проблемах с CORS. В Firefox, если вы проверите свойство, вам будет сообщено о том, что изображение не загрузилось. Это должно сигнализировать вам о том, что ваше изображение не может быть использовано в качестве источника фигуры из-за CORS.

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

В примере ниже я использую изображение, похожее на первоначальное, однако в этом изображении фон звезды не полностью прозрачен, он имеет непрозрачность 20%, как создано в моей графической программе. Если я установлю shape-image-threshold на 0.3 , я вижу фигуру, если я установлю его на значение меньшее, чем 0.2 , я не получаю фигуру.

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

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

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

Следующий пример использует сгенерированное содержимое. Содержимое имеет фоновое изображение линейного градиента. Я использую то же самое значение в качестве значения для shape-outside. Линейный градиент переходит от фиолетового к прозрачному. Изменяя значение shape-image-threshold, вы можете определить, насколько прозрачными должны быть пиксели, создающие фигуру. Вы можете поиграть с этим значением в примере ниже, чтобы увидеть, как диагональная линия будет перемещаться по фигуре в зависимости от этого значения.

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

Следующий пример использует радиальный градиент с эллипсом, снова используя прозрачную часть градиента для создания фигуры.

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