OSX Lion in CSS3

http://www.alessioatzeni.com/mac-osx-lion-css3/

by uptown • 15 years ago

200 45 15 years ago

steve8918• 15 years ago

Very cool.

But one question from a JS/CSS noob: there seems to be a rash of people doing a lot of things in pure CSS. Is this more for fun and as an experiment, or is there an actual technological reason to do it strictly through CSS? Is pure CSS the way things are heading, or is using javascript the real way to do things?

kristofferR• 15 years ago

A few people who are (overly, in my opinion) concerned about their privacy and security don't have Javascript enabled in their browser, so stuff that requires it wont work.

Thats the only real reason I can see for trying to do as much in CSS3 as possible other than just for the challenge.

Wilya• 15 years ago

Turning Javascript off (or at least manually whitelisting via NoScript) also can give a quite big performance boost, by simply turning off many useless effects.

Making CPU-hungry CSS3 kind of defeats that purpose, of course.

runaway• 15 years ago

Also, as I understand it, pure CSS transitions and effects are often much faster than using javascript.

gjulianm• 15 years ago

CSS animations and graphic jobs can be hardware accelerated, so it's way faster and doesn't affect the performance of the browser. There was an article posted here on HN about this exact topic, comparing animations in JavaScript vs CSS. I'm sorry I can't find it :(

exDM69• 15 years ago

It is certainly valuable to do stuff in CSS instead of Javascript to a certain degree. Especially the small gimmicks that add a little visual touch but isn't part of your core functionality. E.g. some CSS3 transition animations. Doing stuff in JavaScript is slower and more error prone.

The recent trend of trying to do everything in only CSS3 without Javascript is mostly a challenge for the developer and some of that stuff serves no actual value. For example, many people have been doing some icons with CSS3, by creating a bazillion elements in the DOM tree and adding CSS3 styles. That serves no practical purpose whatsoever, since the HTML+CSS required probably takes more space than the image it's replacing and is very slow to process and render for the browser.

CSS can be used to do practical icons and buttons, though. Instead of trying to create a pixel perfect replica of a bitmap, you can do pretty nice icons by using a nice unicode symbol (or text), and put some rounded corners, a neat gradient and a drop shadow.

If only people would stop using absolute pixel sizes in their CSS stylesheets, we could get pretty nice scalable (as in screen size) Web UI's.

tuananh• 15 years ago

doesnt work for me, type password 'admin' but desktop doesn't load

mikedemarais• 15 years ago

same here

jjm• 15 years ago

you may have to press the arrow button

mltcx• 15 years ago

it doesn't work with chrome I had to use firefox

arb99• 15 years ago

have to click the login button - works for me in chrome

ldesegur• 15 years ago

You need to click on the arrow icon or the logo. It's buggy as hell. Click Help then all the windowing system is gone south. I found major bugs after playing with it for 2 minutes. Why hasnn't the author spent at least that amount of time to test it before putting it in the wild? It's mostly javascript btw. So the title of the article is wrong.

brightghost2• 15 years ago

"Click Help then all the windowing system is gone south."

That's a fairly faithful emulation, actually...

adamtulinius• 15 years ago

"I'm sorry to inform you that your browser sucks!"

If the message had been, uhm, polite, i would maybe have considered opening another browser to look at it in.

I mean. Is it too much to expect just a little more class than that?

EDIT: Now i tried it in Chrome since it was open. No error message, but logon doesn't work. Honestly, i'm not impressed.

srl• 15 years ago

You have to click the mouse - hitting 'enter' doesn't work.

It's impressive, if laggy, in ffx12.

podperson• 15 years ago

For that matter, adding Chrome Frame support wouldn't be too hard (assuming the "sucking" browser was IE).

munchor• 15 years ago

I don't see why it didn't work in Chrome. I'm using Chromium 18 (Developer Build) and it worked just fine.

Pressing [ENTER] on password textbox didn't go so well, but you can use the mouse and hit the arrow.

And then it works great.

OwlHuntr• 15 years ago

Well this is pretty neat. Reminds me of the old PSP portals that people used to make for homebrew back in the day. They'd emulate Windows and Ubuntu and everything in between.

I would just open this up full-screen on someone's laptop and watch the magic unfurl. A little more JS and you could have an awesome copy of Lion in the browser.

moe• 15 years ago

In Chrome after the "login" I get a bunch of open windows that I can't close and no dock. Is that how it's supposed to be?

g3orge• 15 years ago

I think this is all that it's it, but this is a very good job.

Craiggybear• 15 years ago

No surprises: it works in Safari, the irony being that its Safari on a hackintosh zooming along just fine on a scuzzy little netbook -- which is even cooler. Or not, depending on how you view these things.

jackolas• 15 years ago

It seems to eat the cursor for me on a development chrome (18.0.1010.0 dev / Mac)

m3koval• 15 years ago

Same problem here. It showed up again after Command + Tabbing out of Chrome and switching back in. It's humorous that the custom cursor fails in the one case where it's identical to my default cursor.

mef• 15 years ago

Very cool demo.

Add this to full screen mode and you've got the makings of a crazy OSX fake-out scam.

v33ra• 15 years ago

Impressive, especially the menu bar after login.

Is there any JS code involved in dragging windows? From the code, I could see JQuery UI is being used. So, its like OSX Lion in CSS3+JavaScript.

Nevertheless, a commendable effort.

hjalle• 15 years ago

From the blogg entry he says: "I use javascript only for the clock and the jQuery UI Draggable library to have a draggable windows."

leviathan• 15 years ago

Doesn't do anything on an iPad.

mcritz• 15 years ago

Looks fine on iPhone. Windows don't drag (obviously). http://twitter.com/mike_critz/statuses/161238575835394048

aDemoUzer• 15 years ago

Very cool, mate.

I have done something similar but based on Vista : vidshome.com

TheMiddleMan• 15 years ago

It bugs me that this is labeled "in CSS3". The only CSS3 here is some gradients and transitions. It uses plenty of images and Javascript.

ineedtosleep• 15 years ago

Agreed. Stick with HTML5, people. It's almost always never just "HTML5" so we know what to expect. Labeling this as CSS3 is much more misleading.

ElbertF• 15 years ago

A bit of CSS3 and three JS libraries: http://i.imgur.com/aQDg1.png

dylanpyle• 15 years ago

A few very slick transitions - it's a little irritating that the font sizes, window borders, drop shadows, hover states on close/minimize buttons, etc are all slightly wrong though.

ravin455• 15 years ago

Really cool, though it makes WebKit very slow and unresponsive, despite the fact it's built with CSS3 & Javascript.

joejohnson• 15 years ago

Can anyone explain to me why I see a yellow or red checkered pattern when my computer or browser is struggling to render a page? I tried to take a screenshot, but this usually happens super fast and I can't react in time.

I'm on a MacBook Pro and running Chrome (although I get the checkered yellow pattern in other applications like iTunes as well).

pault• 15 years ago

Sounds like rendering artifacts from an overheating graphics card.

bprater• 15 years ago

Details from his blog: http://www.alessioatzeni.com/blog/mac-os-x-lion-with-css3/

brightghost2• 15 years ago

Am I missing something here? All I see are five boxes you can drag around with javascript which have some buttons and menus that don't do anything.

evoxed• 15 years ago

The only thing you're missing is the time you spent trying to see if it did more.

thedillio• 15 years ago

Pretty good start. Nice job.

WA• 15 years ago

It's quite nice and responsive. Not as fast as the native UI obviously, but that was expectable (btw. my MacBook Air boots faster ;)).

Small improvement: Log me in on hitting Return.

compay• 15 years ago

Color me jaded, but the "excitement" about HTML5 is hardly ever about doing new things, it's about doing the same old things, but with different tools.

Almost every HTML5 demo I've seen just reproduces something we could already to with technologies that ran on the desktop years ago. We're supposed to be excited that we can now implement - barely, and extremely laboriously, and with a clunky, buggy, incompatibility-ridden toolkit - the same kinds of things desktop apps programmers have been doing for a long time.

As a web developer pushing 40, I dread seeing our profession head towards making desktop-style apps in the browser, and along way spending the next 10 years repeating the mistakes and relearning the lessons of current desktop app developers. I'm not sure I've got enough time left to stomach that.

richcollins• 15 years ago

I agree. This is just a parlor trick.

However, I disagree that we should ignore the desktop UI in the browser. It's generally better than web UIs and there is no reason that we have to repeat the mistakes desktop UIs have made the in past.

jiggy2011• 15 years ago

That's pretty much all we do in the computer industry, re-invent the same things over and over again.

See also: Co-operative/Pre-emptive multitasking , thin-client/thick-client , single user / multiuser and native / virtualised.

OSX Lion in CSS3

Related Stories