❓ Зачем нужен атрибут 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

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

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

Атрибут contenteditable позволяет сделать любой HTML-элемент редактируемым прямо на странице. Это полезно для создания текстовых редакторов, заметок или интерфейсов без использования дополнительных полей ввода.

✅ Пример:

<div contenteditable="true">Нажми сюда и начни редактировать текст</div>

📌 В этом примере пользователь сможет кликнуть на блок и изменить его содержимое прямо в браузере.

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

Jumping Coin Preloader

Анимированная загрузка в виде прыгающей монетки

Всё, что вы хотели знать, но стеснялись спросить о кастомных курсорах в CSS

В статье объясняют, как сделать крутые кастомные курсоры с помощью CSS и немного JavaScript, не угробив удобство и не забыв про доступность для всех пользователей

Scroll Trigger Image Zoom

Страница с эффектом зума при скролле