👩💻 Фокус на элементе без JavaScript
В линейных списках и панелях иногда нужно быстро подсветить активный объект, не городя лишнюю логику. Один из простых приёмов — слегка приглушить все элементы и оставить акцент только на том, с которым сейчас взаимодействует пользователь.
Как это устроено:
• контейнер отслеживает состояние через
• всем элементам задаётся пониженная
• активный элемент отменяет это правило для себя;
• лёгкий
Подход простой, но хорошо работает там, где важно быстро направить взгляд пользователя.
#JavaScript #CSS #UI
В линейных списках и панелях иногда нужно быстро подсветить активный объект, не городя лишнюю логику. Один из простых приёмов — слегка приглушить все элементы и оставить акцент только на том, с которым сейчас взаимодействует пользователь.
Как это устроено:
• контейнер отслеживает состояние через
:hover;• всем элементам задаётся пониженная
opacity;• активный элемент отменяет это правило для себя;
• лёгкий
transform добавляет ощущение глубины.Подход простой, но хорошо работает там, где важно быстро направить взгляд пользователя.
#JavaScript #CSS #UI
This media is not supported in your browser
VIEW IN TELEGRAM
Полезный open-source инструмент для UI: веб-компонент, который сам собирает skeleton-заглушки с shimmer-эффектом прямо на основе реального интерфейса.
Что удобно:
— не приходится вручную делать отдельные skeleton-компоненты
— лоадер строится по фактической структуре DOM
— можно гибко настраивать shimmer и внешний вид
— подходит для React, Vue, Svelte и других фреймворков
Хороший вариант, если хочется быстрее навести порядок в состоянии загрузки и не тратить время на дублирование разметки.
#frontend #ui #opensource
Что удобно:
— не приходится вручную делать отдельные skeleton-компоненты
— лоадер строится по фактической структуре DOM
— можно гибко настраивать shimmer и внешний вид
— подходит для React, Vue, Svelte и других фреймворков
Хороший вариант, если хочется быстрее навести порядок в состоянии загрузки и не тратить время на дублирование разметки.
#frontend #ui #opensource