I made something similar as well (that includes both 3.11, 95, 2000, XP, CDE and Mac OS 9, and also all the default color schemes of those): https://nielssp.github.io/classic-stylesheets/?theme=win9x&s...

My focus was not so much on pixel perfect, but instead on creating something that would also work and look aesthetically pleasing on modern systems, like with higher DPI monitors and such. So one of the the things I did was to recreate all the icons and symbols in SVG.

I tried posting it as a Show HN when I added XP and Mac OS 9, but it didn't get much attention. Maybe the title of the project isn't as catchy.

Show 10 replies

Author here – happy to see this posted again!

This was my burnout recovery project and I wrote some thoughts on it recently https://notes.jordanscales.com/98-css-reflections

Show 3 replies

My collection:

The Sims https://thesimscss.inbn.dev/

Windows 98 https://jdan.github.io/98.css/

Windows XP https://botoxparty.github.io/XP.css/

Windows 7 https://khang-nd.github.io/7.css/

Edward Tufte https://edwardtufte.github.io/tufte-css/

Show 1 reply

98.css is an HN Classic, for all the best reasons.

Previous discussions:

https://news.ycombinator.com/item?id=33310554 - October 2022 (179 comments)

https://news.ycombinator.com/item?id=22940564 - April 2020 (211 comments)

See also:

HyperCard Simulator and Decker.

https://hn.algolia.com/?q=hypercard

I don't know if anyone else remembers this but in the late 90s, Microsoft had built-in CSS named colours that matched the Windows desktop theme/colours.

I have no idea if these still work (my IDE seems to say they do not, because everything is red).

    body {
      font-size : 11px ;
      color : windowtext ;
      background-color : appworkspace ;
    }
    a {
      color: menutext;
    }
    .headerBar {
      border-top    : 1px solid threedlightshadow ;
      border-left   : 1px solid threedlightshadow ;
      border-bottom : 1px solid threedshadow ;
      border-right  : 1px solid threedshadow ;
      background-color : threedface ;
    }

So you could build web UIs that matched the user's Desktop look and feel. We did this for our browser-based Intranet applications in 1998, which made them look a bit more "native". Show 1 reply

NB, that style does not play well with non-native DPI (e.g. when you have monitor set to 150% scale); to see it mapped to physical pixels, try running this in the browser's console:

    with(document.documentElement.style){
      transform = `scale(${ 1 / devicePixelRatio })`;
      transformOrigin = 'top left';
    }

(multiply the scale by whole number to get it "crisply zoomed").

Still not 100% perfect, but much closer to intended rendering, I guess.

Show 1 reply

I used a little bit of this I think in crowdwave https://www.crowdwave.com Show 2 replies

By eye alone, I'm pretty sure that is not MS Sans Serif as rendered in Windows 95 and Windows 98. Show 2 replies

Also worth checking out: https://botoxparty.github.io/XP.css and https://khang-nd.github.io/7.css Show 6 replies

I'd claim that this is way better than what we've got after years of UX/UI "research" and "improvements".

And it's not that I'm some old boomer. In '98 I was one year old. I just hate buttons which don't look like buttons, tabs which don't look like tabs, text fields that you have to click to discover they're editable etc.

Show 2 replies

https://github.com/lolstring/window98-html-css-js

https://github.com/anthmn/hackertosh.css

https://github.com/AlexBSoft/win95.css

https://github.com/1j01/os-gui

https://github.com/themesberg/windows-95-ui-kit

https://github.com/andersevenrud/retro-css-shell-demo

https://github.com/arturbien/React95

https://github.com/botoxparty/XP.css

https://github.com/Gioni06/terminal.css

https://github.com/jdan/98.css

https://github.com/jianzhongli/csswin10

https://github.com/khang-nd/7.css

https://github.com/kristopolous/BOOTSTRA.386

https://github.com/lachsfilet/Renkbench

https://github.com/lolstring/window98-html-css-js

https://github.com/micah5/PSone.css

https://github.com/nostalgic-css/NES.css

https://github.com/npjg/classic.css

https://github.com/robbiebyrd/platinum

https://github.com/bryanbraun/after-dark-css

https://github.com/npjg/new-dawn

https://github.com/ritenv/retro-desktop

https://github.com/RoelN/c64css3

https://github.com/sakofchit/system.css

https://github.com/vinibiavatti1/TuiCss

https://code.divshot.com/geo-bootstrap/

Show 1 reply

This is really cool, the only thing I see is the font rendering looks choppy. An antialiasing issue I think, but it looks worse than some non-antialiazed fonts (like the EGA 8x14 pixels font) too

To be very pedantic: also the dropdown menu, when opened, looks very different than the original 98 style

Show 2 replies

Very cool, will need to find a use for this. I briefly had a go at building similar trying to replicate the Club Penguin UI - need to get back to it!

https://github.com/bwgraves/PenguinCSS

I made this Obsidian theme (now defunct) using lots of source from 98.css

https://github.com/SMUsamaShah/Obsidian-Win98-Edition

Admirable job. Just wondering - was the impetus for this anything to do with movie or TV prop making? It would certainly be terrific for rendering real time screens of '90s era data.

This is weirdly compelling. I have some retro info that I've wanted to put in a small website, this may be the thing that pushes it into the active list.

Thanks!

I miss this era of life and childhood

It sucks that the fonts will never look amazing as they once were in CRT monitors in 800x600.

This would be an improvement over modern UI design. It's much more clear what is clickable. That is why old Windows versions were designed like that.

Where’s Clippy?

Great job! I think adding Clippy notifications would be a fun touch

Show 1 reply

broken on firefox for me after clicking through a few times...

the left side gets shift over and hidden behind the white navigation box.

Does this happen to anyone else?

This is beautiful. The world needs more of this.

I hate and love this at the same time

Cool but the fonts are all messed up.

developers will do anything but actually recreate visual basic

i dream of a 16 cga colors css framework with bulky arrows