search

OER-WEB-TEAM / design-system--drupal-theme

1 stars 0 forks source link

Impossible drop-shadow physics! #50

Closed AlexVanK closed 5 months ago

AlexVanK commented 5 months ago

The shadow-hover effect of the cards on the home page is physically impossible, and it makes my eyes bleed. 👁️ 🩸

image

For an object to produce a shadow when the sun is at noon, it must be lifted from the ground. If the camera is from the perspective of the sun, the more we lift the object (gets closer to us), the bigger the shadow it produced. When it gets closer to us, it should appear bigger!! BUT on the website, if we hover the card it doesn't get ANY bigger, yet it produced a shadow!!!

That is IMPOSSIBLE!! 🗡️ 💀

kime14 commented 5 months ago

It's a nano lift off the page. You can't tell it's not getting bigger unless you inspect it. From the naked eye it works. Plus the earth is flat.

emsaiz commented 5 months ago

LOL I'm also ok with the current hover but if you REALLY want to change it, we could just do a fill on hover.

  1. Fill entire card with current grey color on hover (remove divider lines)
  2. Fill entire card with light version of success color #EDF7F0 (remove divider lines)

image

but I'm open to suggestions if you guys have any!

AlexVanK commented 5 months ago

No worries! I got you covered. I fixed the physics by adding a scale effect. Adding this as new feature, achievable by including the utility dropshadow on any element that supports the hover state!

image