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.
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.
This section mainly consists of a clock, two images (logos and avatars user name), two backgrounds and a password input field.
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.
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.
I used this library jQuery UI Draggable.
Images and other decoration
Finally i used images for logos, user-avatar, spinner loading, cursors, background images, icons and window buttons.
Conclusion and Next Release
Regarding the next release I 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.
I 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.