Hey man, if you're looking for the fonts I had them on a similar thing I done a while ago. Only normal size unfortunately <a href="https://github.com/padraigfl/packard-belle/tree/master/src/_scss/w98/fonts" rel="nofollow">https://github.com/padraigfl/packard-belle/tree/master/src/_...</a> Cant remember where I sourced them from but it's probably in the code somewhere, the MSSansSerif ones are pixel perfect as far as I'm aware. It outputted CSS to be used independently but it was very much a secondary concern, pretty sure I'd be the only person who knows how to use it without backtracking from the react bits <a href="https://github.com/padraigfl/packard-belle/blob/master/css/w98_simple.css" rel="nofollow">https://github.com/padraigfl/packard-belle/blob/master/css/w...</a> the data-uris might be useful, will have a look through your issues to see if I can help with anything!<p>Here's the attempt at a Windows 98 recreation I done with it
feel free to take whatever from it:<p><a href="http://packard-belle.netlify.app/" rel="nofollow">http://packard-belle.netlify.app/</a><p>Tried doing a design system thing too but got lazy:<p><a href="http://packard-belle.herokuapp.com/" rel="nofollow">http://packard-belle.herokuapp.com/</a>
I can't believe how intensely functional the UI design of windows 95/98 was when looking back, and I say this as someone who intensely hates windows overall - but credit where it's due.<p>Only when using it now is it clear how well they minimized ambiguity and cognitive load... everything is so frickin obvious. Contrast that with modern aesthetically obsessed UIs, ever ambiguous, lack of clear distinctions not in both spatial boundaries and UI states - it's a constant guessing game for the user, never certain about the outcome of an interaction, giving you this distracting sense of unease rather than just focusing on whats behind the UI.
that's really gorgeous. I find windows 95 aesthetics a master piece. I'm not gonna lie, I thought about windows 95 when I was creating FOS, my Fake Operational System "framework".<p>I'm thinking about refactoring it and I'll may incorporate windows color scheme to it. Here's the link if you wanna see what I am talking about.<p><a href="https://github.com/victorqribeiro/fos" rel="nofollow">https://github.com/victorqribeiro/fos</a>
Author here! Thanks for all the nice comments (and helpful bug reports). This idea has been in the back of my mind for ~2 years now but I recently got a wave of motivation and decided to ride it - and here we are. Happy to answer any Qs :)
The widgets look spot on, but the text has atrocious kerning. 'ti', 'll', 'd!' are squashed together. Windows 95++ had extremely good small size font rendering and did pixel perfect alignment and kerning of pretty much any font (However, the UI font was probably bitmapped). Remove the 'letter-spacing' styling - it breaks kerning.
I’m impressed by how few people here have tested it in Firefox – Fieldset is broken, Button has ::-moz-focus-inner not properly disabled, Radio/Option isn’t rendering correctly (still shows the original input element as 2x2px black box), and quite a bit more.<p>Hilariously, this is quite a good example on why the Chrome monoculture is just repeating the IE monoculture of years past
Isn't it a bit ridiculous that we need to do this in the first place? Shouldn't clear 3D controls on a neutral gray background be the <i>default</i> user-agent appearance, with no need for custom CSS of any sort?
I was going to post the quote about them not stopping to think if they should, but then I actually clicked the link. Wow, that brought back a lot of nostalgia. I haven't even used Windows in 15+ years, but I now realize that I still have a fondness for the interface of my youth ;-)
Certainly evokes a lot of nostalgia. The tactile feel of 3D buttons can be mesmerizing at times, a lot of experience has been lost in the race to flat, in addition to lowered affordability of modern UIs.<p>One bug: Firefox on Linux introduces an extra dotted rectangle on focused buttons (so they end up with two oddly overlapping focus indicators)
Are there similar retro-UI systems for other older interfaces? While I don't have that much nostalgia for Win98 myself, I could see how it could be cute to have similar systems for classic (System 6-7) Mac, Amiga, etc. I've seen websites that try to go for these looks, but I think they were manually done.
I noticed that it's using box-shadow for the "3d effect" on buttons and window borders.<p>I'm a bit disappointed they didn't use the "inset" or "outset" border-style [0] which pretty nobody uses anymore these days. I thought this kind of design is pretty much why these border-styles exist.<p>[0]: <a href="https://htmldog.com/references/css/properties/border-style/" rel="nofollow">https://htmldog.com/references/css/properties/border-style/</a>
I think this would be a great reference for teaching introductory UI design; with the 3D-ness you can clearly see the different states that each UI element requires.<p>I also really like the quotes about each component! Is there an online copy of this <i>Microsoft Windows User Experience</i> manual somewhere?
My heart beat a little faster when I saw the VB dialog box. I experienced building software for the first time when I was taken to my father's office where they used VB and Foxpro (and still do) to build ERP systems. Everything looked like this site.<p>The waves of nostalgia are sure coming on hard. Thank you to the author of this. This whole site is a work of art!
> Today's mood<p>><p>> Claire Saffitz<p>><p>> Brad Leone<p>><p>> Chris Morocco<p>><p>> Carla Lalli Music<p>I just wanted to let the author know that at least one other person appreciates this though tbh most of the time for me it's Sohla.
That's as refreshing as a dunk in a cold pool. My God we need more UIs that instantly tell you what they can and cannot do. Seems like the modern ones do as much as they can to obscure everything.
This is great. I was actually building something similar for my VST stuff page (work in progress - <a href="http://tilde.town/~severak/studio/" rel="nofollow">http://tilde.town/~severak/studio/</a>). Now I am gonna copy that neat box-shadow border from 98.css.
Really nice!<p>One minor nitpick: the title bar buttons actually need to be a pixel or two larger in each direction (so 2 or 4 pixels more of height and width, while remaining centered).
Oh, those days when designers actually thought of ergonomic vs modern insanity with no standard, no contrast, no ability to deduct function from the look etc. etc. Well there are exceptions but generic picture looks rather depressing.
Check out <a href="https://poolside.fm/" rel="nofollow">https://poolside.fm/</a> for some extra nostalgia Operating Systems.
The controls look great but the text looks off. I forgot the UI font in Windows 98 but perhaps it was Tahoma. Maybe try that and disable anti-aliasing. Better yet, get an image of how the actual font is rendered on Windows 98 and make the glyphs into a bitmap font. That would also sidestep all the font renderer differences between then and now.
Really nice. I tried to get Windows look and feel in the headers for the Yazz code editor, but maybe I should have used this CSS lib instead. Great Job!<p><a href="https://yazz.com/app/homepage.html" rel="nofollow">https://yazz.com/app/homepage.html</a>
<i>Flexbox was originally invented in the late ’90s by Mozilla (using vendor prefixes — `display: -moz-box`, `-moz-box-flex`, etc.) in order to use CSS to style and lay out their Windows 9x app UI. We’ve come full circle.</i><p><a href="https://twitter.com/frankyan/status/1253063046060109824" rel="nofollow">https://twitter.com/frankyan/status/1253063046060109824</a>
Does anyone know what the easiest way to make those windows movable and resizable (dynamic in general) would be?<p>Great work, I love this interface style!
nice attempt!<p>it might be useful to boot real windows 98 (e.g. by visiting <a href="http://copy.sh/v86/?profile=windows98" rel="nofollow">http://copy.sh/v86/?profile=windows98</a>) and check how things interact with clicks, in particular how checkboxes and radio buttons look with mouse down.
It's great, I love it! It's quite similar to this project on iOS: <a href="https://github.com/Baddaboo/ClassicKit" rel="nofollow">https://github.com/Baddaboo/ClassicKit</a>
They even went as far as building a fake Internet Explorer app.
Wow that's pretty fleshed out. I created something similar 3 years ago, but I lost motivation (named it the same too haha): <a href="https://github.com/LakenH/98css" rel="nofollow">https://github.com/LakenH/98css</a>
It is rather amusing how this doesn't work in IE11. I'd <i>almost</i> be inclined to fork and make a version that does, just for the heck of it... for you know, corporate environments that need Win98-styled intranets :)
It's weird how this reminds me of the last two years of the <i>newest changes</i> in UIs. I think it was Windows 10 that brought back minimalist borders (as opposed to Windows 7)? I am not sure whether I am imagining this.
I surprisingly like it! Only thing I didn't like is the font (makes it hard to read for some reason) but otherwise, it looks wonderful. I might use this as an inspiration for future project I am building!
This is great, I would love to be able to use this. Win98 always felt like a highpoint in easy to UI design.<p>I am not a CSS ninja, how easy would it be to make this responsive? The example do not appear to be responsive.
First thing I do in Windows is turn off the eye candy :) . I mostly use linux with KDE. It still has a real file menu and visible scrollbars and I hope that never changes :)
ouch, open this in Safari and highlight some text, then unhighlight the text. It's literally barely readable, maybe some bugs to fix there, but it looks great in Chrome. Cool idea!