Как правильно показывать тени
Речь идёт о появлении тени при наведении курсора.
В реальности чем ближе объект к поверхности, на которую он отбрасывает тень, тем тень четче.
В большинстве случаев появление тени в веб интерфейсах у объекта при наведении курсора происходит путем проявления тени: она появляется через прозрачность. С реальностью это имеет мало общего. Но мы же любим заморочиться 😁
На самом деле, тень у объекта есть всегда. Просто она меняется в зависимости от удаленности объекта от поверхности. И это не сложно реализуется в вебе.
На видео ниже показано появление тени. Слева — как обычно делают. Справа — если заморочиться. Сделано специально медленно, чтобы нагляднее продемонстрировать разницу.
Код CSS объекта с простой тенью (слева):
div {
transition: box-shadow 3000ms;
}
div:hover {
box-shadow: 0 5vw 10vh rgba(0, 0, 0, .2);
}Код CSS объекта с правильной тенью (справа):
div {
transition: box-shadow 3000ms;
box-shadow: 0 0 0 rgba(0, 0, 0, .2);
}
div:hover {
box-shadow: 0 5vw 10vh rgba(0, 0, 0, .2);
}Разница всего лишь в одной строке, которая описывает тень у объекта до наведения курсора:
box-shadow: 0 0 0 rgba(0, 0, 0, .2);Если тень описана до наведения курсора, то переход будет уже не из ничего в определенное состояние (через прозрачность), а из одного состояния в другое (через изменение параметров тени).
Вариант с правильной тенью можно потыкать самостоятельно:
https://flyphant.com/download/true-shadow.html
На пользовательский опыт это не влияет ровным счетом никак, никто не будет обращать внимание на такие детали. Но при прочих равных, в мелочах всегда хочется быть лучшим.
