| 1 | ## Introduction
|
| 2 |
|
| 3 | The Material Design Lite (MDL) **shadow** is not a component in the same sense as an MDL card, menu, or textbox; it is a visual effect that can be assigned to a user interface element. The effect simulates a three-dimensional positioning of the element, as though it is slightly raised above the surface it rests upon — a positive *z-axis* value, in user interface terms. The shadow starts at the edges of the element and gradually fades outward, providing a realistic 3-D effect.
|
| 4 |
|
| 5 | Shadows are a convenient and intuitive means of distinguishing an element from its surroundings. A shadow can draw the user's eye to an object and emphasize the object's importance, uniqueness, or immediacy.
|
| 6 |
|
| 7 | Shadows are a well-established feature in user interfaces, and provide users with a visual clue to an object's intended use or value. Their design and use is an important factor in the overall user experience.
|
| 8 |
|
| 9 | ### To include an MDL **shadow** effect:
|
| 10 |
|
| 11 | 1. Code an element, such as a `<div>`, that is to receive the shadow effect; size and style it as desired, and add any required content.
|
| 12 | ```html
|
| 13 | <div>
|
| 14 | Some content
|
| 15 | </div>
|
| 16 | ```
|
| 17 | 2. Add an MDL shadow class to the element using the `class` attribute.
|
| 18 | ```html
|
| 19 | <div class="mdl-shadow--4dp">
|
| 20 | Some content
|
| 21 | </div>
|
| 22 | ```
|
| 23 |
|
| 24 | The shadowed component is ready for use.
|
| 25 |
|
| 26 | #### Examples
|
| 27 |
|
| 28 | A div with a user-specified class and a small shadow.
|
| 29 |
|
| 30 | ```html
|
| 31 | <div class="my-shadow-card mdl-shadow--2dp">Small shadow</div>
|
| 32 | ```
|
| 33 |
|
| 34 | A div with a user-specified class and a medium-large shadow.
|
| 35 |
|
| 36 | ```html
|
| 37 | <div class="my-shadow-card mdl-shadow--6dp">Medium-large shadow</div>
|
| 38 | ```
|
| 39 |
|
| 40 | ## Configuration options
|
| 41 |
|
| 42 | The MDL CSS classes apply various predefined visual shadows to the element. The table below lists the available classes and their effects.
|
| 43 |
|
| 44 | | MDL class | Effect | Remarks |
|
| 45 | |-----------|--------|---------|
|
| 46 | | `mdl-shadow--2dp` | Assigns a small shadow to the object | Optional; if omitted, no shadow is present |
|
| 47 | | `mdl-shadow--3dp` | Assigns a medium-small shadow to the object | Optional; if omitted, no shadow is present |
|
| 48 | | `mdl-shadow--4dp` | Assigns a medium shadow to the object | Optional; if omitted, no shadow is present |
|
| 49 | | `mdl-shadow--6dp` | Assigns a medium-large shadow to the object | Optional; if omitted, no shadow is present |
|
| 50 | | `mdl-shadow--8dp` | Assigns a large shadow to the object | Optional; if omitted, no shadow is present |
|
| 51 | | `mdl-shadow--16dp` | Assigns an extra-large shadow to the object | Optional; if omitted, no shadow is present|
|