This is neat! and actually very useful!
My client wants a "Bronze, Silver, and Gold" button to represent membership levels, and this will be perfect!
Show HN: Versatile Metallic Finish for CSS
41–50 of 64 posts
Re: Show HN: Versatile Metallic Finish for CSS
#42I, 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.
Re: Show HN: Versatile Metallic Finish for CSS
#43Windows Vista is calling.
Re: Show HN: Versatile Metallic Finish for CSS
#44Ugh. Flashbacks to mid-90s Photoshop tutorials.
Re: Show HN: Versatile Metallic Finish for CSS
#45Ugh. Flashbacks to mid-90s Photoshop tutorials.
Sorry!
Re: Show HN: Versatile Metallic Finish for CSS
#46The metallic finish is just an image, "for CSS" made me think this used only CSS to achieve the effect. The use of `filter` make it look nicer but other than that there's not much original here. Maybe try abusing nested borders, gradients and shadows until you can achieve the same thing with CSS alone. The JS to render the image blob is creative. Also elements with a fixed height (or `line-height`) get tricky with dy…
Thanks for the feedback. The "for CSS" is in reference to how CSS properties like the dimensions and border-radius are what determine the rendered effect. Also, there are additional custom CSS properties available to control even more aspects of the final look.
Re: Show HN: Versatile Metallic Finish for CSS
#47Re: Show HN: Versatile Metallic Finish for CSS
#48Very fun in a maximalist way! I do have a nitpick though -- I'm always bothered by whenever shadows or reflections operate in a way that makes no physical sense. And in this case, there's a funny "wobble" of the reflections on the left and right edges. From inside out, the horizon goes way down, then up, then back down again... which suggests an awfully bizarre (and likely physically impossible?) rippling shape aroun…
Thank you for the comment. I get it completely. The ripple effect is my artistic and decidedly unrealistic way of evoking the general feeling of the kind of distortion that occurs when the metallic surface bends. It works well for the most part (in my opinion), but starts to call attention to itself when applied too heavily (like what happens when upping the "--scale" value). I am hoping it serves as a simplified and abstracted interpretation of reality.
Re: Show HN: Versatile Metallic Finish for CSS
#49This is neat! and actually very useful! My client wants a "Bronze, Silver, and Gold" button to represent membership levels, and this will be perfect!
Thank you! This kind of comment makes it worth it.
Re: Show HN: Versatile Metallic Finish for CSS
#50I'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.