This is about the appearance of a shadow when the cursor hovers over the object.
In reality, the closer an object is to the surface on which it casts a shadow, the clearer the shadow is.
In most cases, the appearance of a shadow in web interfaces of an object when the cursor is hovered over is done through opacity. This has little to do with reality. But we like to mess with things 😁
In fact, an object always has a shadow. It just changes depending on the distance of the object to the surface. And it is not difficult to implement in the web.
The video below shows the appearing of the shadow. On the left — as it is usually done. On the right — if you try hard. It is made on purpose slowly to demonstrate the difference clearly.
CSS code of an object with a simple shadow (left):
div {
transition: box-shadow 3000ms;
}
div:hover {
box-shadow: 0 5vw 10vh rgba(0, 0, 0, .2);
}CSS code of an object with a true shadow (right):
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);
}The difference is just one line that describes the object’s shadow before the cursor is hovered:
box-shadow: 0 0 0 rgba(0, 0, 0, .2);If the shadow is described before the cursor is hovered, the transition is no longer from nothing to a certain state (via opacity), but from one state to another (via changing the shadow parameters).
You can poke around with the correct shadow yourself:
https://flyphant.com/download/true-shadow.html
It doesn’t affect the user experience in any way, nobody will pay attention to such details. However, all other things being equal, you always want to be the best at the details.
I am Sasha Tikhonov, co-founder and art director at Flyphant.
We are Flyphant. Mobile applications and web development, graphic design, motion graphics — this is all that we are not only able of but also love doing.
flyphant.com · twitter · facebook · instagram
