Вогнутые углы за пару строк CSS | CSS Боль

Инвертированные углы — любимый дизайнерский приём и вечная боль верстальщиков. Каждый раз одно и то же: дополнительные дивы, псевдоэлементы, позиционирование и хаос в коде. А если фон не сплошной — всё ломается. В этом выпуске: – Почему сделать вогнутый угол (inverted border radius) — одна из самых раздражающих задач в вёрстке. – Как библиотека nebo.css решает её в пару строк кода, без JavaScript и SVG. – Простая структура классов: nebo--tl, nebo--br, nebo--bl, nebo--tr — добавил и готово. – Настройка формы угла с помощью CSS-переменных -nb-r, -nb-w, -nb-h. – Новые возможности версии 1.1: независимые радиусы, эллиптические скругления и параметр -_nb-smooth для плавности. – Как делать несколько углов и сложные формы с помощью обёрток. nebo.css — это настоящее обезболивающее для верстальщика. Подключаешь, настраиваешь переменные — и боль исчезает. Демонстрация → https://htmlacademy.ru/demos/195 Библиотека HTML Academy → https://github.com/htmlacademy/nebo.css Таймкоды: 00:00 Введение в проблему 00:49 Описание инвертированного угла 02:32 Ограничения существующих решений 03:19 Представление библиотеки nebo.css 04:24 Настройка углов с помощью переменных 06:17 Добавление нескольких углов 07:23 Создание сложных элементов интерфейса 08:26 Обновление библиотеки 09:57 Работа с эллиптическими формами 11:47 Заключение #css #frontend #webdevelopment #cssgradients