This media is not supported in your browser
VIEW IN TELEGRAM
Что делает
Удобный приём для адаптивной сетки: можно задать колонке сразу минимальный и желаемый размер. Например, если для сайдбара указать
Это полезно, когда нужен гибкий интерфейс без развала вёрстки на узких экранах: блок остаётся читаемым и не «схлопывается». В разработке, как и в привычках, хорошо работают понятные границы — примерно об этом часто пишут в канале про психологию, мотивацию и дисциплину.
#CSS #Grid #Верстка
minmax() в CSS GridУдобный приём для адаптивной сетки: можно задать колонке сразу минимальный и желаемый размер. Например, если для сайдбара указать
minmax(14rem, 30%), он будет тянуться к 30% ширины родительского блока, но не сожмётся меньше 14rem.Это полезно, когда нужен гибкий интерфейс без развала вёрстки на узких экранах: блок остаётся читаемым и не «схлопывается». В разработке, как и в привычках, хорошо работают понятные границы — примерно об этом часто пишут в канале про психологию, мотивацию и дисциплину.
#CSS #Grid #Верстка
👩💻 Фокус на элементе без JavaScript
В линейных списках и панелях иногда нужно быстро подсветить активный объект, не городя лишнюю логику. Один из простых приёмов — слегка приглушить все элементы и оставить акцент только на том, с которым сейчас взаимодействует пользователь.
Как это устроено:
• контейнер отслеживает состояние через
• всем элементам задаётся пониженная
• активный элемент отменяет это правило для себя;
• лёгкий
Подход простой, но хорошо работает там, где важно быстро направить взгляд пользователя.
#JavaScript #CSS #UI
В линейных списках и панелях иногда нужно быстро подсветить активный объект, не городя лишнюю логику. Один из простых приёмов — слегка приглушить все элементы и оставить акцент только на том, с которым сейчас взаимодействует пользователь.
Как это устроено:
• контейнер отслеживает состояние через
:hover;• всем элементам задаётся пониженная
opacity;• активный элемент отменяет это правило для себя;
• лёгкий
transform добавляет ощущение глубины.Подход простой, но хорошо работает там, где важно быстро направить взгляд пользователя.
#JavaScript #CSS #UI