Shadow css material design: Elevation & shadows — Material Design

Возвышение и тени — Material Design

В физическом мире объекты могут складываться или прикрепляться друг к другу, но не могут проходить друг через друга. Объекты также отбрасывают тени и отражают свет.

Material Design отражает эти качества для формирования пространственной модели, которая знакома пользователям и может последовательно применяться во всех приложениях.

Высота

Высота элемента, измеренная от передней части одной поверхности до передней части другой, указывает расстояние между поверхностями и глубину его тени.

Отметка покоя

Все материальные элементы имеют отметки покоя. Хотя компоненты имеют одинаковые отметки покоя в разных приложениях, они могут иметь разные отметки покоя на разных платформах и устройствах.

Динамические смещения высоты

Динамические смещения высоты — это целевая высота, к которой движется компонент относительно его состояния покоя.

Высота над уровнем моря (Android) Развернуть и свернуть содержимоеСтрелка, указывающая вниз при сворачивании и вверх при раскрытии.

Высота — это относительная глубина или расстояние между двумя поверхностями по оси Z.

Технические характеристики:

• Высота измеряется в тех же единицах, что и оси X и Y, обычно в пикселях, не зависящих от плотности (dp). Поскольку элементы материала имеют глубину (все материалы имеют толщину 1 dp), высота измеряется расстоянием от вершины одной поверхности до вершины другой.
• Высота дочернего объекта относительно высоты родительского объекта.

Показанные изображения и значения относятся к приложениям Android.

Несколько измерений высоты для двух объектов

Все материальные объекты, независимо от размера, имеют отметку покоя или отметку по умолчанию, которая не изменяется. Если объект меняет высоту, он должен как можно скорее вернуться к исходной высоте.

Высота рабочего стола в состоянии покоя на 2 dp ниже указанных значений для обеспечения работы с мышью и без сенсорного экрана.

Высота компонентов:

• Компоненты поддерживают согласованные отметки покоя во всех приложениях.
  Например, высота плавающей кнопки действия не меняется от одного приложения к другому.
• Компоненты могут иметь разную высоту покоя на разных платформах и устройствах в зависимости от глубины среды. Например, телевизор имеет большую глубину, чем настольный компьютер, поскольку он имеет больший экран и просматривается с большего расстояния. Точно так же и телевизор, и настольный компьютер имеют большую глубину, чем мобильный.

Адаптивная отметка и динамическое смещение высоты

Некоторые типы компонентов имеют адаптивную отметку, то есть они изменяют отметку в ответ на действия пользователя (например, нормальный, сфокусированный и нажатый) или системные события. Эти изменения высоты последовательно реализуются с использованием динамических смещений высоты .

Динамические смещения высоты — это целевая высота, к которой движется компонент, относительно состояния покоя компонента. Они гарантируют согласованность изменений высоты для действий и типов компонентов. Например, все компоненты, которые поднимаются при нажатии, имеют одинаковое изменение высоты относительно их высоты в состоянии покоя.

После завершения или отмены входного события компонент вернется к исходной отметке.

Предотвращение пересечения отметок

Компоненты с адаптивными отметками могут столкнуться с другими компонентами при перемещении между их отметками покоя и динамическими смещениями отметок. Поскольку материал не может проходить сквозь другой материал, компоненты избегают взаимодействия друг с другом любым количеством способов, будь то для каждого компонента или с использованием всего макета приложения.

На уровне компонентов компоненты можно перемещать или удалять до того, как они вызовут помехи. Например, плавающая кнопка действия (FAB) может исчезнуть или переместиться за пределы экрана до того, как пользователь возьмет карточку, или она может переместиться, если появится закусочная.

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

Elevation (dp)	Component
24	Dialog Picker
16	Nav drawer Right drawer Modal bottom Sheet
12	Плавающая кнопка действия (FAB — нажата)
9	3
8	Нижняя навигационная полоса Меню Карта (при подъеме) . Высота отдыха) Snackbar
4	APP BAR
3	Индикатор Refresh 9003	. Повторный индикатор 9003	.0002 Панель быстрого ввода/поиска (состояние прокрутки)
2	Карточка (отметка в состоянии покоя) * Поднятая кнопка (отметка в состоянии покоя)* Панель быстрого ввода/поиска (00003 9093 высота)
1	Переключатель

На следующей диаграмме сравниваются отметки покоя компонентов и динамические смещения отметок.

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

Пример макета приложения с карточками и плавающей кнопкой действия, а также диаграмма поперечного сечения высот компонентов по оси Z

Пример макета приложения с открытым навигационным ящиком, а также диаграмма поперечного сечения высот его компонентов по оси Z.

Тени Развернуть и свернуть содержимоеСтрелка, указывающая вниз при сворачивании и вверх при раскрытии.

Тени дают важные визуальные подсказки о глубине объектов и направленном движении. Они являются единственным визуальным сигналом, указывающим на величину разделения между поверхностями. Высота объекта определяет внешний вид его тени.

Не надо.

Без тени ничто не указывает на то, что плавающая кнопка действия отделена от фоновых поверхностей.

Не надо.

Четкие тени указывают на то, что плавающая кнопка действия и синий лист являются отдельными элементами. Однако их тени настолько похожи, что можно предположить, что они оба находятся на одной высоте.

Делать.

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

В движении тени дают полезные подсказки о направлении движения объекта и о том, увеличивается или уменьшается расстояние между поверхностями.

Не надо.

Без тени, указывающей высоту, неясно, увеличивается ли этот квадрат в размере или увеличивается его высота.

Делать.

Тень становится мягче и больше по мере увеличения высоты объекта и становится четче и меньше по мере уменьшения высоты.

Делать.

В этом случае последовательная тень помогает пользователю понять, что объект меняет форму, а не высоту.

В качестве канонических ссылок следует использовать следующие тени компонентов. Если есть какие-либо различия между следующими эталонными тенями и тенями компонентов, найденными где-либо еще в этой спецификации, обратитесь к этим эталонным теням.

Панель приложений

4dp

Пример панели приложений

Поднятая кнопка
Состояние покоя: 2dp
Состояние нажатия: 8dp

Только для рабочего стола поднятые кнопки могут иметь высоту:
Состояние покоя: 0dp
Нажатое состояние: 2dp

3 90 кнопки для получения дополнительной информации

Плавающая кнопка действия (FAB)

Состояние покоя: 6 dp

Нажатое состояние: 12 dp

Карточка

Состояние покоя: 2dp

Поднятое состояние: 8dp

Только для Рабочий стол, см. Блоки содержимого.

Меню и подменю

Меню: 8 dp

Подменю: 9 dp (+1 dp для каждого подменю)

Диалоги

24dp

Навигационный ящик и правый ящик

16dp

Нижний лист из модала

16dp

Индикатор обновления

3 дп

Панель быстрого ввода/поиска

Состояние покоя: 2dp

Состояние прокрутки: 3dp

Закусочная

6 дп

Переключатель

1 дп

Объектные отношения Развернуть и свернуть содержимоеСтрелка, указывающая вниз при сворачивании и вверх при раскрытии.

То, как вы организуете объекты или наборы объектов в приложении, определяет, как они перемещаются по отношению друг к другу. Объекты могут перемещаться независимо друг от друга или ограничиваться объектами, расположенными выше в иерархии.

Все объекты являются частью иерархии, описанной в терминах отношений родитель-потомок. «Дочерний элемент» в каждом из этих отношений относится к элементу, который является подчиненным по отношению к его «родительскому» элементу. Объекты могут быть потомками системы или другого объекта.

Особенности родительского и дочернего элементов:

• Каждый объект имеет одного родителя
• Каждый объект может иметь любое количество дочерних элементов
• Дочерние элементы наследуют трансформирующие свойства от своего родителя, такие как положение, вращение, масштаб и высота
• Братья и сестры — это объекты на одном уровне иерархии

Исключения

Элементы, являющиеся родительскими для корня, такие как первичные элементы пользовательского интерфейса, перемещаются независимо от других объектов. Например, плавающая кнопка действия не прокручивается вместе с содержимым. К другим элементам относятся:

• Боковая панель навигации приложения
• Панель действий
• Диалоги

Взаимодействие

То, как объекты взаимодействуют друг с другом, определяется их местом в иерархии родитель-потомок.

Например:

• Дети имеют минимальное расстояние по оси Z от своего родителя; другие объекты не вставляются между родителями и детьми
• В коллекции прокручиваемых карточек карты являются родственными друг другу, поэтому все они перемещаются вместе в тандеме. Они являются дочерними элементами объекта коллекции карт, который управляет их перемещением.

Высота

То, как вы определяете высоту объектов — их положение в z-пространстве — зависит от иерархии содержимого, которую вы хотите выразить, и от того, должен ли объект перемещаться независимо от других объектов.

При прокрутке родительского листа поднятая кнопка (его дочерний элемент) прокручивается за пределы экрана вместе с ним.

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

Тени Bootstrap / Тени Material Design

Тени

Примечание: Эта документация предназначена для более старой версии Bootstrap (v.4). А для Bootstrap 5 доступна более новая версия. Мы рекомендуем перейти на последнюю версию нашего продукта — Material Design для Начальная загрузка 5.

Перейти к документации v.5

Тень Bootstrap — это эффект, используемый в веб-элементах, который обеспечивает важные визуальные подсказки о глубине объектов и направленное движение.

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

Создавать тени с помощью MDB очень просто. Вам нужно всего лишь добавить один из теневых классов к выбранному элементу.

---

Примеры

Добавьте один из следующих классов к любому элементу HTML, чтобы добиться желаемой глубины тени

.z-глубина-1

.z-глубина-1-половина

.z-глубина-2

.z-глубина-3

.z-глубина-4

.z-глубина-5

Показать код Изменить в песочнице

            
        <дел>
            .z-глубина-5
        

            
        <дел>
            наведи меня!