You'd hope there would be at least an example that doesn't require JavaScript if this is a CSS thing. It could have made a good block to remind you to enable to see the editor.
OP here. Never change, Hacker News. Never change. <3
Show HN: Versatile Metallic Finish for CSS
51–60 of 64 posts
Re: Show HN: Versatile Metallic Finish for CSS
#52Windows Vista is calling.
Aero not going to pick up?
Re: Show HN: Versatile Metallic Finish for CSS
#53I'm really hoping someone will make a metallic texture that behaves like an actual metallic colour - i.e. reflecting the environment. I think that would require some awareness of surrounding colours as well as using the webcam to capture light coming on the the screen surface.
OP here. Believe it or not, that was actually exactly my conceptual starting point. Goes without saying that I had to scale back my ambitions just a tiny bit.
Do it!!! And face recognition to grab the viewer's position so you know how to render the reflections
Re: Show HN: Versatile Metallic Finish for CSS
#54I'm really hoping someone will make a metallic texture that behaves like an actual metallic colour - i.e. reflecting the environment. I think that would require some awareness of surrounding colours as well as using the webcam to capture light coming on the the screen surface.
Naturally, this exists: https://www.youtube.com/watch?v=36fwRWryD64
Naturally, it didn't catch on ;)
A similar thing was done in iOS 6 with brushed metal reflecting based on the gyrosensor: https://www.youtube.com/shorts/c9X7D87uJ7Q
Re: Show HN: Versatile Metallic Finish for CSS
#55Caused me to find this brushed metallic effect which I think is well done, and is all CSS, no JS. https://codepen.io/simurai/pen/kvyEeg
Wow, that is absurdly good. I never would have imagined you could use a repeating gradient effect to produce a brushed metal texture. That's crazy clever, and it's also crazy how it works equally well for rounded and rectangular buttons.
Now all it needs is user head tracking to make the highlights and reflections move.
Re: Show HN: Versatile Metallic Finish for CSS
#56Re: Show HN: Versatile Metallic Finish for CSS
#57Earlier quoted context omitted.
Wow, that is absurdly good. I never would have imagined you could use a repeating gradient effect to produce a brushed metal texture. That's crazy clever, and it's also crazy how it works equally well for rounded and rectangular buttons.
Now all it needs is user head tracking to make the highlights and reflections move.
Accelerometer would also work, like in this library: https://github.com/maustinstar/shiny
Re: Show HN: Versatile Metallic Finish for CSS
#58Caused me to find this brushed metallic effect which I think is well done, and is all CSS, no JS. https://codepen.io/simurai/pen/kvyEeg
Yes that is to be expected. JS only gets involved in setting of CSS styles, not effecting appearance itself.
You would be surprised how many of these type of things are written in a way that they don't work at all without JS.
Re: Show HN: Versatile Metallic Finish for CSS
#59I'm really hoping someone will make a metallic texture that behaves like an actual metallic colour - i.e. reflecting the environment. I think that would require some awareness of surrounding colours as well as using the webcam to capture light coming on the the screen surface.
> using the webcam to capture I’m just imagining the dialogue boxes asking for permission to use the camera to show me a button.
Reminds me of SwitchGlass[0] preferences. The author talked on his podcast that he really wanted to display user's wallpaper as it currently appears, but he found out that to determine which "frame" of an Apple dynamic wallpaper is shown SwitchGlass would need to ask for location permissions.
Re: Show HN: Versatile Metallic Finish for CSS
#60I, for one, welcome this de-Applefication of design that’s been happening - on the edges of the internet, at least.
I mean, Apple was one of the first to really embrace and promote skeuomorphic design. It wasn't that long ago that this sort of thing was Apple's design.
True, and I hope they go back to some skeumorphic design elements. But we've had nearly a decade of Apple's current design language. It's time to move on