Jump to content
xisto Community
darkranger

Hot: A Windows Desktop Made Entirely In CSS

Recommended Posts

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 by microscopic^earthling (see edit history)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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! :lol: Well done Trovster.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 :lol:

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.