Чтобы переводить контент на ваш предпочитаемый язык, Google использует технологии на основе искусственного интеллекта. Переводы от ИИ могут содержать ошибки.

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

Перенос контента по настраиваемым контурам

Razvan Caliman

Долгое время веб-дизайнеры были вынуждены создавать сайты в рамках прямоугольника. Большинство контента в интернете по-прежнему заключено в простые прямоугольные блоки, потому что попытки создать непрямоугольный макет часто заканчиваются неудачей. Но с появлением CSS Shapes в 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, слева или справа, но никогда не с обеих сторон.

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

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

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

Функция circle()

Иллюстрация значения circle() для свойства shape

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

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

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

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

Иллюстрация фигуры `circle()` и свойства clip-path

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

Вернемся к кругу.

Если радиус круга задан в процентах, то значение вычисляется по более сложной формуле: sqrt(width^2 + height^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.