Эта страница переведена с помощью Cloud Translation API.

Начало работы с фигурами CSS

Обертывание контента вокруг пользовательских путей

Razvan Caliman

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

Формы можно определить вручную или вывести из изображений.

Давайте рассмотрим очень простой пример.

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

<img class="element" src="image.png" />
<p>Lorem ipsum…</p>

<style>
.element{
  shape-outside: url(image.png);
  shape-image-threshold: 0.5;
  float: left;
}
</style>

Объявление CSS shape-outside: url(image.png) сообщает браузеру, что нужно извлечь фигуру из изображения.

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

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

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

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

Создание фигур вручную

Помимо извлечения фигур из изображений, вы также можете кодировать их вручную. Вы можете выбрать одно из нескольких функциональных значений для создания фигур: circle() , ellipse() , inset() и polygon() . Каждая функция формы принимает набор координат и связана с эталонным полем, которое устанавливает систему координат. Подробнее о справочных полях чуть позже.

Функция круг()

Полное обозначение значения формы круга — circle(r at cx cy) где r — радиус круга, а cx и cy — координаты центра круга по осям X и Y. Координаты центра круга не являются обязательными. Если вы их опустите, по умолчанию будет использоваться центр элемента (пересечение его диагоналей).

.element{
  shape-outside: circle(50%);
  width: 300px;
  height: 300px;
  float: left;
}

В приведенном выше примере контент будет обтекать внешнюю часть кругового пути. Единственный аргумент 50% определяет радиус круга, который в данном конкретном случае составляет половину ширины или высоты элемента. Изменение размеров элемента повлияет на радиус формы круга. Это базовый пример того, как CSS-фигуры могут быть адаптивными.

Прежде чем идти дальше, небольшое отступление: важно помнить, что CSS-фигуры влияют только на форму плавающей области вокруг элемента. Если у элемента есть фон, он не будет обрезан фигурой. Чтобы добиться этого эффекта, вы должны использовать свойства из CSS Masking — либо clip-path , либо Mask-image . Свойство clip-path очень удобно, поскольку оно соответствует той же нотации, что и CSS-фигуры, поэтому вы можете повторно использовать значения.

Иллюстрация формы `circle()` + клип-путь

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

Вернемся к форме круга.

При использовании процентов для радиуса круга значение фактически вычисляется по несколько более сложной формуле : sqrt(ширина^2 + высота^2) / sqrt(2). Это полезно понимать, потому что это поможет вам представить, какой будет результирующая форма круга, если размеры элемента не равны.

В координатах функции формы можно использовать все типы единиц измерения CSS — px, em, rem, vw, vh и т. д. Вы можете выбрать тот, который является достаточно гибким или жестким для ваших нужд.

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

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

Это расположит центр круга в начале системы координат. Что такое система координат? Здесь мы вводим справочные поля.

Справочные поля для фигур CSS

Эталонная рамка — это виртуальная рамка вокруг элемента, которая устанавливает систему координат, используемую для рисования и позиционирования фигуры. Начало системы координат находится в верхнем левом углу, при этом ось X направлена вправо, а ось Y — вниз.

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

Следующие два объявления CSS дают идентичные результаты:

.element{
  shape-outside: circle(50% at 0 0);
  /* identical to: */
  shape-outside: circle(50% at 0 0) margin-box;
}

Мы еще не установили поле для элемента. На этом этапе можно с уверенностью предположить, что начало системы координат и центр круга находятся в верхнем левом углу области содержимого элемента. Это изменится, когда вы установите маржу:

.element{
  shape-outside: circle(50% at 0 0) margin-box;
  margin: 100px;
}

Начало системы координат теперь находится за пределами области содержимого элемента (100 пикселей вверх и 100 пикселей влево), как и центр круга. Вычисленное значение радиуса круга также увеличивается, чтобы учесть увеличение поверхности системы координат, установленной полем ссылки margin-box .