Применение CSS свойства shape-outside

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

Что такое shape-outside?

CSS-свойство shape-outside определяет фигуру, вокруг которой будет обтекать текст. По сути, это позволяет создавать интересные и нестандартные макеты, где текст может обтекать вокруг изображений, иконок или других элементов на странице. Ранее, для создания подобных эффектов, требовалось использовать сложные методы, такие как абсолютное позиционирование или плавающие элементы (float). Однако свойство shape-outside значительно упрощает этот процесс.

Синтаксис и значения

Синтаксис свойства shape-outside следующий:

shape-outside: <shape-box> || <basic-shape> || <image>;

Где:

• <shape-box>: определяет прямоугольную область, относительно которой будет применяться фигура обтекания.
• <basic-shape>: задает базовую геометрическую фигуру (круг, эллипс, прямоугольник или многоугольник), вокруг которой будет обтекать текст.
• <image>: определяет изображение, относительно которого будет происходить обтекание текста.

Применение shape-outside

Рассмотрим несколько примеров применения свойства shape-outside для создания интересных и креативных макетов.

Обтекание текста вокруг круглой фигуры

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

img {
    float: left;
    shape-outside: circle(50%);
}

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

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

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

div {
    float: left;
    shape-outside: polygon(0% 0%, 100% 0%, 75% 50%, 100% 100%, 0% 100%);
}

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

Обтекание текста вокруг изображения

Одно из наиболее интересных применений свойства shape-outside – обтекание текста вокруг сложных фигур, таких как изображения. Для этого можно использовать следующий код:

img {
    float: left;
    shape-outside: url(image.png);
}

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

Поддержка браузерами

Свойство shape-outside является относительно новым и поддерживается не во всех браузерах. Ниже приведена таблица с информацией о поддержке этого свойства на момент написания статьи:

Как видно из таблицы, свойство shape-outside поддерживается большинством современных браузеров, за исключением Internet Explorer. Однако для обеспечения обратной совместимости с более старыми браузерами можно использовать различные приемы, такие как применение альтернативных стилей или использование полифиллов.

Заключение

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