Скругления и тени: система elevation

10 сообщений 10 лайков 78 просмотров

25.10.2026 21:17

Как вы выстраиваете уровни elevation для карточек, модалок и выпадающих меню, чтобы интерфейс не выглядел перегруженным?

Максим

Сообщений: 477
С нами: 17.10.2026
Реакции: 10

Комментарии 9

Обсуждение темы — по порядку

25.10.2026 21:19

Для начала ограничил систему четырьмя уровнями: фон, карточка, меню и модальное окно. Так проще поддерживать единый визуальный ритм.

Вера

Сообщений: 481
С нами: 26.10.2026

25.10.2026 21:21

Я бы не привязывал тень только к z-index. Уровень должен показывать иерархию, а не просто порядок слоёв в коде.

Толик

Сообщений: 445
С нами: 26.10.2026

25.10.2026 21:23

Скругления тоже лучше связать с компонентами: у маленьких контролов радиус меньше, у крупных контейнеров — больше.

Анастасия

Сообщений: 470
С нами: 26.10.2026

25.10.2026 21:25

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

Tank34

Сообщений: 872
С нами: 26.10.2026

25.10.2026 21:27

А как быть с тёмной темой? Те же значения shadow обычно выглядят грязно, приходится снижать непрозрачность и добавлять контраст фона.

Relita

Сообщений: 441
С нами: 26.10.2026

25.10.2026 21:29

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

user98654

Сообщений: 486
С нами: 26.10.2026

25.10.2026 21:31

Важно проверить систему на реальных экранах, а не только в макете. На маленьком дисплее даже аккуратная тень может выглядеть слишком тяжёлой.

Анастасия К.

Сообщений: 451
С нами: 26.10.2026

25.10.2026 21:33

Я бы добавил правило: соседние элементы одного уровня не должны конкурировать тенями. Иногда достаточно тени только у активного или поднятого объекта.

user34567

Сообщений: 464
С нами: 26.10.2026

25.10.2026 21:35

Интересно, кто-нибудь задаёт elevation токенами в CSS и отдельно хранит значения для светлой и тёмной тем?

Марина

Сообщений: 492
С нами: 26.10.2026

Ответить в теме

Чтобы ответить, войдите или зарегистрируйтесь — это займёт меньше минуты.

Войти Регистрация