5 ms·

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

43 points by Gigacore 11y ago

brianzelip 11y ago
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.
- Gigacore 11y ago
  Thanks for the feedback, @brainzelip. I will take a look into the upside down scenario in portrait.
- dragonshed 11y ago
  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.
- bsimpson 11y ago
  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.
  - Gigacore 11y ago
    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!
hanniabu 11y ago
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.
- Gigacore 11y ago
  Hi hanniabu, I have put up links to demos (live + video) on GitHub page. Please take a look.
tedmiston 11y ago
Cool concept. Why do you need to define the color and blur distance twice?
- Gigacore 11y ago
  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.
PostThisTooFast 11y ago
"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.
- Gigacore 11y ago
  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.

43 points by Gigacore 11y ago

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.

Gigacore 11y ago
Thanks for the feedback, @brainzelip. I will take a look into the upside down scenario in portrait.
dragonshed 11y ago
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.
bsimpson 11y ago
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.
- Gigacore 11y ago
  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!

hanniabu 11y ago

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.

Gigacore 11y ago
Hi hanniabu, I have put up links to demos (live + video) on GitHub page. Please take a look.

tedmiston 11y ago

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

Gigacore 11y ago
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.

PostThisTooFast 11y ago

"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.

Gigacore 11y ago
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.