Archive for March, 2016

Creating MAC OS X Lion Login and Desktop using Css3

This post is taken from http://www.alessioatzeni.com/blog/mac-os-x-lion-with-css3/

Alessio Atzeni 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 Alessio Atzeni 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.

mac-boot
Login

This section mainly consists of a clock, two images (logos and avatars user name), two backgrounds and a password input field.
Alessio Atzeni used javascript only for the clock, create a fake login and when the password is valid Alessio Atzeni 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.

mac-login
Desktop

Finally here we have in our desktop. As mentioned previously this is only the first version, and consequently still missing several features that Alessio Atzeni will implement in the next release. Alessio Atzeni 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.

mac-dock
About this Project

Here Alessio Atzeni will list what he 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 he 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.
Draggable Window

Alessio Atzeni used this library jQuery UI Draggable.
Images and other decoration

Finally he used images for logos, user-avatar, spinner loading, cursors, background images, icons and window buttons.
Conclusion and Next Release

At the end of this experiment he realized the potential and limitations of CSS3, but thanks to the use of javascript (although to a limited) you can really get something unique.

Regarding the next release he plan to add the dock, delete and appears the windows if you click on a link on the menu only through the use of CSS. Optimize the code for better performance.

Alessio Atzeni hope that this experiment can be useful, and please you in your study, if you have any questions please do not hesitate to write.

Thank you all for your support.

%d bloggers like this: