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

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

С легкостью находите и устраняйте проблемы веб-доступности с помощью ax DevTools Pro. Попробуй бесплатно!

В Medium Джон Мур недавно определил «непрямоугольные заголовки» как крошечный тренд . А-ля: это пока не безумно популярно, но погоди, детка.

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

Например трапеции :

Патрик Кантор

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

Робин Фильмы Асара Морриса
Автор Марк Клэнси

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

Целевая страница музыкального приложения Ибну Мас’уда

Или даже в форме ягодиц :

Plutio от Лео Бассама Извини, Лео, я не могу его не видеть. А теперь, дорогой читатель, ты тоже не можешь.

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

Изображение

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

Но здесь есть несколько проблем:

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

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

это один идет.

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

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

Если вам нужен

угол , чтобы оставаться постоянной, установите высоту SVG в vw:

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

И вам не нужно выбирать только один – мы можем адаптировать его, поскольку элементы SVG подвержены медиа-запросам. Обратите внимание на этот заголовок в геометрическом стиле с шириной ниже и выше пикс.

Стреляй, сынок. Что не любить? О, и мы даже можем сделать стиль ягодиц.

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

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

 header :: after {content: "";  позиция: абсолютная;  внизу: 0;  ширина: 299%;  высота: 299 пикс;  фон: url (Dividerr.svg);  } 

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

 header :: после многоугольника {fill: white;  } 

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

clip-path

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

после Это.

И, как аналогичный синтаксис SVG, если вы хотите изменить поведение реакции, описанное выше, с

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

Самый большой недостаток Clip-path? Поддержка браузером

не так уж и здорово . Однако, в зависимости от того, насколько важен ваш непрямоугольный заголовок или div, его можно квалифицировать как прогрессивное улучшение. В этом случае отсечение пути прочь!

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

Например,

выпуклый эллиптический заголовок идеально подходит для

радиус границы .

А вогнутый эллиптический заголовок может просто иметь радиус границы на элементе после заголовка.

  section {border-bottom-left-radius: 58% 27%;  граница-нижний-правый-радиус: 58% 31%;  } 

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

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

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

Что лучше?

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

Leave a comment

Your email address will not be published. Required fields are marked *