Как задаются параметры тени в Material Design?

Question

[dom1n1k]

В документации хорошо и подробно описан принцип - про толщину материалов, про возвышения всех элементов интерфейса, про два источника света и вот это всё.
Но совершенно непонятно, какими именно должны быть эти тени в терминах графических редакторов или того же CSS - каковы смещение и радиус размытия?
Этот раздел гайдлайнов сильно напоминает песню - "всё понятно, но шо конкретно ты имела в виду?!"

Answer 1

[Nekto_TM]

Дык там же в гайде подробно описано, как раз для разных графпакетов. Вот например раздел о тенях в люстре:
https://material.io/guidelines/resources/shadows.h...

и даже шаблончики дают скачать

Comments

[dom1n1k]

Странно, но я умудрился упустить этот раздел из виду, хотя сайт этот конечно же знал и изучал.

[Nekto_TM]

dom1n1k, ну гугл как всегда много чего меняет и добавляет постоянно.

поэтому на гайды можно подзабить уже. Но предварительно изучить, конечно же, и сделать по-своему.

Answer 2

[Илья Дзенски]

Ловите ответ, я старался :)

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);

Для графических пакетов качаем Kit и берем оттуда тени.