После анонса Liquid Glass от Apple фронтендеры бросились реализовывать эффект — и у кого-то получился полупрозрачный бублик на Three.js. А ещё в этом месяце: 3D-сапёр с backdrop-filter: blur, электрическая рамка и неоморфизм.

В подборке — демки, которые можно сразу открыть и разобрать по шагам. А для тех, кого замучили «отрицательные углы» (negative border radius), есть решение — библиотека nebo.css. #css #js

🎁 Читать статью

Почему одни джуны уходят через полгода, а другие вырастают в сильных разработчиков?

Василий Вишняков из Bquadro рассказывает, как в студии выстроена адаптация новичков и почему компания сознательно нанимает людей без опыта.

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

Сегодня — последний день «Акции-конструктор».

За выходные мы узнали много нового о ваших переговорных навыках. Курс за 500 ₽? Видели. Три профессии по цене половины? Тоже было. Но мы не сдаёмся.

🎁 Скидка на курсы, две профессии вместе, бонус к обучению — напишите свои условия. Обсуждаем до полуночи.

Обсудить условия →

Видеофон на главной, всплывающий баннер с летающими курицами, кнопка, которая трясётся без причины — всё это раздражает пользователей и ломает UX.

Собрали топ примеров плохой анимации: что тормозит загрузку, что отвлекает от контента, что вызывает дискомфорт и мешает доступности. И да, пришлось отключить адблок ради исследования. #css #a11y

🎁 Читать статью

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

В новом выпуске «CSS Боли» — путь от простого счётчика до анимированного кругового прогресс-бара. Попробуйте в демке самостоятельно и смотрите разбор целиком.

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

Стандартные ease и ease-in не всегда дают нужный эффект — движение получается слишком механическим или предсказуемым.

Функция cubic-bezier() позволяет задать собственную кривую ускорения через четыре числа. С ней можно сделать анимацию с эффектом инерции, лёгкого залипания при наведении или упругого отскока.

Разбираем, как работают координаты управляющих точек и где это применяется: в модалках, карточках, галереях. #css #animation

🎁 Читать статью

Qwen Code — AI-агент для VS Code, который генерирует готовый код прямо в терминале.

Создание даже простой портфолио-страницы обычно занимает часы: разметка, стили, адаптивность, тёмный режим.

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

🎁 Читать статью

Мы учим писать код, а не полагаться на удачу. Но сегодня — исключение.

С 6 по 8 февраля ко Дню науки разыгрываем скидки с помощью удачи.

Как участвовать:

1️⃣ Отправьте в комментарии эмодзи 🎰 — Телеграм сам прокрутит барабан.
2️⃣ Скопируйте ссылку на сообщение с результатом.
3️⃣ Отправьте ссылку нашему менеджеру.

Что выпадет:

🎁 Три семёрки (777) — скидка 40% на любую профессию или курс и второй курс в подарок.
🎁 Два одинаковых символа — скидка 30% на любую профессию или курс.
🎁 Все разные — скидка 20% на любую профессию или курс.

Да, проигравших нет. Да, мы в курсе, что это не совсем научный подход. Но давайте попробуем.

ИИ-агенты в разработке: костыль или суперсила?

Василий Вишняков, основатель Bquadro, разрешает разработчикам использовать ИИ-агентов в работе. Но с одним условием.

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

clip-path и CSS-маски не меняют форму блока — они её имитируют. Рамка, тень, outline не знают о вырезах и работают как с обычным прямоугольником.

Свойство border-shape работает по-другому. Как border-radius научил рамки скругляться, так border-shape + функция shape() учат их принимать произвольную форму. Рамки повторяют контур, box-shadow и outline тоже.

В спецификации CSS Borders Level 4 уже есть черновик, а в Chrome Canary — первые работающие прототипы. Пока ждём поддержку в браузерах, самое время разобраться с функцией shape().

В новом выпуске «CSS Боли» — как мы дошли от border-radius до произвольных форм и почему маски оказались тупиком для рамок и теней.

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

text-align: justify делает текст аккуратным на первый взгляд, но может создать «реки» из пробелов и ухудшить читаемость.

В статье разбираем CSS-свойство text-align и его значения: left, right, center, justify. Отдельно рассматриваем start и end — они работают корректно при любом направлении текста, в отличие от привычных left и right. После теории закрепляем всё на практике в тренажёре. #css #webdev

🎁 Читать статью

CSS scroll-driven animations

Разбираем, как с помощью одного CSS-свойства сделать временную шкалу прокрутки.

Демонстрации:
🎁 Прогрессбар со scroll-анимацией
🎁 Абсолютное позиционирование

Полный выпуск:
🐭 Смотреть на YouTube
🐹 Смотреть в VK