HTML Academy

HTML Academy

FrontendConf 2025 × HTML Academy Уже на следующей неделе на FrontendConf — крупнейшей профессиональной конференции фронтенд-разработчиков в России — выступит Александр Першин, сооснователь HTML Academy. Во время доклада соберём мини-утилиту для «обратного…

Уже совсем скоро на FrontendConf 2025 Александр Першин расскажет «Negative border radius — не больно». Чтобы разобраться ещё глубже и спокойно попробовать приёмы в деле, собрали материалы с интерактивными демонстрациями.

1️⃣ Основная демонстрация
Все этапы из презентации; текстовые пояснения добавим после выступления.

2️⃣ Знакомство с nebo.css — CSS-библиотекой для inverted и negative border radius

Утилитарные CSS-переменные + радиальные градиенты и CSS-маски; работает на неоднородных фонах, без дополнительных обёрток и псевдоэлементов.

3️⃣ Круглый вырез: по-старому vs через mask-image с одним radial-gradient()

Современное решение короче в разы; пример маски: radial-gradient(circle at 0 50%, transparent 74.5px, black 75px) — меньше кода, больше гибкости с фонами.

4️⃣ sibling-index() и sibling-count() — «считаем соседей» без батареи :nth-child(...)

Динамические компоненты с вычислениями в calc().

➿➿➿➿➿➿➿➿

Сохраняйте подборку — пригодится при внедрении паттерна в дизайн-системах и продакшн-вёрстке. А на конференции разберём, почему всё это работает именно так.

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥11

www.tgoop.com/htmlacademy/8182

884 viewsOct 18 at 07:01

Уже совсем скоро на FrontendConf 2025 Александр Першин расскажет «Negative border radius — не больно». Чтобы разобраться ещё глубже и спокойно попробовать приёмы в деле, собрали материалы с интерактивными демонстрациями.

1️⃣ Основная демонстрация
Все этапы из презентации; текстовые пояснения добавим после выступления.

2️⃣ Знакомство с nebo.css — CSS-библиотекой для inverted и negative border radius

Утилитарные CSS-переменные + радиальные градиенты и CSS-маски; работает на неоднородных фонах, без дополнительных обёрток и псевдоэлементов.

3️⃣ Круглый вырез: по-старому vs через mask-image с одним radial-gradient()

Современное решение короче в разы; пример маски: radial-gradient(circle at 0 50%, transparent 74.5px, black 75px) — меньше кода, больше гибкости с фонами.

4️⃣ sibling-index() и sibling-count() — «считаем соседей» без батареи :nth-child(...)

Динамические компоненты с вычислениями в calc().

➿➿➿➿➿➿➿➿

Сохраняйте подборку — пригодится при внедрении паттерна в дизайн-системах и продакшн-вёрстке. А на конференции разберём, почему всё это работает именно так.