От автора: CSS Shapes позволяют нам создавать интересные и уникальные макеты, определяя геометрические фигуры, изображения и градиенты, вокруг которых может обтекать текстовое содержимое. Узнайте в этом введении, как их использовать.
До появления CSS Shapes было почти невозможно разработать макет в стиле журнала со свободно распределенным текстом. Напротив, макеты веб-дизайна традиционно формировались с помощью сеток, прямоугольников и прямых линий.
CSS Shapes позволяют определять геометрические фигуры, вокруг которых может обтекать текст. Этими фигурами могут быть круги, эллипсы, простые или сложные многоугольники и даже изображения и градиенты. В качестве нескольких практических примеров дизайна с использованием Shapes можно привести текст, обтекающий вокруг круглого аватара, отображение текста поверх определенной части полноразмерного фонового изображения и текст, обтекающий буквицы в статье.
Теперь, когда CSS Shapes получили широкую поддержку в современных браузерах, стоит рассмотреть их гибкость и функционал, которые они предоставляют, чтобы понять, имеет ли смысл применять их в вашем следующем дизайнерском проекте.
Внимание: на момент написания этой статьи CSS Shapes поддерживались в Firefox, Chrome, Safari и Opera, а также в мобильных браузерах, таких как iOS Safari и Chrome для Android. Shapes не поддерживаются IE и находятся на рассмотрении в Microsoft Edge.
Общий обзор CSS Shapes
Текущая реализация CSS Shapes — это CSS Shapes Module Level 1, который в основном описывает свойство shape-outside. shape-outside определяет фигуру, вокруг которой может обтекать текст.
Учитывая, что есть свойство shape-outside, вы можете предположить, что есть и соответствующее свойство shape-inside, которое связано с текстом, содержащимся внутри фигуры. Свойство shape-inside может быть введено в будущем, но в настоящее время оно рассматривается только в качестве возможности в CSS Shapes Module Level 2, и не реализовано ни в одном браузере.
В этой статье мы продемонстрируем, как использовать тип данных basic-shape и задать для него значения функции shape, а также задать фигуру с помощью частично прозрачного изображения или градиента.
Основные функции Shapes
Мы можем определить в 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();
}Если мы посмотрим на страницу, она будет выглядеть так.
Как видите, текст обтекает фигуру круга, но мы не видим никакой фигуры. Если навести курсор на элемент в инструментах разработчика, то тогда мы увидим саму фигуру.
На данный момент, вы можете предположить, что мы можем установить для элемента фоновый цвет или изображение, и увидим фигуру. Давайте попробуем.
.circle { float: left; height: 200px; width: 200px; shape-outside: circle(); background: linear-gradient(to top right, #FDB171, #FD987D);
}К сожалению, просто задав для circle фон, мы получим прямоугольник, то, чего мы пытались избежать.
Мы можем ясно видеть текст, обтекающий элемент, но сам элемент не имеет формы. Если мы хотим отобразить фигуру, нам нужно использовать свойство 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() принимает необязательный параметр радиуса. В нашем случае радиус по умолчанию ( r ) равен 50% или 100px. Использование circle(50%) или circle(100px) дает тот же результат, который мы уже имеем.
Вы можете заметить, что текст прилегает к самой фигуре. Мы можем использовать свойство shape-margin, чтобы добавить отступ от фигуры, его можно задать в px, em, % и любой другой стандартной единице измерения 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.
В дополнение к радиусу функция фигуры может занимать позицию, используя at. Положение по умолчанию — центр круга, поэтому circle() можно явно определить, как circle(50% at 50% 50%) или circle(100px at 100px 100px), где два значения являются позициями по горизонтали и по вертикали, соответственно.
Чтобы вам было понятнее, как работает позиционирование, мы можем установить для горизонтальной позиции значение 0, чтобы создать идеальный полукруг.
circle(50% at 0 50%);
Эта система координатного позиционирования называется связанным блоком.
Позже мы узнаем, как использовать изображение вместо фигуры или градиента. Сейчас давай перейдем к следующей функции фигуры.
Эллипс
Функция ellipse() похожа на circle(), но она создает овал. Чтобы продемонстрировать это, мы можем создать элемент и класс 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, чтобы создать вертикально вытянутый овал.
Разница между ellipse() и a circle() заключается в том, что эллипс имеет два радиуса — rx и ry, или радиус оси X и радиус оси Y. Поэтому приведенный выше пример также можно записать в виде:
ellipse(75px 150px);
Параметры позиции для кругов и эллипсов аналогичны. Радиусы, помимо того, что они являются единицей измерения, также включают параметры farthest-side и closest-side.
closest-side относится к расстоянию от центра до ближайшей стороны связанного блока, и, наоборот, farthest-side относится к расстоянию от центра до самой дальней стороны связанного блока. Это означает, что эти два значения не действуют, если не установлена позиция, отличная от значения по умолчанию.
Вот демонстрация различий между closest-side и farthest-side для ellipse() со смещением 25% по осям Х и Y.
ellipse(farthest-side closest-side at 25% 25%)
ellipse(farthest-side closest-side at 25% 25%)
Внутренний отступ
До сих пор мы имели дело только с круглыми фигурами, но мы можем определить прямоугольник с внутренним отступом с помощью функции 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 на 300px с внутренним отступом 75px со всех сторон. В результате у нас получится прямоугольник 150px на 150px с пространством вокруг него в 75px.
Мы можем видеть, что прямоугольник вставлен, а текст игнорирует область внутреннего отступа.
Фигура inset() может также принимать border-radius с параметром round, а текст будет учитывать закругленные углы, как в этом примере с внутренним отступом 25px со всех сторон и закруглением 75px.
inset(25px round 75px)
Как и сокращенные свойства padding и margin, внутренний отступ может принимать значения top right bottom left в порядке по часовой стрелке ( inset(25px 25px 25px 25px)), а использование только одного значения делает все четыре отступа одинаковыми ( inset(25px)).
Многоугольник
Наиболее интересной и гибкой из функций фигур является функция polygon(), которая может принимать массив точек x и y для создания любой сложной фигуры. Каждый элемент в массиве представляет xi yi и будет записан как 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 и в самом низу связанного блока. Получившаяся фигура выглядит так:
Интересное использование функции 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;
}
Очевидно, было бы очень трудно создавать свои собственные сложные фигуры вручную. К счастью, есть несколько инструментов, которые вы можете использовать для создания многоугольников. Firefox имеет встроенный редактор для фигур, который вы можете использовать, нажав на фигуру многоугольника в Инспекторе кода.
И на данный момент в Chrome есть несколько расширений, которые вы можете использовать, например, CSS Shapes Editor. Многоугольники можно использовать для создания фигур вокруг изображений или других элементов. В этом примере мы создаем буквицу, нарисовав многоугольник вокруг большой буквы.
<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);
}
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-outside, как вы это сделали ли бы для 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-image-threshold. В shape-image-threshold определяется пороговое значение альфа — канала фигуры, или какой процент изображения может быть прозрачным.
Я собираюсь создать пример с градиентом, в котором цвет и прозрачность соотносятся, как 50% / 50%, и установить для shape-image-threshold — .5, то есть все пиксели, которые более чем на 50% непрозрачны следует рассматривать как часть изображения.
<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, shape-margin и shape-image-threshold, трех свойствах CSS Shapes. Мы также узнали, как использовать значения функций для создания кругов, эллипсов, прямоугольников и сложных многоугольников, вокруг которых может обтекать текст, и продемонстрировали, как фигуры могут определяться прозрачными частями изображений и градиентами.
Вы можете найти все примеры этой статьи в следующей демо-версии. Вы также можете скачать исходные файлы.
Автор: Tania Rascia
Источник: https://tympanus.net/
Редакция: Команда webformyself.