Как правильно показывать тени

Речь идёт о появлении тени при наведении курсора.

В реальности чем ближе объект к поверхности, на которую он отбрасывает тень, тем тень четче.

В большинстве случаев появление тени в веб интерфейсах у объекта при наведении курсора происходит путем проявления тени: она появляется через прозрачность. С реальностью это имеет мало общего. Но мы же любим заморочиться 😁

На самом деле, тень у объекта есть всегда. Просто она меняется в зависимости от удаленности объекта от поверхности. И это не сложно реализуется в вебе.

На видео ниже показано появление тени. Слева — как обычно делают. Справа — если заморочиться. Сделано специально медленно, чтобы нагляднее продемонстрировать разницу.

Код CSS объекта с простой тенью (слева):

Код CSS объекта с правильной тенью (справа):

Разница всего лишь в одной строке, которая описывает тень у объекта до наведения курсора:

Если тень описана до наведения курсора, то переход будет уже не из ничего в определенное состояние (через прозрачность), а из одного состояния в другое (через изменение параметров тени).

Вариант с правильной тенью можно потыкать самостоятельно:

https://flyphant.com/download/true-shadow.html

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