Формы плавающих элементов в CSS

Development | Amber | Комментировать запись

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

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

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

Ключевые слова

Свойство shape-outside принимает такие значения: margin-box, padding-box, content-box или border-box. Это упрощает расположение текста, который следует за значением радиуса границы, применяемым к плавающему элементу:

img.shape1 {
  float: left;
  margin-right: 2rem;
  border-radius: 0% 90%;
  -webkit-shape-outside: margin-box;
  shape-outside: margin-box;
}

Разница между ключевыми словами margin, padding, content и border заключается в том, где именно браузер устанавливает «границу» формы. Например, ключевое слово border-box заставит текст обтекать по внешнему краю border элемента.

Функции формы

shape-outside также может принимать одну из четырех доступных функций формы: circle(), polygon(), ellipse() или inset().

Функция circle()

В данном примере изображение размещено слева и имеет радиус границы 50%:

img.shape2 {
  float: left;
  margin-right: 2rem;
  border-radius: 50%;
  -webkit-shape-outside: circle();
  shape-outside: circle();
}

Функция circle() также может принимать значения радиуса и границ:

/* Circle width a 40% radius and positioned at 20% 60% */
shape-outside: circle(40% at 20% 60%);

Функция ellipse()

Функция формы ellipse() имеет похожий синтаксис, но также поддерживает значения X-radius и Y-radius.

.shape3 {
  float: right;
  width: 230px;
  height: 140px;
  margin-left: 2rem;
  border-radius: 50%;
  -webkit-shape-outside: ellipse(100px 55px at 38.7% 52.25%);
  shape-outside: ellipse(100px 55px at 38.7% 52.25%);
  object-fit: cover;
}

Примечание: Здесь мы также использовали свойство object-fit, чтобы изображение сохраняло соотношение сторон, даже если размеры уменьшились.

Читайте также: Управление размерами изображений в CSS

Функция polygon()

Функция polygon() позволяет создавать всевозможные интересные формы. Однако определить правильные размеры довольно сложно, поэтому для более сложных форм вы можете использовать такой инструмент, как, например, расширение CSS Shapes Editor для Chrome.

img.shape4 {
  float: left;
  -webkit-shape-outside: polygon(-5px 86px, 243px 253px, 300px 220px, 296px 434px, -2px 434px);
  shape-outside: polygon(-5px 86px, 243px 253px, 300px 220px, 296px 434px, -2px 434px);
  -webkit-shape-margin: .7rem;
  shape-margin: .7rem;
}

Примечание: Обратите внимание на свойство shape-margin, которое слегка перемещает всю фигуру.

Функция inset()

С помощью функции формы inset() вы определяете значения вставки для верхней, правой, нижней и левой позиций:

img.shape5 {
  float: right;
  -webkit-shape-outside: inset(50px 0 50px 55px);
  shape-outside: inset(50px 0 50px 55px);
}

Использование URL-адреса

Мы можем предоставить изображение через URL-адрес, а непрозрачные части изображения зададут форму:

img.shape6 {
  float: left;
  shape-outside: url("/shape.png");
}

Вот так выглядит прозрачное изображение (shape.png):

Свойство shape-outside поддерживают 94% браузеров по всему миру. Единственный браузер, в котором его поддержка полностью отсутствует, — это Internet Explorer 11.