Fluent 2 Design - Elevation CSS

筆記一下 Microsoft Fluent 2 Design 裡面定義的 Elevation Shadow 樣式

淺色主題

/* Low Elevation Ramp */
.fluent-light-shadow-2 {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 1px 2px rgba(0, 0, 0, 0.14);
}
.fluent-light-shadow-4 {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 2px 4px rgba(0, 0, 0, 0.14);
}
.fluent-light-shadow-8 {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.14);
}
.fluent-light-shadow-16 {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.14), 0 8px 16px rgba(0, 0, 0, 0.14);
}

/* High Elevation Ramp */
.fluent-light-shadow-28 {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24), 0 0 8px rgba(0, 0, 0, 0.20);
}
.fluent-light-shadow-64 {
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.24), 0 0 8px rgba(0, 0, 0, 0.20);
}

深色主題

/* Low Elevation Ramp */
.fluent-dark-shadow-2 {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.14);
}
.fluent-dark-shadow-4 {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28), 0 2px 4px rgba(0, 0, 0, 0.14);
}
.fluent-dark-shadow-8 {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.28), 0 4px 8px rgba(0, 0, 0, 0.14);
}
.fluent-dark-shadow-16 {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.28), 0 8px 16px rgba(0, 0, 0, 0.14);
}

/* High Elevation Ramp */
.fluent-dark-shadow-28 {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28), 0 0 2px rgba(0, 0, 0, 0.20);
}
.fluent-dark-shadow-64 {
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.28), 0 0 2px rgba(0, 0, 0, 0.20);
}

效果展示

2

4

8

16

28

64

2

4

8

16

28

64