Mac OS X Lion with CSS3

January 17, 2012

Hello everyone and Happy New Year to all, lately i’ve been busy and so i haven’t time to write here, i hope that by this experiment to be pardoned :). I wanted to create with only use of CSS3 the boot, the login page and finally the desktop of the Mac OS X Lion.

This is the first release and as you will see not everything is fully functional and at least as regards the desktop. In the next release i will implement new icons and new features while we examine what we have today.

Boot

This is simply the Mac OS X Lion boot. This section is simply composed by a CSS3 keyframes animation.
It has a logo (created in Photoshop) and a simple loader (fake loading). After the animation, dissolves the section to show the login section.

Login

This section mainly consists of a clock, two images (logos and avatars user name), two backgrounds and a password input field.
I used javascript only for the clock, create a fake login and when the password is valid I added some class to fix the desktop section and remove permanently the section login animation.

Thanks to the :target pseudo-class can be passed from one section to another. Regarding the rest is all CSS 3, such as hide/show the input field when you click on the avatar, same goes for the appearance of the tooltip when you click on the input field.

The animation of password error is connected via javascript but the animation is created using CSS3. The pseudo-class target has its limits and then to fix those small weaknesses, once you enter your password, javascript sets the desktop as the main section.

Desktop

Finally here we have in our desktop. As mentioned previously this is only the first version, and consequently still missing several features that I will implement in the next release. I use javascript only for the clock and the jQuery UI Draggable library to have a draggable windows.

For the rest is all CSS3 excluding the background image and icons.

About this Project

Here i will list what I used for this project.

Modern Browser Supported

To see this experiment you will need a browser that supports CSS3 Keyframes Animations, so the choice is Firefox, Safari, or Chrome.

HTML5 and CSS3

For this project I used HTML5 and the unique capacity of CSS3.

Javascript

The use of JavaScript is for the clock, and to add a fix to the section desktop once you get the validation.

86 Comments

If Apple used this and intergrated this into OSX as a form of remote/Mirrored desktop so if you where away from your machine you logged in a webpage and if anything was updated there it would update your desktop at home.

@Paul – that gives me a very neat idea. On the simplest level even AppleScript can resize and move windows around, so we could listen on a certain port, webserver then sends command to our mac, our script interprets that command and move the stuff around the desktop.

Some things I noticed:
* The inset shadow of the booting Apple logo is wrong
* Pressing the Enter key while focusing the password input field doesn’t submit
* the window borders are grey instead of rgba(0,0,0,0.5)
* inactive windows are not greyed out
* menu bar dropdowns do not fade out when closing them
Hope this helps

Very nice, looks clean and mirrors the graphic power of the desktop. I like it- glad to see that people like you are out there experimenting and playing! Keep up the good work and enjoy yourself! Thanks for sharing!

Since you know the parameter for Opera, why do you say, that this is not compatible with it?! I found -“o-linear-gradient” a few times, so why don’t you use the other equivalents for other commands too? The whole page should work in Opera as it does in Chrome and FF etc…

Epic! Keep it up… perhaps implement so that the functionality is there on touch devices as well. For example jquery ui dragable is not compatible with touch devices. So one can’t hold the title bar of one of the open “boxes” to move around the box… i tried using safari browser on an iPad.

As a demonstration of what can be done in CSS3, it is brilliant. But, although it is cool, virtually all the applications do nothing. It would be even more awesome if you could implement some real, usable apps! Keep up the good work though