Show HN: Versatile Metallic Finish for CSS

https://www.metallicss.com

by mikaelaast • 4 years ago

112 61 4 years ago

prox• 4 years ago

This reminds me there was a time when affordances were all the rage in UI (early Iphone) and Steve Jobs was a fan, wonder if we get that back at some point.

frb• 4 years ago

Probably. As with pixel art or design that mimics the early WWW era, it will become part of some retro hype cycle.

smcl• 4 years ago

I think a lot of these trends come in waves, so in time flat UI will hopefully fade away and we'll get slightly chonkier UI elements that are (IMO) a little more discoverable and user-friendly.

toastal2• 4 years ago

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 <noscript> block to remind you to enable to see the editor.

schwartzworld• 4 years ago

Where is the rule that people need to complain about JavaScript at least once for every post?

tomrod• 4 years ago

Under the rule that identifies meta discussions are inevitable regarding no JS posts ;-)

reaperducer• 4 years ago

Where is the rule that people need to complain about JavaScript at least once for every post?

It's there, but you can't see it because the rule requires JavaScript to view the rule.

dylan604• 4 years ago

But in this case, it is a decent question. Why is it not called MetalliJS? It's not CSS so much that you can just open up a CSS file and manipulate it. You have to dive into a JS file to modify CSS? That's not intuitive at all.

It just seems a very strange way of going about demoing a CSS library.

toastal2• 4 years ago

It's about the experience. Having JavaScript is fine, but <noscript> is a part of accessibility. It's just plain broken with no warning when scripts are disabled. It's a wise practice to personally disable scripts by default with an add-on and only opt yourself into scripts as needed--for privacy, for security, saving bandwidth.

In this specific case, one should be able to view the default demo without JS because it's a CSS library/demo and not a JS one. You can (and should) progressively enhance it with JS.

vultour• 4 years ago

Considering it's distributed as a JS library I'm gonna go out on a limb here and say it requires javascript.

mikaelaast9• 4 years ago

OP here. Never change, Hacker News. Never change. <3

snshn• 4 years ago

Plox add Titanium to the drop-down list of presets.

skrebbel• 4 years ago

I might be old but i think this button style is incomplete without a corresponding Java Applet

thatwasunusual• 4 years ago

Me in my 90s just called me and claimed copyright on this kind of buttons.

867-5309• 4 years ago

reminds me of Xara 3D

ToJans• 4 years ago

The 90s demoscene called...

f6v• 4 years ago

Today’s 13 yo wear these ridiculous clothes from the 90s. Wait till the old internet becomes cool again.

alsetmusic• 4 years ago

Seeing how stupid they look makes me realize how stupid I looked. If the web goes through the same retrofit, I’ll stop using it until the fad fades.

Relevant in a way I didn’t appreciate when I read this as a late teen:

https://www.theonion.com/u-s-dept-of-retro-warns-we-may-be-r...

tyingq2• 4 years ago

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

agos• 4 years ago

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

autoexec• 4 years ago

There's something just plain wrong about showing off some cool trick that doesn't need JS by putting it on a website that refuses to show you anything without it being enabled.

xmonkee• 4 years ago

Jeez, that's so good

cbeach• 4 years ago

that is beautiful!

crazygringo2• 4 years ago

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.

rbanffy2• 4 years ago

Now all it needs is user head tracking to make the highlights and reflections move.

solardev• 4 years ago

Now THAT's really cool.

darepublic• 4 years ago

Yes that is to be expected. JS only gets involved in setting of CSS styles, not effecting appearance itself.

tyingq2• 4 years ago

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.

globalise83• 4 years ago

It's great: I increase 'scale' and I instantly feel richer.

BaudouinVH• 4 years ago

1997 personal page navigation buttons called.

cm42• 4 years ago

Finally: The Real Web 3.0

mikaelaast9• 4 years ago

OP here. Awesome to get some feedback on the library. Please let me know if you are curious about details. The insanely hard part of this was reconciling the differences in SVG implementations across browser engines.

crazygringo2• 4 years ago

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 around the edges.

Hope this is constructive feedback -- would love to see it without the side wobbles/ripples!

mikaelaast9• 4 years ago

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.

mikaelaast9• 4 years ago

OP again. I couldn't get this out of my head, so I went to some steps to mitigate the unrealism. Updated now, with a slightly less wobbly horizon.

v3ss0n• 4 years ago

Back to 2000? I don't remember why we wanted that in first place. Please noo

maidul• 4 years ago

Looks pretty neat. Always blown away by what people can do with CSS. Meanwhile I have to look up how to center a div vertically

jawngee• 4 years ago

Doesn't work in Netscape Navigator 3 Gold. :/

n8cpdx• 4 years ago

Having flashbacks to being a middle schooler choosing the fancy button to use from a menu in Expression Web.

In case the reference is too niche: https://www.expression-web-tutorials.com/interactive-buttons...

Is this the first hint of that style of UI coming back in fashion? It seems possibly overdue with the trend towards rounding, shadowing, and texturing everything the last few years.

plusminusplus• 4 years ago

The 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 dynamic content, linebreaks, etc. Maybe find a way around that. (Cool demo, thanks for sharing)

mikaelaast9• 4 years ago

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.

gampleman• 4 years ago

I'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.

lostlogin• 4 years ago

using the webcam to capture

I’m just imagining the dialogue boxes asking for permission to use the camera to show me a button.

yreg2• 4 years ago

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.

[0] https://hypercritical.co/switchglass/

mikaelaast9• 4 years ago

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.

matheist• 4 years ago

Do it!!! And face recognition to grab the viewer's position so you know how to render the reflections

SebastianKra• 4 years ago

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

spaceman_20202• 4 years ago

I, for one, welcome this de-Applefication of design that’s been happening - on the edges of the internet, at least.

LordDragonfang• 4 years ago

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.

spaceman_20202• 4 years ago

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

Aeolun• 4 years ago

I didn’t know this was what I needed until I saw it. All my buttons will be like this from now.

freedomben• 4 years ago

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!

mikaelaast9• 4 years ago

Thank you! This kind of comment makes it worth it.

durnygbur• 4 years ago

Windows Vista is calling.

mikaelaast9• 4 years ago

Aero not going to pick up?

andybak2• 4 years ago

Ugh. Flashbacks to mid-90s Photoshop tutorials.

mikaelaast9• 4 years ago

Sorry!

andybak2• 4 years ago

It's ok. Maybe I'm just not getting the retro charm. I'm still not sure I get vaporwave either.

Show HN: Versatile Metallic Finish for CSS

Related Stories