Hacker News new | ask | show | jobs
by cududa 1754 days ago
I’m sorry but this is not the 7 GUI. These all look like straight linear gradients with no breakpoints in how harsh they appear in this library.

To the creator I’d suggest using photoshop or Figma to relocate the design elements, then translate the breakpoints to CSS to make the components more realistic.

Great start though!
2 comments
tomerv 1753 days ago
I think you're overly-critical. The CSS immediately gives the look & feel of using Windows 7. Maybe the gradients are not completely spot-on, but the other 95% of elements are great.
link
andrewmcwatters 1753 days ago
None of the elements are accurate replications of the originals even after accounting for DPI scaling. I love the spirit of the project, but it feels like any other poor replica you’d find anywhere else.

There are spaces between tab button elements, the title bar buttons have excess space and incorrect borders, window buttons are the wrong size and use incorrectly scaled raster icons, the backdrop filter property isn’t applied correctly, the shadows on text boxes are incorrect, the tooltip padding is the wrong value and the wrong box size, buttons have the wrong borders, checkboxes have checks incorrectly applied, the author used raster icons for window buttons but not checkboxes for some reason. I could go on.

It reminds me of those yesteryear rips of future Windows themes on deviantART when those kids replicated the desktops of yet-to-be released versions of Windows but didn’t bother comparing the size or even the right colors of elements.

link
laacz 1750 days ago
I'm amazed how one can see it all, yet I do not think most people would care, since they (as well as I am) are all blind to these nuances.
link
khangnd 1754 days ago
Agree, it still looks stiff and far from the 7 GUI. Would you care to elaborate more on the breakpoints you talk about, or is there any good resource I could take to learn more? Thanks.
link
asnbft 1754 days ago
I assume that they are talking about easing gradients, which is interpolating the gradient’s color stops using a cubic bézier easing function [1]. It gets rid of the sharp edge you sometimes see in linear gradients. Think of CSS animations and their easing-functions.

There are various Sketch and Figma plugins which let you modify the easing function and generate the CSS for it.

[1] https://css-tricks.com/easing-linear-gradients/

link