HTML Academy (старое)

Мы перевезли канал в Максе на правильное место. Чтобы получать наши новости, подписывайтесь https://max.ru/htmlacademy

clip-path и CSS-маски не меняют форму блока — они её имитируют. Рамка, тень, outline не знают о вырезах и работают как с обычным прямоугольником. Свойство border-shape работает по-другому. Как border-radius научил рамки скругляться, так border-shape + функция shape() учат их принимать произвольную форму. Рамки повторяют контур, box-shadow и outline тоже. В спецификации CSS Borders Level 4 уже есть черновик, а в Chrome Canary — первые работающие прототипы. Пока ждём поддержку в браузерах, самое время разобраться с функцией shape(). В новом выпуске «CSS Боли» — как мы дошли от border-radius до произвольных форм и почему маски оказались тупиком для рамок и теней. 👉🏻 Смотреть в VK

DUMP SPB 2026 × HTML Academy Весь внешний вид компонента — в CSS-переменных. JavaScript только переключает состояния. Звучит непривычно, но это рабочий подход. На DUMP SPB 13 февраля Александр Першин выступит с докладом «Реактивный CSS» — про перенос логики отображения из JavaScript в стили. В докладе — сравнение двух реализаций одного компонента: классической на JS и реактивной на CSS. Можно будет оценить разницу в объёме и сложности кода. Промокод PERSHIN — скидка 10% на билет. Конференция · О докладе

Cursor, Claude Code, Qwen Code — инструменты есть, а системы нет. Большинство разработчиков используют ИИ от случая к случаю: спросил — получил ответ — забыл. На курсе «Фронтенд на автопилоте» вы пройдёте полный цикл разработки интернет-магазина вместе с ИИ: настройка окружения, генерация компонентов, тесты, документация, интеграция API. К концу курса — готовый проект и навык, который встраивается в ежедневную работу. #htmlacademy #levelup 🧬 Записаться на курс

Мы учим писать код, а не полагаться на удачу. Но в эти выходные — исключение. С 6 по 8 февраля ко Дню науки разыгрываем скидки с помощью удачи. Отправляете эмодзи 🎰 в комментарии к посту в Телеграме — барабан крутится сам, а комбинация определяет вашу скидку: 20%, 30% или 40%. Проигравших нет. Переходите в наш Telegram-канал и пробуйте → https://t.me/htmlacademy

Круглый вырез в карточке — пять обёрток, 20 строчек CSS и сломанный фон на стыках блоков. Знакомо? Классический подход заставляет «нарезать» карточку на кусочки: колонка для контента, колонка для выреза, внутри — три блока с flex-grow и radial-gradient. И всё ломается, если карточке задать градиентный фон — состыковать части принципиально невозможно. Одно свойство mask-image с тем же radial-gradient решает задачу без единой обёртки. Карточка остаётся цельной — и корректно тянется, и принимает любой фон. В статье собираем оба варианта пошагово и сравниваем. Демонстрация: https://htmlacademy.ru/demos/235 Читать статью → https://habr.com/ru/articles/993310/

Qwen Code — AI-агент для VS Code, который генерирует готовый код прямо в терминале. Создание даже простой портфолио-страницы обычно занимает часы: разметка, стили, адаптивность, тёмный режим. В статье показываем, как за три запроса к Qwen Code получить готовую страницу с семантическим HTML, CSS-переменными и поддержкой тёмного режима. Разбираем установку расширения Qwen Code Companion в VS Code, запуск через команду qwen и пошаговое взаимодействие: от структуры проекта до финальной стилизации. #ai #tools ⚡️ Читать статью

Стандартные ease и ease-in не всегда дают нужный эффект — движение получается слишком механическим или предсказуемым. Функция cubic-bezier() позволяет задать собственную кривую ускорения через четыре числа. С ней можно сделать анимацию с эффектом инерции, лёгкого залипания при наведении или упругого отскока. Разбираем, как работают координаты управляющих точек и где это применяется: в модалках, карточках, галереях. #css #animation ⚡️ Читать статью

Вывести значение CSS-переменной прямо на страницу — без JavaScript. Звучит как фантастика, но CSS это умеет: две строчки, работает во всех браузерах. Связка counter-reset + counter() + content превращает CSS-переменную в текст на экране. Для целых чисел — элементарно. Для дробных — обход через calc(), чтобы подсказать счётчику тип данных. А если в переменной хранятся градусы или пиксели? Тут помогает tan(atan2()) — трюк, который убирает единицу измерения из значения. В новом выпуске «CSS Боли» — путь от простого счётчика до анимированного кругового прогресс-бара. 👉🏻 Смотреть в VK

Видеофон на главной, всплывающий баннер с летающими курицами, кнопка, которая трясётся без причины — всё это раздражает пользователей и ломает UX. Собрали топ примеров плохой анимации: что тормозит загрузку, что отвлекает от контента, что вызывает дискомфорт и мешает доступности. И да, пришлось отключить адблок ради исследования. #css #a11y ⚡️ Читать статью