Используется для группирования любых элементов, например, изображений и подписей к ним.
Синтаксис
Атрибуты
Закрывающий тег
HTML5 IE Cr Op Sa Fx
Тег FIGUREСофийский собор
Польский костел
Результат данного примера показан на рис. 1.
Очередная порция впечатляющих возможностей CSS — коллекция фигур на чистом CSS. Никаких картинок в Фотошопе и сложной разметки. С помощью псевдоэлементов, рамок и теней можно создавать сложные css-фигуры на основе всего лишь одного html-элемента.
.d23 < height: 55px; width: 100px; margin: 35px 20px 0 0; background: #B1BA5C; position: relative; >.d23:before
Делаем геометрические фигуры на css
CSS способен создавать всевозможные фигуры. Квадраты и прямоугольники легки, поскольку они являются естественными формами сети. Добавьте ширину и высоту, и вы получите нужный вам прямоугольник размера. Добавьте border-radius, и вы можете округлить эту форму, и достаточно, вы можете превратить эти прямоугольники в круги и овалы.
Мы также получаем элементы ::beforeи::after psuedo в CSS, которые дают нам возможность еще двух фигур, которые мы можем добавить к исходному элементу. Умничая с позиционированием, трансформацией и многими другими хитростями, мы можем создавать множество фигур в CSS только с одним HTML-элементом.
Круг
Овал
Треугольник вверх
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
Треугольник вниз
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
Треугольник влево
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
Треугольник вправо
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
Треугольник сверху слева
border-top: 100px solid red;
border-right: 100px solid transparent;
Треугольник сверху справа
border-top: 100px solid red;
border-left: 100px solid transparent;
Треугольник внизу слева
border-bottom: 100px solid red;
border-right: 100px solid transparent;
Треугольник внизу справа
border-bottom: 100px solid red;
border-left: 100px solid transparent;
Шестиугольник
Введение в CSS Shapes
CSS Shapes позволяет создавать интересные и уникальные макеты, определяя геометрические фигуры, изображения и градиенты, вокруг которых может обтекать текстовое содержимое.
До появления CSS Shapes для веб-страниц было практически невозможно разработать дизайн в виде журнального макета со свободно обтекаемым текстом. Напротив, макеты веб-дизайна традиционно формируются с помощью сеток, прямоугольников и прямых линий.
CSS Shapes позволяет определить геометрические фигуры, вокруг которых обтекает текст. Такими фигурами могут быть круг, эллипс, простые или сложные многоугольники, а также изображения и градиенты. На практике CSS Shapes позволяет отображать круговой текст вокруг круглого аватара; выводить текст поверх части полноразмерного фонового изображения; отображать текст, обтекающий буквицы в статье.
Теперь, когда CSS Shapes получили широкую поддержку в современных браузерах, стоит взглянуть на гибкость и функциональность, которые предоставляет CSS Shapes. Это позволит понять, имеет ли смысл включить фигуры в дизайн вашего следующего проекта.
Внимание! CSS Shapes поддерживают браузеры Firefox, Chrome, Safari и Opera, а также мобильные браузеры, такие как iOS Safari и Chrome для Android. CSS Shapes не поддерживает IE и пока находится на рассмотрении в Microsoft Edge.
Первый взгляд на CSS Shapes
Текущая реализация CSS Shapes — это CSS Shapes Module Level 1, она в основном вращается вокруг свойства shape-outside . Это свойство определяет фигуры, вокруг которых может обтекать текст.
Учитывая, что есть свойство shape-outside, можно предположить, что существует и соответствующее свойство shape-inside, которое будет содержать текст внутри фигуры. Свойство shape-inside может стать реальностью в будущем, но в настоящее время оно является черновым в CSS Shapes Module Level 2 и не реализовано ни в одном браузере.
В этой статье мы продемонстрируем, как использовать базовые фигуры и задать их значения, а также как установить фигуру с помощью полупрозрачной картинки или градиента.
Базовые фигуры
Мы можем определить все виды базовых фигур в CSS, применяя следующие значения функций к свойству shape-outside :
circle()
ellipse()
inset()
polygon()
Чтобы добавить свойство shape-outside к элементу, он должен быть обтекаемым, а также у него должна быть установлена высота и ширина. Давайте рассмотрим каждую из четырёх основных фигур и продемонстрируем, как их можно использовать.
circle()
Начнём с функции circle() . Представьте себе ситуацию, что у нас есть круглый аватар автора, который мы хотим выровнять по левому краю и чтобы текст с описанием автора обтекал его. Для придания тексту круглой формы недостаточно использовать border-radius: 50% на элементе аватара; текст по прежнему будет считать аватар прямоугольным элементом.
С помощью circle() мы можем продемонстрировать, как текст может обтекать по кругу.
Начнём с создания класса circle для обычного элемента и добавим несколько абзацев (я использовала цитаты Боба Росса в качестве рыбы).
Для нашего класса circle мы добавляем float со значением left , присваиваем ему одинаковую высоту и ширину и устанавливаем значение shape-outside как circle() .
.circle
Если взглянем на веб-страницу, она будет выглядеть так.
Как видите, текст обтекает по кругу, но в действительности никакой фигуры не видно. Если навести курсор на элемент в Инструментах разработчика, то увидим фактическую фигуру, которая будет установлена.
Если задать цвет фона или изображение для элемента, то вы увидите фигуру. Давайте попробуем это сделать.
.circle
К сожалению, установка фона для circle даёт нам прямоугольник, то самое, чего мы пытались избежать.
Мы можем ясно видеть обтекающий текст, но не саму фигуру элемента. Если желаем её отобразить, то нужно использовать свойство clip-path . Это свойство принимает те же значения, что и shape-outside , поэтому можем присвоить ему значение circle() .
.circle
В остальной части статьи я буду использовать clip-path , чтобы это помогло определить фигуру.
Функция circle() принимает необязательный параметр радиуса. В нашем случае радиус по умолчанию (r) составляет 50% или 100px. Использование circle(50%) или circle(100px) даст тот же результат, что мы уже сделали.
Можно заметить, что текст располагается сразу возле фигуры. Мы можем использовать свойство shape-margin , чтобы добавить поле к фигуре; значение может быть задано в px, em,% или в любой другой стандартной единице измерения CSS.
.circle
Вот пример circle() с радиусом 25% и добавлением shape-margin .
В дополнение к радиусу функция принимает позиционирование через at . Положение по умолчанию — центр круга, поэтому circle() будет явно записан как circle(50% at 50% 50%) или circle(100px at 100px 100px) ; значениями являются горизонтальное и вертикальное положение, соответственно.
Чтобы стало понятно как работает позиционирование, мы можем установить значение горизонтального положения равным 0 и получить идеальный полукруг.
circle(50% at 0 50%);
Эта координатная система позиционирования известна как связанный блок.
Позже мы узнаем, как использовать изображение вместо фигуры или градиента. А теперь перейдём к следующей фигуре.
ellipse()
Похожей на circle() является функция ellipse() , которая создаёт эллипс. Для демонстрации добавим элемент с классом ellipse .
Пример текста.
.ellipse
На этот раз мы установили разную высоту и ширину, чтобы сделать вертикально вытянутый овал.
Разница между ellipse() и circle() заключается в том, что эллипс имеет два радиуса— rx и ry или радиус по оси X и радиус по оси Y. Поэтому приведённый выше пример можно записать в таком виде:
ellipse(75px 150px);
Параметры позиционирования одинаковы для кругов и эллипсов. Радиусы, помимо того, что они являются единицей измерения, также включают farthest-side и closest-side .
closest-side указывает на длину от центра до ближайшей стороны связанного блока и наоборот, farthest-side указывает на длину от центра до самой дальней стороны связанного блока. Эти два значения не действуют, если не установлено положение, отличное от значения по умолчанию.
Вот демонстрация разницы перестановки closest-side и farthest-side для ellipse() со смещением на 25% по осям X и Y.
ellipse(farthest-side closest-side at 25% 25%)
ellipse(closest-side farthest-side at 25% 25%)
inset()
До сих пор мы имели дело только с круглыми фигурами, но можем вставлять и прямоугольники с внутренним отступом через функцию inset() .
Пример текста.
.inset
В этом примере мы создаём прямоугольник размером 300px на 300px и отступом 75px со всех сторон. В итоге получится 150px на 150px с пространством вокруг 75px.
Мы можем видеть как вставлен прямоугольник, а текст игнорирует внутреннее пространство.
inset() также может принимать параметр border-radius со значением радиуса и текст будет учитывать скруглённые уголки, как в этом примере с 25px со всех сторон и скруглением 75px.
inset(25px round 75px)
Подобно свойствам padding или margin , inset() принимает значение top right bottom left по часовой стрелке ( inset(25px 25px 25px 25px) ), использование только одного значения установит все четыре стороны одинаковыми ( inset(25px) ).
polygon()
Наиболее интересной и гибкой из функций является polygon() , который может принимать массив точек x и y для создания любой сложной фигуры. Каждый элемент в массиве представляет xi yi и будет записан как polygon(x1 y1, x2 y2, x3 y3. ) и т. д.
Наименьшим количеством наборов точек, которые мы можем применить к polygon() , является три, что создаёт треугольник.
Пример текста.
.polygon
В этой фигуре первая точка — 0 0, самая левая верхняя точка . Вторая точка — 0 300px, это самая левая нижняя точка . Третья и последняя точка — 200px 300px, что составляет 2/3 по оси X и снизу. Получившаяся фигура выглядит так:
Интересное использование функции polygon() заключается в том, что текстовое содержимое может располагаться между двумя или более фигурами. Поскольку фигура polygon() очень гибкая и динамичная, это одна из самых больших возможностей для создания действительно уникальных макетов в журнальном стиле. В данном примере мы поместим текст между двумя многоугольниками.
Очевидно, вручную довольно трудно пытаться создать свои собственные сложные фигуры. К счастью, есть несколько инструментов, которые вы можете использовать для создания многоугольников. Firefox содержит встроенный редактор, который вы можете использовать, нажав на фигуру многоугольника в Инспекторе.
На данный момент для Chrome есть несколько расширений, которые вы можете использовать, такое как CSS Shapes Editor.
Многоугольники можно использовать для вырезания фигур вокруг изображений или других элементов. В данном примере мы создаём буквицу, нарисовав многоугольник вокруг большой буквы.
Пример текста.
.letter
Изображения
Интересной особенностью CSS Shapes является то, что вам не всегда нужно явно определять фигуру с помощью функции. Вы также можете использовать адрес полупрозрачного изображения для определения фигуры и текст будет его автоматически обтекать.
Важно отметить, что используемое изображение должно быть CORS-совместимым, в противном случае вы получите ошибку подобную приведённой ниже.
Access to image at ‘file:///users/tania/star.png’ from origin ‘null’ has been blocked by CORS policy: The response is invalid.
Добавление изображения с того же сервера гарантирует, что вы не получите подобную ошибку.
В отличие от других примеров, мы будем использовать тег вместо . На этот раз CSS простой — просто поместите url() в свойство shape-outside , как вы бы это сделали со свойством background-image .
Поскольку изображение, которое я использовала, было звездой с прозрачным фоном, текст понял, какие области прозрачные, а какие нет, и выравнялся соответствующим образом.
Градиенты
Наконец, в качестве фигуры можно использовать градиенты. Они работают как изображения, и как с изображением, которое мы использовали выше, текст будет обтекать прозрачную часть.
С градиентами мы будем использовать одно новое свойство — shape-image-threshold . Оно определяет порог альфа-канала фигуры, другими словами, какой процент изображения будет считаться прозрачным.
Я сделала пример с градиентом, который разделен на 50%/50% между цветом и прозрачностью и установила значение shape-image-image как .5. Это означает, что все пиксели с непрозрачностью более 50% должны рассматриваться как часть изображения.
Пример текста.
.gradient
Можно увидеть, как градиент идеально разделён диагональю по центру прозрачного и непрозрачного цвета.
Заключение
В этой статье мы узнали о трёх свойствах CSS Shapes — shape-outside , shape-margin и shape-image-threshold . Мы также узнали, как использовать функции для создания кругов, эллипсов, прямоугольников и сложных многоугольников, вокруг которых может обтекать текст. Продемонстрировали, как фигуры могут отслеживать прозрачные фрагменты изображений и градиентов.
Все примеры из этой статьи можно найти в следующей демонстрации, а также скачать исходные файлы.
Пример текста. 
