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, и доступное на гитхабе. Подключайте и используйте с удовольствием.