Material

Material's Container

The material is built out of multiple shapes (bottom to top):

Umbra / Spot shadow
Penumbra shadow (web kit only)
Ambient shadow
Clear filter (when the card is translucent)
Surface
Outline

Together all the shapes form the material. The complete settings for each shape are written below.

1. Umbra / Spot Shadow

SHAPE:

square/rectangle/circle/oval
Width = custom
Height = custom
Corner Radius = custom
Rotation = None

PAINT:

Style = Fill
Color = #00FFFFFF
Filter = Normal

FX:

Mask = None
Texture = None
Shadow = Outer
Blur = based on elevation
Direction = 270
Distance = based on elevation
Color = based on elevation

POSITION:

Anchor = Center
LPadding = custom
RPadding = custom
TPadding = custom
BPadding = custom

2. Penumbra Shadow (web kit only)

SHAPE:

Shape = same as before
Width = same as before
Height = same as before
Corner Radius = same as before
Rotation = same as before

PAINT:

Style = Fill
Color = #00FFFFFF
Filter = Normal

FX:

Mask = None
Texture = None
Shadow = Outer
Blur = based on elevation
Direction = 270
Distance = based on elevation
Color = based on elevation

POSITION:

Anchor = Center
LPadding = same as before
RPadding = same as before
TPadding = same as before
BPadding = same as before

3. Ambient Shadow

SHAPE:

Shape = same as before
Width = same as before
Height = same as before
Corner Radius = same as before
Rotation = same as before

PAINT:

Style = Fill
Color = #00FFFFFF
Filter = Normal

FX:

Mask = None
Texture = None
Shadow = Outer
Blur = based on elevation
Direction = 270
Distance = based on elevation
Color = based on elevation

POSITION:

Anchor = Center
LPadding = same as before
RPadding = same as before
TPadding = same as before
BPadding = same as before

4. Clear

For when the material is translucent. Don't use the clear filter, if the card is on a custom background in an overlap group!

SHAPE:

Shape = same as before
Width = same as before
Height = same as before
Corner Radius = same as before
Rotation = same as before

PAINT:

Style = Fill
Color = default white
Filter = Clear

FX:

Mask = None
Texture = None
Shadow = None

POSITION:

Anchor = Center
LPadding = same as before
RPadding = same as before
TPadding = same as before
BPadding = same as before

5. Surface

SHAPE:

Shape = same as before
Width = same as before
Height = same as before
Corner Radius = same as before
Rotation = same as before

PAINT:

Style = Fill
Color = based on elevation
Filter = Normal

FX:

Mask = None
Texture = None
Shadow = None

POSITION:

Anchor = Center
LPadding = same as before
RPadding = same as before
TPadding = same as before
BPadding = same as before

6. Outline

SHAPE:

Shape = same as before
Width = same as before -2
Height = same as before -2
Corner Radius = formula:

$gv(corners)*(mu(min, gv(width), gv(height))-2)/mu(min, gv(width), gv(height))$

Rotation = same as before

PAINT:

Style = Stroke
Color = based on elevation
Stroke = 2
Filter = Normal

FX:

Mask = None
Texture = None
Shadow = None

POSITION:

Anchor = Center
LPadding = same as before
RPadding = same as before
TPadding = same as before
BPadding = same as before