Тени

Стили теней
Уровень Z 1
Уровень Z 2
Уровень Z 3
Уровень Z 4

Стили теней

На qiwi.com существует 4 уровня теней: Z 1, Z 2, Z 3 и Z 4. Чем больше номер уровня, тем выше в пространстве расположен слой и тем больше по размеру и густоте падающая от него тень.

Случаи использования

Уровень Z 1Интерфейсные блоки
Уровень Z 2Малые подсказки, сендбары, карточки (hover)
Уровень Z 3Большие подсказки
Уровень Z 4Выпадающие меню и списки,
модальные окна

Каждый уровень тени включает в себя 2 стиля:
— для блоков со скруглениями;
— для блоков без скруглений, например, шапки.

 Уровень Z 1

ПараметрБлок (offset)Блок (no offset)
Opacity12%12%
Blur, px22
Offset Y, px11

Уровень Z 2

ПараметрБлок (offset)Блок (no offset)
Opacity12%12%
Blur, px1616
Offset Y, px80

Уровень Z 3

ПараметрБлок (offset)Блок (no offset)
Opacity16%16%
Blur, px3232
Offset Y, px160
Spread, px40

Уровень Z 4

ПараметрыБлок (offset)Блок (no offset)
Opacity16%16%
Blur, px6464
Offset Y, px200
Spread, px80

Далее «Фильтры»