Show HN: gBoxShadow.js – Gravity-Sensing box-shadow for flat UI | Hacker News Reader

Show HN: gBoxShadow.js – Gravity-Sensing box-shadow for flat UI

github.com

43 pointsGigacore11 comments

That's great, nice idea.

It worked for me, android 5.0.1. Had to turn off `auto-rotate` in my phone settings. Had to move my phone around sometimes for the shadow to catch up to a new rotation point; it had trouble sometimes (3/5) catching up with the phone rotated upside down in portrait orientation.

Weird. I can't get it to work at all on my Nexus 5 Marshmallow in Chrome 46. I tried turning off autorotate. Still nothing.

Hey bsimpson, thanks for the feedback. Looks like most Nexus 5 users can't get it to work. Would you be able to debug using chrome://inspect if possible? I am trying to get hold of Nexus 5 meanwhile. Thanks!

Worked for me on an iPhone 6s, iOS 9.0.x. Same issue with auto-rotate, when safari changed orientations, the shadow orientation became out of sync.

Thanks for the feedback, @brainzelip. I will take a look into the upside down scenario in portrait.

Do you have any live examples?

This caught my eye because I was thinking of making something similar to give a stereoscopic 3d effect like the Nintendo 3DS.

Hi hanniabu,

I have put up links to demos (live + video) on GitHub page. Please take a look.

Cool concept. Why do you need to define the color and blur distance twice?

The one we set in CSS is a fallback for devices that doesn't have Accelerometer / Gyroscope or support the APIs used. The values set in data attributes are for the plugin to make use of in order to apply the effect. I'm working on picking up the blur / color from the box-shadow property dynamically, but it appears to be a bit tricky as we can only get the complete value set to the property and not just blur and color.

"The idea is to introduce real-world entity to UI/UX"

No, that should be REINTRODUCE. The whole point of a GUI is that it's intuitive. The depicted controls should bear essential visual qualities of real-world objects, like buttons. Does the button look like it's sticking out from the background? Then it's not depressed. And so forth.

"Flat" UI is an idiotic regression that has set GUIs back decades. Come to think of it... did they ever suck as much as "flat" UI? Now we have entire interfaces that are an Easter-egg hunt. It's pathetic.

Hi PostThisTooFast,

Thanks for your feedback and making the correction. I agree with your thoughts on flat UI. Whether it is pathetic - I'm not sure about that as unfortunately the world has been forced to use it in some place or the other.

Reply on news.ycombinator.com