Elevation ​
In the realm of design, elevation signifies the vertical distance between two surfaces along the z-axis—a fundamental concept for creating visually compelling user interfaces.
Campus Elevation System ​
The campus elevation system simplifies the vertical hierarchy, focusing on a select number of levels. This deliberate limitation streamlines the design process and ensures consistency across projects.
Visualizing Elevation ​
Effectively depicting elevation involves employing various visual cues, such as shadows, tonal differences, and scrims, to make it tangible.
To successfully convey elevation, a surface should exhibit:
- Distinct Surface Edges: Emphasizing surface edges creates a clear contrast with the surroundings.
- Overlap with Other Surfaces: Showcasing the overlap with neighboring surfaces, whether stationary or in motion, conveys a realistic sense of depth.
- Distance from Other Surfaces: Communicating spatial relationships by indicating the distance between surfaces is key.
Methods for Indicating Edges ​
Highlighting surface edges can be achieved through three primary methods:
- Drop Shadows: Applying the appropriate
elevation-{layer}classes gives surfaces a subtle drop shadow, providing a visual anchor. - Tonal Differences: Utilizing
surface-container-{layer}classes introduces tonal variations, enhancing the distinction between surfaces. - Scrims: Placing a scrim behind a surface adds an additional layer of depth and separation.
As exploration into the intricacies of elevation unfolds, experimentation with these techniques will enhance the ability to craft engaging and visually cohesive user interfaces.
Adding elevation ​
Use the elevation-{layer} utilities to apply different sized outer box shadows to an element.
| Class Name | Css Equivalent |
|---|---|
| [class*=elevation-] | box-shadow: var(--elevation-box-shadow, 0 0 0 0 #000); |
| elevation-0 | --elevation-box-shadow: var(--cds-sys-elevation-level-0);/* 0px 0px 0px 0px rgba(var(--c-shadow-color, 0, 0, 0), 0.3), |
| elevation-1 | --elevation-box-shadow: var(--cds-sys-elevation-level-1); /* 0px 1px 2px 0px rgba(var(--cds-sys-elevation-shadow-color, 0, 0, 0), 0.3), |
| elevation-2 | --elevation-box-shadow: var(--cds-sys-elevation-level-2); /* 0px 1px 2px 0px rgba(var(--cds-sys-elevation-shadow-color, 0, 0, 0), 0.3), |
| elevation-3 | --elevation-box-shadow: var(--cds-sys-elevation-level-3); /* 0px 1px 3px 0px rgba(var(--cds-sys-elevation-shadow-color, 0, 0, 0), 0.3), |
| elevation-4 | --elevation-box-shadow: var(--cds-sys-elevation-level-4); /* 2px 3px 0px rgba(var(--cds-sys-elevation-shadow-color, 0, 0, 0), 0.3), |
| elevation-5 | --elevation-box-shadow: var(--cds-sys-elevation-level-5); /* 0px 4px 4px 0px rgba(var(--cds-sys-elevation-shadow-color, 0, 0, 0), 0.3), |
Adding tonal differences ​
Use the surface-container-{layer} utilities to apply different tonal backgrounds to an element.
| Class Name | Css Equivalent |
|---|---|
| surface-container-highest | background-color: rgba(var(--cds-sys-color-surface-container-highest), var(--cds-sys-background-opacity);; color: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-text-opacity); |
| surface-container-high | background-color: rgba(var(--cds-sys-color-surface-container-high), var(--cds-sys-background-opacity);; color: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-text-opacity); |
| surface-container | background-color: rgba(var(--cds-sys-color-surface-container), var(--cds-sys-background-opacity);; color: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-text-opacity); |
| surface-container-low | background-color: rgba(var(--cds-sys-color-surface-container-low), var(--cds-sys-background-opacity);; color: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-text-opacity); |
| surface-container-lowest | background-color: rgba(var(--cds-sys-color-surface-container-lowest), var(--cds-sys-background-opacity);; color: rgba(var(--cds-sys-color-on-surface), var(--cds-sys-text-opacity); |
<div class="[...] surface-container-high"></div>
<div class="[...] surface-container"></div>
<div class="[...] surface-container-lowest"></div>Adding a scrim ​
<div class="[...]">beneath scrim</div>
<div class="[...] absolute index-scrim scrim bg-opacity-glass backdrop-filter backdrop-blur-2xs"></div>
<div class=="[...] absolute index-overlay"> above scrim</div>