Fancy Glowing Button

Крутая кнопка с RGB подсветкой и эффектом при наведении

❓ Что делает event.target в JavaScript и когда его использовать?

Свойство event.target возвращает элемент, на котором произошло событие. Это полезно, когда нужно определить, какой конкретно вложенный элемент вызвал событие внутри общего обработчика.

✅ Пример:

<ul onclick="console.log(event.target.textContent)"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>

📌 При клике на любой <li> в консоль выведется текст именно этого элемента.

event.target удобно использовать при делегировании событий — когда один обработчик навешивается на родителя и обрабатывает клики сразу на все вложенные элементы. Это упрощает код и повышает его гибкость.

Neumorphic Rocker Switch

Анимированный переключатель в стиле неоморфизм

Плавность как фича: сравниваем фреймворки по анимации 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 с точки зрения построения дизайн-системы. Пошагово описаны уровни кастомизации, а также способы внесения изменений через переменные и стили для сохранения чистой архитектуры.