Show HN: Versatile Metallic Finish for CSS

Post by autoexec » Fri, Dec 09, 2022, 11:27 PM UTC

agos wrote: post #17

tyingq wrote: post #12

Caused 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

Simurai is a legend, check out their other code pens for some great level CSS

Post by mikaelaast » Sat, Dec 10, 2022, 3:45 PM UTC

mikaelaast wrote: post #48

crazygringo wrote: post #23

Very 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…