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.

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

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/

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

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';
    }

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

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

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

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 ;
    }

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.

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

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

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/

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

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

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!

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

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?

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

I miss this era of life and childhood

developers will do anything but actually recreate visual basic

This is beautiful. The world needs more of this.

Where’s Clippy?

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

Cool but the fonts are all messed up.

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

I hate and love this at the same time

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.