CSS Shapes: обтекание текста вокруг фигур

Что такое CSS Shapes и зачем они нужны?

CSS Shapes — это мощный инструмент, который позволяет тексту обтекать сложные фигуры (не только прямоугольники!). 🌟 С его помощью можно создавать эффектные макеты с плавным потоком контента вокруг кругов, многоугольников или даже произвольных SVG-путей.

Без CSS Shapes текст обтекает только прямоугольные блоки (даже если элемент визуально круглый!). Посмотрите разницу:

.old-way {
  width: 200px;
  height: 200px;
  border-radius: 50%; /* Круг визуально, но текст видит прямоугольник! */
  float: left;
}

.new-way {
  width: 200px;
  height: 200px;
  shape-outside: circle(); /* Теперь текст понимает форму! */
  float: left;
}

Основные свойства CSS Shapes

shape-outside — главный герой🎭

Определяет область, вокруг которой будет обтекать текст. Работает только с floated-элементами (float: left/right).

.element {
  float: left;
  shape-outside: circle(50% at 50% 50%);
}

shape-margin — воздух вокруг фигуры 🌬️

Добавляет отступ между фигурой и обтекающим текстом:

.shape {
  shape-outside: url(star.svg);
  shape-margin: 20px;
}

Типы фигур и как их создавать

1. Круг (circle())

.circle {
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: circle(50% at center);
  background: #FF6B6B;
  border-radius: 50%;
}

• Первое значение — радиус (можно в % или px)
• at — позиция центра (координаты или ключевые слова)

2. Эллипс (ellipse())

Как круг, но с разными радиусами по осям:

.ellipse {
  shape-outside: ellipse(100px 50px at 30% 50%);
}

3. Многоугольник (polygon()) 🔷

Создаём любую сложную фигуру через координаты точек:

.triangle {
  shape-outside: polygon(0 0, 100% 0, 50% 100%);
}

💡 Совет: Используйте инструмент в DevTools — кликните на значок рядом с polygon() в инспекторе, чтобы визуально редактировать фигуру!

4. Изображение (url()) 🖼️

Текст будет обтекать прозрачные области PNG/SVG:

.flower {
  float: right;
  shape-outside: url(flower.png);
  width: 300px;
  height: 300px;
}

⚠️ Важно: Изображение должно быть CORS-совместимым (загружено с того же домена или с правильными заголовками).

Практический пример: обтекание текста вокруг волны 🌊

Создадим эффект текста, обтекающего волнообразную фигуру:

<div class="wave"></div>
<p>Текст будет обтекать нашу волну...</p>

.wave {
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: polygon(
    0% 20%,  20% 30%,  40% 50%,
    60% 70%,  80% 60%,  100% 40%,
    100% 100%, 0% 100%
  );
  background: linear-gradient(to right, #4facfe, #00f2fe);
}

Анимация фигур! 🎬

CSS Shapes можно анимировать с помощью @keyframes:

@keyframes pulse {
  0% { shape-outside: circle(40% at 50% 50%); }
  50% { shape-outside: circle(60% at 50% 50%); }
  100% { shape-outside: circle(40% at 50% 50%); }
}

.animated-circle {
  animation: pulse 3s infinite;
}

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

CSS Shapes хорошо поддерживаются в современных браузерах (кроме IE). Для обратной совместимости:

.shape {
  /* Fallback для старых браузеров */
  float: left;
  margin-right: 20px;

  /* Современные браузеры */
  @supports (shape-outside: circle()) {
    shape-outside: circle();
    shape-margin: 20px;
  }
}

Идеи для вдохновения 💡

1. Обтекание текста вокруг фотографий с вырезанным фоном
2. Креативные журнальные макеты с волнообразными текстовыми блоками
3. Динамичные формы для цитат и pull-quotes
4. Интерактивные элементы с изменяющейся формой при hover

🚀 Экспериментируйте! Попробуйте комбинировать shapes с clip-path для визуально сложных эффектов.