Как правильно показывать тени
Речь идёт о появлении тени при наведении курсора.
В реальности чем ближе объект к поверхности, на которую он отбрасывает тень, тем тень четче.
В большинстве случаев появление тени в веб интерфейсах у объекта при наведении курсора происходит путем проявления тени: она появляется через прозрачность. С реальностью это имеет мало общего. Но мы же любим заморочиться 😁
На самом деле, тень у объекта есть всегда. Просто она меняется в зависимости от удаленности объекта от поверхности. И это не сложно реализуется в вебе.
На видео ниже показано появление тени. Слева — как обычно делают. Справа — если заморочиться. Сделано специально медленно, чтобы нагляднее продемонстрировать разницу.
Код CSS объекта с простой тенью (слева):
Код CSS объекта с правильной тенью (справа):
Разница всего лишь в одной строке, которая описывает тень у объекта до наведения курсора:
Если тень описана до наведения курсора, то переход будет уже не из ничего в определенное состояние (через прозрачность), а из одного состояния в другое (через изменение параметров тени).
Вариант с правильной тенью можно потыкать самостоятельно:
На пользовательский опыт это не влияет ровным счетом никак, никто не будет обращать внимание на такие детали. Но при прочих равных, в мелочах всегда хочется быть лучшим.