Создание непрямоугольных хедеров

Не так давно на сайте Medium, Джон Мур назвал «непрямоугольные хедеры» крошечной тенденцией. Они еще не очень популярны, но стоит подождать, это может измениться.

Мы поговорим о хедерах (в общем о любых элементах контейнерах) которые имеют непрямоугольную форму.

Такие, как трапеции:

Или более сложные геометрические фигуры:

Или округлые/эллиптические:

Или даже присоединение форм щек:

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

Изображение

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

Но тут есть некоторые вопросы:

• Адаптивное поведение? Как правило, эти маски имеют полную ширину, это приводит к постоянному определению значений ширины (например, srcset) или к риску растровой пикселизации.
• Это полностью отдельный файл, который должен быть получен с сервера — это кажется бесполезным для простых фигур.
• Медленно повторяется в браузере, если вам нужно повторно использовать файлы изображения из вашего дизайна.

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

SVG

По сравнению с экспортом JPG из эскиза, использование встроенного SVG является более эффективным, легко сделать отзывчивым и легко повторно использовать в дизайне. Для большинства случаев, я рекомендую использовать именно этот способ. Универсальный, кросс-браузерный, векторный и потрясающий.

Один выбор который вы должны сделать с наклонным фоном это: что должно оставаться постоянным при изменении ширины экрана, угол или разность высот между двумя сторонами?

Если вы хотите, чтобы угол оставался постоянным, задайте высоту SVG в vw:

Если вы хотите, чтобы разность высот оставалась постоянной, задайте высоту SVG в пикселях:

И вам не нужно выбирать только один — мы можем сделать их отзывчивыми, так как SVG элементы подчиняются медиа-запросам. Проверьте стили геометрического хедера с шириной меньше и больше 700 пикселей.

О, и мы даже можем сделать стиль стыковой щеки.

(Возможно, это лучше сделать с помощью beziers, но вы поняли идею!)

Еще один вариант, если вы хотите сделать фон SVG полностью в CSS, вы можете сохранить SVG и ссылку на его URL в псевдоэлементе.

header::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  background: url(divider.svg);
}

Если вы используете `divider.svg` в качестве повторяющегося элемента в разных местах, вы также можете изменить цвет:

header::after polygon {
  fill: white;
}

Но что делать, если раздел под заголовком имеет сложный фон? Во всех своих примерах мы просто использовали простой белый фон. Что делать, если есть градиент или другое фоновое изображение или что-то еще? Что тогда?

clip-path

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

Синтаксис подобен SVG, если вы хотите изменить отзывчивое поведение, можете изменить высоту на простой процент.

Какой самый большой недостаток? Поддержка браузеров сlip-path не так уж велика.Browser support is not that great. Однако, в зависимости от сложности вашего непрямоугольного блока, он может рассматриваться как прогрессивное расширение. В другом случае, не стоит его использовать!

border-radius

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

Например, выпуклый эллиптический заголовок идеально подходит для border-radius.

Вогнутый эллиптический хедер может иметь border-radius для элемента после блока.

section {
  border-bottom-left-radius: 50% 20%;
  border-bottom-right-radius: 50% 20%;
}

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

transform: skew

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

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

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

Какой из них лучше?

Насколько мне известно, SVG это лучший способ. Если у вас есть более сложный фон под хедер, то выбор лучшего способа зависит от формы. Стоит изучить skew или border-radius могут ли они подойти или хорошо ли поддерживается браузерами что бы не возникло проблем с использованием clip-path.