Створення непрямокутних хедерів

Нещодавно на сайті 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 не така вже й велика. Підтримка браузера не така вже й велика. Однак, залежно від складності вашого непрямокутного блоку, він може розглядатись як прогресивне розширення. В іншому випадку не варто його використовувати!

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.