nebo.css — простейший способ создания negative border radius
«Negative border radius» или «inverted border radius» — это популярный интерфейсный паттерн. Он показан на картинке красной линией.
Если вы никогда с ним не встречались — вам повезло. Он бесит всех верстальщиков, потому что реализовывать его — сложно. Приходится писать море кода с позиционированными псевдоэлементами или использовать SVG.
Видеоверсия этого курса доступна во ВКонтакте и на Ютюбе
Сейчас вы познакомитесь с CSS-библиотекой nebo.css, которая позволяет создавать и настраивать инвертированные углы с помощью пары строчек кода. Название библитеки происходит от названия паттерна «negative border radius».
Добавим такие углы четырём карточкам.
Вначале подключаем nebo.css. Это просто файл со стилями.
Мини-библиотека nebo.css реализована на чистом CSS, поэтому вы получаете все плюсы использования нативного CSS.
Затем добавляем первой карточке специальный класс nebo. Он добавляет инвертированный угол снизу справа.
Менять расположение угла можно с помощью дополнительных классов-модификаторов. Класс nebo--tr переместит угол вверх вправо.
Класс nebo--bl нарисует угол внизу слева.
Класс nebo--tl нарисует угол сверху слева.
Класс nebo--br нарисует угол снизу справа. Этот класс добавлен исключительно для симметрии, так как угол по умолчанию располагается снизу справа.
nebo.css позволяет настраивать параметры углов с помощью CSS-переменных.
Например, с помощью переменной --nb-r можно настроить радиус всех углов.
Также можно настраивать параметры отдельных элементов. Но перед этим перенесём угол третьей карточки вниз, чтобы он не обрезал текст.
С помощью переменных --nb-w и --nb-h можно настраивать «ширину» и «высоту» углов. То есть допольнительные горизонтальные отступы между внутренним и внешним радиусами угла.
Переопределим ширину и высоту угла первой карточки.
Настроим ширину и высоту угла второй карточки.
Параметры заданы CSS-переменными, которые подчиняются привычному каскаду, поэтому мы можем использовать любые селекторы, а не только класс nebo.
Настроим ширину и высоту углов оставшихся карточек.
Кстати, углы будут корректно отображаться, даже при нулевой ширине и высоте. Можете попробовать задать нулевые размеры, главное не забывайте использовать px.
И самое главное — уголки работают даже на неоднородных фонах!
Библиотека nebo.css заточена на решение конкретной задачи — добавлять блоку один инвертированный угол.
А если нужно добавить несколько углов?
Когда нужно несколько углов, можно использовать дополнительные обёртки.
Оборачиваем карточку в div с нужными классами, например nebo nebo--bl, то есть угол находится снизу слева.
И настраиваем параметры угла у обёртки. Так можно добавить и три, и четыре угла.
Комбинируя обёртки и параметры, можно получать ещё более сложные формы.
Вот более сложный пример с инвертированными углами. В популярных роликах на ютюбе есть сложное решение на псевдоэлементах (которое работает только на сплошном фоне).
Давайте посмотрим, как легко и быстро эта задача решается с помощью nebo.css.
Возьмём две части карточки: верхнюю с картинкой и нижнюю с информацией.
Подключим nebo.css и добавим нужные классы обеим частям карточки.
Настроим параметры угла верхней части.
Настроим параметры угла нижней части.
И сместим верхнюю часть так, чтобы получилась нужная нам форма. В примере чисто для демонстрации использован отрицательный маргин. В реальном проекте можно использовать любой другой способ смещения.
Мы получили быстрое и простое решение, работающее на неоднородном фоне!
А сейчас самое приятное!
nebo.css — это опенсорсное решение, разработанное HTML Academy, и доступное на гитхабе. Подключайте и используйте с удовольствием.
