Реалістичні тіні карток без надмірного blur

Багато пласких інтерфейсів виглядають слабо, бо тіні або занадто сильні, або занадто розмиті. Реалістична тінь картки зазвичай складається з кількох делікатних шарів.

Типова помилка

Одна велика тінь з високим blur створює туман навколо елемента. Це знижує контраст і робить макет візуально «ватним».

Кращий підхід

Використовуйте 2-3 тіні з різною дистанцією й непрозорістю:

• Щільна базова тінь для контакту
• Середня тінь для глибини
• М'яка ambient-тінь для атмосфери

Тіні з урахуванням кольору

Чисто чорна тінь рідко є ідеальною. Злегка тоновуйте тінь під відтінок фону для природнішого результату.

Стан взаємодії

На hover змінюйте вертикальний зсув і opacity, а не лише blur. Картка має виглядати піднятою, а не сяючою.

Стандарт для команди

Визначте shadow-токени для:

• Surface 1
• Surface 2
• Floating action
• Modal