Художественное направление для Интернета с использованием фигур CSS

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

Я видел много примеров использования свойств, но очень немногие выходят за рамки базовых фигур, включая circle() , ellipse() , inset() . Даже примеры, использующие формы polygon() , редко выходят за их рамки. Учитывая творческие возможности CSS Shapes, это разочаровывает. Но я уверен, что приложив немного вдохновения и воображения, мы сможем создать более характерный и привлекательный дизайн. Итак, я собираюсь показать вам, как использовать фигуры CSS для создания следующих пяти различных типов макетов:

1. V-образные формы
2. Z-шаблоны
3. Изогнутые формы
4. Диагональные формы
5. Повернутые фигуры

Немного вдохновения

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

В течение последних нескольких лет я наполнял папки Dropbox вдохновением, и мне действительно нужно переместить эти примеры в Pinterest. К счастью, Кристофер Ван Сант более усердно, чем я, составил доску Pinterest, полную вдохновляющих примеров «форм текста».

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

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

  img { float: <values>; shape-outside: <values>; }
img { float: <values>; shape-outside: <values>; }

NB: Когда вы размещаете содержимое вокруг фигур, следите за тем, чтобы ни одна строка текста не стала слишком узкой и не вмещала только одно или два слова.

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

  <header role="banner"> <h1>Mini Cooper</h1> </header> <figure> <img src="mini.png" alt="Mini Cooper"> </figure> <main> … </main>
<header role="banner"> <h1>Mini Cooper</h1> </header> <figure> <img src="mini.png" alt="Mini Cooper"> </figure> <main> … </main>

1. V-образные формы

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

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

  [src*="shape-left"], [src*="shape-right"] { width: 50%; height: 100%; } [src*="shape-left"] { float: left; shape-outside: url('alpha-left.png'); } [src*="shape-right"] { float: right; shape-outside: url('alpha-right.png'); }
[src*="shape-left"], [src*="shape-right"] { width: 50%; height: 100%; } [src*="shape-left"] { float: left; shape-outside: url('alpha-left.png'); } [src*="shape-right"] { float: right; shape-outside: url('alpha-right.png'); } 

Сгенерированный контент

Как объяснила Рэйчел в своей статье:

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

В качестве альтернативы альфа-каналу я могу использовать Generated Content — применительно к двум псевдоэлементам — один для многоугольного треугольника слева, другой для правого. Мой бегущий текст теперь будет течь между двумя сгенерированными фигурами:

  main::before { content: ""; display: block; float: left; width: 50%; height: 100%; shape-outside: polygon(0 0, 0 100%, 100% 100%); } main p:first-child::before { content: ""; display: block; float: right; width: 50%; height: 100%; shape-outside: polygon(100% 0, 0 100%, 100% 100%); }
main::before { content: ""; display: block; float: left; width: 50%; height: 100%; shape-outside: polygon(0 0, 0 100%, 100% 100%); } main p:first-child::before { content: ""; display: block; float: right; width: 50%; height: 100%; shape-outside: polygon(100% 0, 0 100%, 100% 100%); }

NB: Создатель CSS clip-path от Bennett Feely — великолепный инструмент для определения значений координат для использования с фигурами CSS.

2. Z-шаблоны

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

В следующем дизайне дискретный z-шаблон формируется следующим образом:

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

Для реализации этого дизайна нет необходимости в сложной разметке, и мой простой HTML-код включает всего три элемента:

  <header role="banner"> <h1>Mini Cooper:icon of the '60s</h1> <img src="banner.png" alt="Mini Cooper"> </header> <main> <img src="placeholder-left.png" alt="" aria-hidden="true"> <img src="placeholder-right.png" alt="" aria-hidden="true"> … </main> <figure role="contentinfo"> … </figure>
<header role="banner"> <h1>Mini Cooper:icon of the '60s</h1> <img src="banner.png" alt="Mini Cooper"> </header> <main> <img src="placeholder-left.png" alt="" aria-hidden="true"> <img src="placeholder-right.png" alt="" aria-hidden="true"> … </main> <figure role="contentinfo"> … </figure>

Мой заголовок и рисунок, охватывающий ширину страницы, не нуждаются в пояснениях, но размещение текста между двумя треугольными фигурами немного сложнее. Чтобы реализовать этот z-образный дизайн, я решил включить два крошечных изображения-заполнителя размером 1 × 1 пиксель, к которым я применяю два больших изображения, формирующих форму, с помощью shape-outside . Прикрепив к этим изображениям атрибут aria-hidden , программа чтения с экрана не будет их описывать.

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

  [src*="placeholder-left"], [src*="placeholder-right"] { display: block; width: 240px; height: 100%; } [src*="placeholder-left"] { float: left; shape-outside: url('shape-right.png'); } [src*="placeholder-right"] { float: right; shape-outside: url('shape-right.png'); }
[src*="placeholder-left"], [src*="placeholder-right"] { display: block; width: 240px; height: 100%; } [src*="placeholder-left"] { float: left; shape-outside: url('shape-right.png'); } [src*="placeholder-right"] { float: right; shape-outside: url('shape-right.png'); } 

Легендарный Mini Cooper был быстрым и увлекательным в управлении. В то время как мой дизайн был бы совершенно презентабельным без z-шаблона, сформированного CSS Shapes, этот макет выглядит предсказуемым и лишенным энергии. Z-шаблон, созданный путем размещения узкого столбца бегущего текста между двумя фигурами, предполагает скорость и удовольствие, которое люди получат от вождения этого культового маленького автомобиля.

3. Изогнутые формы

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

Хотя в спецификации модуля CSS Shapes Module Level 2 было предложено ограничить содержимое формой, в настоящее время нет способа узнать, будет ли это реализовано в браузерах и когда. Но хотя shape-inside недоступна ( пока! ), это не значит, что я не могу создать аналогичные результаты, используя shape-outside .

 [src*="curve"] { float: right; width: 400px; height: 100vh; shape-outside: url('curve.png'); }

 [src*="curve"] { shape-margin: 3rem; }

Больше полей

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

  h1 { margin-left: 5vw; } img { margin-left: 10vw; } p { margin-left: 20vw; }
h1 { margin-left: 5vw; } img { margin-left: 10vw; } p { margin-left: 20vw; }

4. Диагональные формы

Углы могут помочь сделать макеты менее структурированными и более органичными. Отсутствие четкой структуры побуждает взгляд свободно перемещаться по композиции. Это движение также заставляет аранжировку казаться энергичной.

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

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

  <header role="banner"> <h1>Mini Cooper</h1> <img src="banner.png" alt="Mini Cooper"> </header> <main> <img src="shape.png" alt=""> … </main>
<header role="banner"> <h1>Mini Cooper</h1> <img src="banner.png" alt="Mini Cooper"> </header> <main> <img src="shape.png" alt=""> … </main>

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

  [src*="shape"] { float: left; shape-outside: url('shape.png'); shape-margin: 3rem; }
[src*="shape"] { float: left; shape-outside: url('shape.png'); shape-margin: 3rem; }

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

5. Повернутые фигуры

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

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

На этот раз я перемещаю видимое изображение вправо и применяю свойство shape-outside со значением URL, которое соответствует моему изображению с альфа-каналом:

  [src*="shape"] { float: right; width: 50%; shape-outside: url('alpha.png'); shape-margin: 1rem; }
[src*="shape"] { float: right; width: 50%; shape-outside: url('alpha.png'); shape-margin: 1rem; }

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

  body { transform: rotate(-10deg); }
body { transform: rotate(-10deg); } 

Бонусный пример: многоугольные формы скульптурных столбцов

Выдержка из «Art Direction for the Web», доступная с 26 марта 2019 года.

Вы можете создавать сильные структурные формы, используя только шрифт. Комбинируя формы polygon() и псевдоэлементы, вы можете лепить фигуры из сплошных блоков бегущего текста в стиле Алексея Бродовича и его влиятельной работы для Harper's Bazaar.

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

  body { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 2vw; max-width: 48em; }
body { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 2vw; max-width: 48em; }

Поскольку есть два элемента article, и я также указал два столбца для своей сетки, нет необходимости указывать конкретное положение этих статей. Я могу позволить браузеру разместить их за меня, и все, что мне остается, это применить shape-outside к сгенерированному псевдоэлементу в каждом столбце:

  article:nth-of-type(1) p:nth-of-type(1)::before { content: ""; float: left; width: 160px; height: 320px; shape-outside: polygon(0px 0px, 90px 0px, [...]); } article:nth-of-type(2) p:nth-of-type(2)::before { content: ""; float: right; width: 160px; height: 320px; shape-outside: polygon(20px 220px, 120px 0px, [...]); }
article:nth-of-type(1) p:nth-of-type(1)::before { content: ""; float: left; width: 160px; height: 320px; shape-outside: polygon(0px 0px, 90px 0px, [...]); } article:nth-of-type(2) p:nth-of-type(2)::before { content: ""; float: right; width: 160px; height: 320px; shape-outside: polygon(20px 220px, 120px 0px, [...]); }

Расплата

Теперь, когда Firefox выпустил версию, которая поддерживает CSS-формы, и запустил редактор контуров фигур внутри своих инструментов разработчика, теперь есть только Edge без поддержки фигур. Эта ситуация скоро изменится после того, как Microsoft объявила о замене своего собственного механизма рендеринга EdgeHTML на Chromium Blink, тот же движок, что и в Chrome и Opera.

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

Примечание редакции . В новой книге Энди Art Direction for the Web (оформите предзаказ сегодня) рассказывается о 100-летней истории художественного направления и о том, как мы можем использовать эти знания и новейшие веб-технологии для создания лучших цифровых продуктов. Прочтите отрывок из главы, чтобы получить представление о том, что может предложить книга.

Дополнительные ресурсы

• «Художественное руководство для Интернета», Энди Кларк
• «По-новому взгляните на формы CSS», Рэйчел Эндрю.
• «Формы CSS», веб-документы MDN, Mozilla
• «Редактирование контуров фигур в CSS», веб-документы MDN, Mozilla
• «Художественное оформление для Интернета: новая потрясающая книга», журнал Smashing.