Введение в CSS Shapes

Введение в CSS Shapes

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Общий обзор 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 и создания нескольких абзацев. (Я использовал в качестве текста заполнителя цитаты Боба Росса.)

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

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

Как видите, текст обтекает фигуру круга, но мы не видим никакой фигуры. Если навести курсор на элемент в инструментах разработчика, то тогда мы увидим саму фигуру.

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

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

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

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

Функция circle() принимает необязательный параметр радиуса. В нашем случае радиус по умолчанию ( r ) равен 50% или 100px. Использование circle(50%) или circle(100px) дает тот же результат, который мы уже имеем.

Вы можете заметить, что текст прилегает к самой фигуре. Мы можем использовать свойство shape-margin, чтобы добавить отступ от фигуры, его можно задать в px, em, % и любой другой стандартной единице измерения CSS.

Вот пример, в котором применены радиус 25% circle() и shape-margin.

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

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

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

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

Эллипс

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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Внутренний отступ

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

В этом примере мы создадим прямоугольник 300px на 300px с внутренним отступом 75px со всех сторон. В результате у нас получится прямоугольник 150px на 150px с пространством вокруг него в 75px.

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

Фигура inset() может также принимать border-radius с параметром round, а текст будет учитывать закругленные углы, как в этом примере с внутренним отступом 25px со всех сторон и закруглением 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…) и так далее.

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

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

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

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

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

URL-адрес

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

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

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

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

Градиенты

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

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

Я собираюсь создать пример с градиентом, в котором цвет и прозрачность соотносятся, как 50% / 50%, и установить для shape-image-threshold — .5, то есть все пиксели, которые более чем на 50% непрозрачны следует рассматривать как часть изображения.

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

Заключение

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

Вы можете найти все примеры этой статьи в следующей демо-версии. Вы также можете скачать исходные файлы.

Автор: Tania Rascia

Источник: https://tympanus.net/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree