Уже совсем скоро на 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().

➿➿➿➿➿➿➿➿

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

Зарплата стажёра и джуна на испытательном сроке. Что ждёт выпускников совместной программы обучения с ONLY?

Марианна Воденицкая, HRBP ONLY, рассказала про тестовое задание, интервью и особенности испытательного срока

Полный эфир с ONLY — по ссылке:

🐭 Смотреть на YouTube
🐹 Смотреть в VK
🪻 Программа обучения

Прямой эфир с основателем студии разработки WAPP

HTML Academy и компания WAPP запускают синдикатный поток обучения под работодателя. Небольшая группа из 10 человек, четыре модуля за 8,5 месяцев и возможность проектной работы после выпуска — обучение адаптировано под потребности работодателя.

Приходите на эфир 23 октября в 12:00 (MSK), чтобы:

1️⃣ Узнать, как устроен фронтенд в студии разработки: какие задачи решают, с какими клиентами работают и что требуется от новичков.
2️⃣ Разобраться в формате проектной работы: как строится взаимодействие, что влияет на рост и когда пересматривается оплата.
3️⃣ Понять путь от обучения к первым заказам: что проверяют на собеседовании и как проходит адаптация.

Бонус: разыграем одно бесплатное место на программу среди первых 100 зарегистрировавшихся. Победителя объявим в конце трансляции.

Регистрируйтесь по ссылке — пришлём напоминание перед началом и расскажем, как попасть на обучение.

https://htmlacademy.ru/events/live-wapp

Голограммы без шейдеров и JavaScript — это вообще реально?
➿➿➿➿➿➿➿➿➿➿➿➿
Да, и в новом выпуске «CSS Боль» мы это доказываем.

Три слоя, конический градиент и два режима смешивания mix-blend-mode — вот и весь секрет переливающегося эффекта. Никакого WebGL, никаких библиотек. Только conic-gradient(), @property и правильное наложение слоёв.

Самое интересное: можно менять цвета, скорость вращения и параметры градиента прямо в интерактивной демке. Один эффект превращается в десятки вариантов — от тёплого свечения до холодного льда.

Разбираем на примере карточки заклинания из «Героев 3». Потому что ностальгия.

🐭 Смотреть на YouTube
🐹 Смотреть в VK