Плавность как фича: сравниваем фреймворки по анимации UI на реальных кейсах

Разбираются четыре фреймворка для UI-анимаций — CSS, Framer Motion, GSAP и Motion One — на живых примерах. Где плавнее, где гибче, а где просто быстрее — всё на коде

Cards with inverted border-radius

Карточки товаров с интересным решением для кнопки

BEM vs Atomic CSS или картинка по номерам

Собрал в кучу все методологии CSS, которые сам знаю и использую. Разбираюсь, что всё ещё актуально, а что уже пора забыть. Даже немного сравниваю — вдруг пригодится

Signature animation

Поле для ввода подписи с интересной анимацией

❓ Зачем нужен атрибут tabindex в HTML и когда его использовать?

Атрибут tabindex управляет порядком фокусировки элементов при навигации с клавиатуры (по клавише Tab). Это полезно для улучшения доступности и управления UX при взаимодействии без мыши.

✅ Пример:

<button tabindex="2">Второй</button>
<button tabindex="1">Первый</button>
<button tabindex="3">Третий</button>

📌 При нажатии Tab фокус перейдёт сначала на "Первый", потом на "Второй", затем на "Третий" — несмотря на порядок в разметке.

tabindex удобно использовать для настройки логичной и удобной навигации по элементам на странице, особенно в формах, модальных окнах и пользовательских интерфейсах с кастомными компонентами.

Underwater Background #2

Анимированный фон страницы

Как использовать любой CSS-фреймворк в вашем проекте. Часть 4

В четвертой части мы рассматриваем процесс кастомизации кнопки Primary в Bootstrap с точки зрения построения дизайн-системы. Пошагово описаны уровни кастомизации, а также способы внесения изменений через переменные и стили для сохранения чистой архитектуры.

Text Illumination

Сцена с анимированным появлением текста

AI Rork + Figma: как ускорить прототипирование и исследование без компромиссов

Покажу, как с помощью Figma и Rork почти мгновенно делать кликабельные прототипы — идеально для быстрых юзер-тестов и не только. Минимум мороки, максимум пользы

CSS scroll-driven scroll-snapping animations

Страница с различными вариациями анимированного скролла