Hot: A Windows Desktop Made Entirely In CSS

[darkranger 0]

Hey, I was navigating and I found something that really amazed me, it will surely amaze you too if you are into programming/webdesign. This is a windows desktop made entirely in CSS by a guy named Trovster. Most of the positioning was done with unordered and definition lists. The CSS code used in this could make an excellent case study for any developer.
Here have a look:
http://desktop.trovster.com/desktop/?name=YOURNAME
Change the yourname so you can personalize the start-menu name to your input.

NOTE*: You will need FireFox for full functionality, because Internet Explorer doesn't render .PNG files correctly, has javascript problems and CSS support.
Enjoy!.

Edited August 19, 2005 by microscopic^earthling (see edit history)

[alphonse 0]

The idea is surely great..but please check the link as it seems that it cannot be loaded. But also, do you need to download anything for it to work?

[abhiram 0]

It's working for me.... a little slow, but working. It's pretty great. Just goes to show how much you can achieve using just CSS.

[shadow-x 0]

Thats the best use of CSS I've ever seen! i didnt know you could do so much with CSS to be honest! there was a Flash version of windows at one point I found, though I cant remember it but its worth a look if you can find it!

[Shadow X 0]

Thats the best use of CSS I've ever seen! i didnt know you could do so much with CSS to be honest! there was a Flash version of windows at one point I found, though I cant remember it but its worth a look if you can find it!

Totally agree with you on this one shadow-x! And if I wasn't told that this wasn't done with CSS, I would never have known. This because the person who made this did it so well to make it look like an ordinary Windows desktop screenshot. What I really like about it though is the fact that he positioned all the links exactly where they would normally go and the hyperlinks for the individual buttons. It must have taken him a great deal of time, effort and skill to do this, and I know that if it was me trying to make something like this, I'd find it really hard! Well done Trovster.

[szupie 0]

Wow, what a nice idea. Although this isn't very practical (most of the buttons don't link you anywhere), it shows a lot about the power of CSS and JavaScript. If you view the site with no page style (View > Page Style > No Style), you can see that it doesn't have any images in it. The HTML only contains the content, no image or anything.You can drag the icons around the desktop. The Run button creates a new (draggable) dialog. Even the clock at the bottom right hand corner works.But can anyone get the Control Panel to work properly? I got it once, but the dialog box didn't have any style to it, only the text came up.By the way, Shadow X... Do you know this shadow-x guy?

[HungryHungryHippo 0]

I once saw a website with this kind of thing before. These are extremely cool and if I could find out how to code that thing I would try, fail, repeat. I'll give this one alot of thanks because by playing with it I discovered Mozilla Thunderbird.

[Kushika 0]

That is absolutely AMAZING! It truely is. I guess it shows you how much is possible with CSS. The code is so clean and organised too -- sweet work.

[finaldesign1405241487 0]

Pretty amazing approach to CSS. Anyway I just hope nerdz from Microsoft would not sue this guy for stealing design hehe... Anyway, it's nice conceptual idea, and webmasters could learn from it alot...

[Quatrux 4]

This is really cool, but the idea is quite old, just that this one is the most closes approach I ever saw to make a desktop. About 4-3 years ago, I used to have a site design which looked totally like my Amiga OS, Workbench screen, it all was written in HTML with a little of javascript (I didn't really use CSS at those times and what a pity) The most hardest thing for me was to make the Height of the design using just plain html, so it wasn't very compatible with all the browsers, because of different font sizes on different computers (yeah, I was using html font tag and size attribute) so sometimes the tables and images were broken.Furthermore, I again made a big Amiga OS, Workbench Screen Image which I cut to load quite fast and use some javascript and a lot of AREA tags to make it look like a website, but this was also a stupid idea, I have run out of bandwidth, because at those times I didn't have a lot of bandwidth.Anyway, HTML is not meant for Style

[iGuest 3]

Yes Great it works for me Thank you.and i saw it whith IE 6.0 it worked and it didn't have any problems.

[xboxrulz1405241485 0]

nice! I wish they had a KDE version.xboxrulz

[HellFire121 0]

Very nice.. especially that it has only been written in css.Has some good themes too but there's not really much point in creating something like this, even though it's quite cool.-HellFire

[sskatr911 0]

Thats the best use of CSS I've ever seen! i didnt know you could do so much with CSS to be honest! there was a Flash version of windows at one point I found, though I cant remember it but its worth a look if you can find it!

I agree this is also the best i have ever seen too

[luizzeross 0]

Really amazing! Maybe it can be improved using AJAX!! Isen't there a windowmaker version ???