Changeset View
Changeset View
Standalone View
Standalone View
source/style/elevation.rst
| 1 | Elevation and Shadows | 1 | Depth, Elevation and Shadows | ||
|---|---|---|---|---|---|
| 2 | ===================== | 2 | ============================ | ||
| 3 | 3 | | |||
| 4 | Shadows should be horizontally-centered, but vertically offset, to | 4 | Athough in recent years "flat" design has taken over the mobile market, KDE has continued to use shadows as a means to provide depth and elevation to elements on the screen. | ||
| 5 | provide the illusion that a light source is over the top of the screen. | 5 | | ||
| 6 | The default shadow color should be Shade Black (see :doc:`Breeze Colors <color>`) | 6 | KDE realizes that elevation and depth perception are intrinsic parts of working with computer and mobile interfaces. As you create applications, please be sure to use shadows in the style detailed below. | ||
ngraham: "is an intrinsic part" -> "are intrinsic parts" (subject-verb agreement) | |||||
| 7 | with 35% opacity. The default size for window shadows is 64px. Menu & | 7 | | ||
| 8 | tooltip shadows are 16px: | 8 | Shadows should be horizontally-centered, but vertically offset, to provide the illusion that a light source is over the top of the screen. This would, in general, follow your eye position relative to the screen you are working on. | ||
| 9 | | ||||
| 10 | The default shadow details should be: | ||||
| 11 | | ||||
| 12 | - Shadow color: Shade Black (see :doc:`Breeze Colors <color>`) | ||||
| 13 | - Shadow opacity: 35% | ||||
| 14 | - Window shadow size: 64px | ||||
| 15 | - Menu & tooltip shadows size: 16px | ||||
ngraham: "remained using shadows" -> "continued to use shadows" or "retained shadows" | |||||
| 9 | 16 | | |||
@zzag could you provide a new screenshot for this as well as accurate values? I wrote this section for the previous new shadows, not the current new shadows. :) So some of the values and the image are out of date now. ngraham: @zzag could you provide a new screenshot for this as well as accurate values? I wrote this… | |||||
fabianr: Let's change that in a new patch. Otherwise this patch will never finish :) | |||||
ngraham: OK, fair enough! :) | |||||
| 10 | .. image:: /img/Shadows_with_background.png | 17 | .. image:: /img/Shadows_with_background.png | ||
| 11 | :alt: Example for a shadows of window and menu | 18 | :alt: Example for a shadows of window and menu | ||
| 12 | 19 | | |||
| 13 | Shadows inside apps should use a size of 16px or below, so as not to | 20 | REMINDER: Shadows inside apps should use a size of 16px or below, so as not to | ||
| 14 | compete with the window shadows. | 21 | compete with the window shadows. | ||
"is an intrinsic part" -> "are intrinsic parts" (subject-verb agreement)