Post Image

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

До появления CSS-Shapes было практически невозможно спроектировать макет по собственной сетке с текстом для Интернета. Напротив, макеты веб-дизайна традиционно формировались сетками и прямыми линиями.

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

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

Внимание: на время написания этой статьи CSS Shapes поддерживают Firefox, Chrome, Safari и Opera, а также мобильные браузеры, такие как iOS Safari и Chrome для Android. Формы не поддерживают IE и находятся на рассмотрении Microsoft Edge.

Первый взгляд на фигуры CSS

Текущая реализация CSS Shapes — это модуль CSS Shapes Module Level 1 , который в основном вращается вокруг shape-outside свойства. Shape-outside определяет форму, которую может обтекать текст.

Учитывая, что есть shape-outside свойство, вы можете предположить, что есть соответствующее shape-inside свойство, которое будет содержать текст внутри формы. Shape-inside cвойство может стать реальностью в будущем, но в настоящее время проект в разработке модуль CSS Shapes Module Level 2 , и не будет реализован в любом браузере.

В этой статье мы покажем, как использовать тип данных <basic-shape>  и задавать его с помощью значений функции фигуры, а также устанавливать форму с использованием полупрозрачного URL-адреса или градиента.

Основные функции формы

Мы можем определить все виды базовых форм в CSS, применяя следующие значения функций к shape-outside свойству:

  • circle()
  • ellipse()
  • inset()
  • polygon()

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

Круг

Мы начнем с circle() функции. Представьте себе ситуацию, когда у нас есть круговой аватар автора, который мы хотим расположить слева, и мы хотим, чтобы текст описания автора обтекал его справа. Просто использовать элемент border-radius:50% на аватаре будет недостаточно,  текст по-прежнему будет обрабатывать аватар как прямоугольный элемент.

С формой круга мы можем продемонстрировать, как текст может обтекать элемент.

Мы начнем с создания circle класса на основе div и создания некоторых абзацев.

<div class="circle"></div>
<p>Example text...</p>

В нашем circle классе мы переместим элемент влево, зададим ему равное height и width, и установим shape-outside в circle().

.circle {
  float: left;
  height: 200px;
  width: 200px;
  shape-outside: circle();
}

Если мы просмотрим страницу, это будет выглядеть так.

shape-outside: circle()

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

shape-outside: circle()

На этом этапе вы можете предположить, что вы можете установить background цвет или изображение в элемент, и вы увидите форму. Давайте попробуем это.

.circle {
  float: left;
  height: 200px;
  width: 200px;
  shape-outside: circle();
  background: linear-gradient(to top right, #FDB171, #FD987D);
}

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

background: linear-gradient

Мы четко видим, что текст облегает вокруг него, но сам элемент не имеет формы. Если мы хотим фактически отобразить наши функции фигуры, нам придется использовать clip-path свойство. Clip-path принимает многие из тех же значений shape-outside, поэтому мы можем дать ему такое же circle() значение.

.circle {
  float: left;
  height: 200px;
  width: 200px;
  shape-outside: circle();
  clip-path: circle();
  background: linear-gradient(to top right, #FDB171, #FD987D);
}
clip-path: circle()

В остальной части статьи будут использоваться, clip-path чтобы помочь нам идентифицировать фигуры.

Circle() функция принимает необязательный параметр радиуса. В нашем случае радиус по умолчанию ( r ) равен 50% или 100px. Использование circle(50%) или circle(100px) даст тот же результат, что и мы уже сделали.
Вы можете заметить, что текст находится прямо против формы. Мы можем использовать shape-margin свойство , чтобы добавить запас в форму, которая может быть установлена в pxem%, и любой другом стандарте CSS единиц измерения.

.circle {
  float: left;
  height: 200px;
  width: 200px;
  shape-outside: circle(25%);
  shape-margin: 1rem;
  clip-path: circle(25%);
  background: linear-gradient(to top right, #FDB171, #FD987D);
}

Пример 25% circle() радиуса с shape-margin применяемым.

shape-margin

Помимо радиуса, функция фигуры может занимать позицию at. Позиция по умолчанию — это центр круга, поэтому он circle()должен быть явно записан как circle(50% at 50% 50%) или circle(100px at 100px 100px), причем два значения являются горизонтальным и вертикальным положениями соответственно.

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

circle(50% at 0 50%);

Эта система позиционирования координат называется ссылочной рамкой.

circle(50% at 0 50%)

Позже мы узнаем, как использовать изображение вместо формы или градиента. Пока мы перейдем к следующей функции фигуры.

Эллипс

Рассмотрим функцию ellipse(), она создает овал. Чтобы продемонстрировать, мы можем создать ellipse элемент и класс.

<div class="ellipse"></div>
<p>Example text...</p>
.ellipse {
  float: left;
  shape-outside: ellipse();
  clip-path: ellipse();
  width: 150px;
  height: 300px;
  background: linear-gradient(to top right, #F17BB7, #AD84E3);
}

На этот раз мы установили другое height и width сделаем вертикально удлиненный овал.

shape-outside: ellipse()

Разница между ellipse() и  circle() заключается в том, что эллипс имеет два радиуса — x и y или радиус оси X и радиус оси Y. Поэтому приведенный выше пример также может быть записан как:

ellipse(75px 150px);

Параметры положения одинаковы для кругов и эллипсов. Радиусы, помимо единицы измерения, также включают варианты farthest-side и closest-side.

closest-side относится к длине от центра к ближайшей стороне ссылочного блока и, наоборот, farthest-side относится к длине от центра к самой дальней стороне ссылочного блока. Это означает, что эти два значения не действуют, если позиция, отличная от значения по умолчанию, не установлена.

Вот демонстрация различия closest-side и farthest-side на условиях ellipse() с 25% смещением по осям Х и Y.

eshape-outside: ellipse()
ellipse(farthest-side closest-side at 25% 25%)
shape-outside: ellipse()

Прямоугольник

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

<div class="inset"></div>
<p>Example text...</p>
.inset {
  float: left;
  shape-outside: inset(75px);
  clip-path: inset(75px);
  width: 300px;
  height: 300px;
  background: linear-gradient(#58C2ED, #1B85DC);
}

В этом примере мы создадим прямоугольник с шириной и высотой равной 300px, и зададим shape-outside равный 75px со всех сторон. Это оставит пространство вокруг него.

shape-outside: inset(75px)

Мы видим, что прямоугольник является вставкой, а текст игнорирует область вставки.

shape-outside: inset(75px)

inset()Форма может также взять border-radius с round параметром, а текст будет учитывать закругленные углы, такие как этот например , с 25px всех сторон и 75px закругления.

inset(25px round 75px)
inset(25px round 75px)

Подобно padding или margin , значение вставки будет принимать top right bottomleft значения в порядке по часовой стрелке inset(25px 25px 25px 25px)), и только с использованием единственного значения все четыре стороны будут одинаковыми inset(25px)).

Многоугольник

Наиболее интересными и гибкими функциями фигуры являются те polygon(), которые могут принимать массив x и y точки для создания любой сложной формы. Каждый элемент массива представляет i и записывается как polygon(x1 y1, x2 y2, x3 y3...) и так далее.

Наименьшее количество наборов точек, которые мы можем применить к многоугольнику, равно трем, что создаст треугольник.

<div class="polygon"></div>
<p>Example text...</p>
.polygon {
  float: left;
  shape-outside: polygon(0 0, 0 300px, 200px 300px);
  clip-path: polygon(0 0, 0 300px, 200px 300px);
  height: 300px;
  width: 300px;
  background: linear-gradient(to top right, #86F7CC, #67D7F5);
}

В этой форме первая точка — 0 0 верхняя левая верхняя часть div. Вторая точка — 0 300px это нижняя левая точка в списке div. Третья и конечная точка — 200px 300px это 2/3 по оси X  внизу. Полученная форма выглядит так:

shape-outside: polygon(0 0, 0 300px, 200px 300px)

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

<div class="left"></div>
<div class="right"></div>
<p>Example text...</p>
.left {
  float: left;
  shape-outside: polygon(0 0, 0 300px, 200px 300px);
  clip-path: polygon(0 0, 0 300px, 200px 300px);
  background: linear-gradient(to top right, #67D7F5, #86F7CC);
  height: 300px;
  width: 300px;
}

.right {
  float: right;
  shape-outside: polygon(200px 300px, 300px 300px, 300px 0, 0 0);
  clip-path: polygon(200px 300px, 300px 300px, 300px 0, 0 0);
  background: linear-gradient(to bottom left, #67D7F5, #86F7CC);
  height: 300px;
  width: 300px;
}
shape-outside: polygon

Очевидно, было бы очень сложно попытаться создать собственные сложные формы вручную. К счастью, есть несколько инструментов, которые можно использовать для создания многоугольников. Firefox имеет встроенный редактор для фигур, который вы можете использовать, щелкнув по форме многоугольника в инспекторе.

shape-outside: polygon (Firefox)

На данный момент и Chrome имеет некоторые расширения, которые вы можете использовать, например редактор CSS Shapes .

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

<div class="letter">R</div>
<p>Example text...</p>
.letter {
  float: left;
  font-size: 400px;
  font-family: Georgia;
  line-height: .8;
  margin-top: 20px;
  margin-right: 20px;
  shape-outside: polygon(5px 14px, 233px 20px, 246px 133px, 189px 167px, 308px 304px, 0px 306px) content-box;
  clip-path: polygon(5px 14px, 233px 20px, 246px 133px, 189px 167px, 308px 304px, 0px 306px);
}
shape-outside: polygon

URL-адрес

Увлекательной особенностью CSS Shapes является то, что вам не всегда нужно явно определять форму с помощью функции формы; вы также можете использовать URL-адрес полупрозрачного изображения для определения формы, и текст будет автоматически обтекать его.

Важно отметить, что используемое изображение должно быть совместимым с CORS , иначе вы получите ошибку, как показано ниже.

Access to image at 'file:///users/tania/star.png' from origin 'null' 
has been blocked by CORS policy: The response is invalid.

Обслуживание изображения на сервере с того же сервера гарантирует, что вы не получите эту ошибку.

В отличие от других примеров, мы будем использовать img тег вместо  div. На этот раз CSS прост — просто поместим url() в shape-inside свойство, как в background-image.

<img src="./star.png" class="star">
<p>Example text...</p>
.star {
  float: left;
  height: 350px;
  width: 350px;
  shape-outside: url('./star.png')
}
shape-outside: url

Поскольку изображение, которое мы использовали, было звездой с прозрачным фоном, текст знал, какие области были прозрачными и непрозрачными, и соответствующим образом выровнялся.

Градиенты

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

Мы собираемся использовать одно новое свойство с градиентами — shape-image-threshold. Свойство shape-image-threshold определяет пороговое значение альфа — канала, или какой процент изображения может быть прозрачным по сравнению с непрозрачным.

Мы сделаем градиентный пример,  50% / 50% разделение цвета и установим shape-image-thresholdравным .5

<div class="gradient"></div>
<p>Example text...</p>
.gradient {
  float: left;
  height: 300px;
  width: 100%;
  background: linear-gradient(to bottom right, #86F7CC, transparent);
  shape-outside: linear-gradient(to bottom right, #86F7CC, transparent);
  shape-image-threshold: .5;
}
shape-outside: linear-gradient

Мы можем видеть, что градиент отлично разделен по диагонали в центре непрозрачного и прозрачного.

Заключение

В этой статье мы узнали о shape-outsideshape-margin и shape-image-threshold, трёх свойствах CSS фигур. Мы также узнали, как использовать значения функций для создания кругов, эллипсов, прямоугольников вставки и сложных полигонов, которые могут обтекать текст, и продемонстрировали, как формы могут обнаруживать прозрачные части изображений и градиентов.

Автор статьи: Tania Rascia 

Перевод статьи: Denis Motive

Следующая статья
Basic principles of responsive web design