D
D
dom1n1k2017-09-06 17:34:23
User interface
dom1n1k, 2017-09-06 17:34:23

How are shadow parameters set in Material Design?

The documentation describes the principle well and in detail - about the thickness of materials, about the elevation of all interface elements, about two light sources, and that's it.
But it is completely unclear what exactly these shadows should be in terms of graphic editors or the same CSS - what are the offset and blur radius?
This section of the guidelines strongly resembles a song - "everything is clear, but what exactly did you mean ?!"

Answer the question

In order to leave comments, you need to log in

2 answer(s)
N
Nekto_TM, 2017-09-06
@dom1n1k

So in the same place in the guide it is described in detail, just for different graphics packages. For example, here is a section on shadows in a chandelier:
https://material.io/guidelines/resources/shadows.h...
and even templates give you a download

I
Ilya Dzensky, 2017-09-07
@idzenski

Catch the answer, I tried :)
1dp
box-shadow: 0 0 2px 0 rgba(0,0,0,0.14), 0 2px 2px 0 rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0, 0.0.0.20);
2dp
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14), 0 3px 4px 0 rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);
4dp
box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.20);
6dp
box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px 0 rgba(0,0,0,0.20);
8dp
box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 3px rgba(0,0,0,0.12), 0 4px 5px 0 rgba(0,0,0,0.20);
16dp
box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px 0 rgba(0,0,0,0.20);
For graphics packages, download Kit and take shadows from there.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question