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.

Mac OSX Lion CSS3 - Boot

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.

Mac OSX Lion CSS3 - 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 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.

Mac OSX Lion CSS3 - Desktop

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.

Draggable Window

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

At the end of this experiment I 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 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.

84 Comments

  1. anton

    looks so awesome!
    One notice about windows, move active window above others.

  2. That is absolutely amazing!! Very well done!

    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.

    Pure talent there

  3. holy crap that’s amazing! I was actually trying to click on menu items lol..but this is really great thanks!

  4. jakubgg

    Holy Moly! You just blew my socks off! Hat off to you Sir!

    @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.

    I think that some wheels just had started spinning in my head…

  5. Rafael

    Wow this feels very native!

  6. Rata

    One word: Awesome!

  7. Awesome sh*t. Best thing I’ve ever seen created of CSS3 and HTML5.
    Great work! :)

  8. Rob

    Awesome, and inspiring experiment.

    Cheers!

  9. Stanley

    WOW thats cool!

  10. This is great! Too bad you can’t drag in CSS or you could’ve done the whole thing with just CSS3. Awesome job.

  11. shini

    I’d be happy to see that on my iPad — but the demo doesn’t work with iOS … :-)

  12. You nailed it man…Very nice. :)

  13. Jan

    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

  14. GAGALIVE

    Coole Sache!

  15. Hi there, nice work!

    I’ve been working on a Lion CSS UI Kit (http://pumpula.net/p/lion-ui-kit-css/), it might be of some use to you if you. :)

  16. wow – thanks for your inspiration an css work. …and sharing this

  17. would have been more impressive if you did the dock.

  18. Thanks for the info, Mac + CSS3 = true:)

  19. Dave Rife

    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!

  20. saurav

    Great work man..keep it up.. :)

  21. Alessio,

    Muy buen trabajo. Elegante y creativo.

    Gracias

  22. George

    Amazing ! Add a dock and it’s perfect preview of mac os x !!

  23. Good stuff.
    You should have added more functions.

    Like being able to close the opened windows, logout, etc, some basic stuff.

    I made something similar, but instead of Lion, it’s IE6. http://ie6test.ie

    hope you like it!

  24. 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…

  25. sandip nirmal

    It’s quite amazing, at first no one can believe its not Mac’s Desktop!!!
    Great Work

  26. nemam

    Chrome does support css3 animations….

  27. marianosch

    Excelente +10

  28. Tru Zhou

    Fu*king awesome.

    Really looking forward to the new version!!!

  29. Sun

    Simplicity is the ultimate sophistication

  30. 55u

    Looks good but a bit slow。Perhaps the problem of network from china

  31. Daniel San

    Very Good! Excellent job!!!
    Congragulations

  32. That’s really helpful thank you for the article.

  33. AWESOME MAN !! absolutely amazing!! Very well done!

  34. there’re some bugs in chrome,The part of dock when you click a icon the srceen will move to left…..

  35. Uwe

    Supppper…
    If you are looking for a job then send me your CV ;-)

  36. OMG! REALLY FANTACY

  37. AWESOME cool CSS3…

  38. Tobi

    Could you please create a mac osx lion skin for JavaFX2? With JavaFX2 you can use full and extended CSS3 and many people are waiting for native looking skins.

  39. Eliss

    Can you tell how you create boot animation or login screen, pls :)

  40. Inv

    Hello,

    nice job,
    how can i download this article with sources?

  41. Wow, what an eye opener!

  42. This is so amazing. As a lover of CSS and Apple, you havre made my day with this awesome experiment. Breath taking! I love it

  43. Vincenzo

    Fantastic Work! Congratulation ! :D

  44. AWESOME
    can you share me the code please :)
    i wanna try to my blog

  45. Cool one mate! You rock.

  46. Vidon

    Good Post!

  47. Denia

    wow amazing !!

    i love that login windows :)

    can you send me that fake login script :p

  48. Kartik

    hi! alessio better you can design this for apple to demo their MAC OSX online its simply amazing..

  49. Pure talent! Superb!

  50. I’m so very glad to find out that there’s still a little good content left online.
    I have gotten used to google giving me garbage.

  51. it’s really awesome! are there some chances to have the source code on github?

  52. Boopathi

    awesome work
    how can i download this article with sources?

  53. dario

    Do you think will shared the demo’s source files?

  54. Terry

    Hi,

    Great job! I love the way your write code.. so clean.

    I was wondering if you know how I can click on a icon in the dock and have it redirect to a new page but still have the icon to bounce.

    Thanks in advance…. Keep up the great work..

  55. Singh

    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.

  56. sakhr

    amazing :)
    make us informed when you decide to share the demo source files with us ;)

  57. sakhr

    Here is the link to Download a copy of source code until Mr. Bluxart give us the full source code :)

    Link : 4shared.com/zip/gdOb3AO8/Mac-OS-X-Lion-UI-CSS3.html

    thank you for your invent and innovation ;)
    Sakhr;

  58. sakhr

    Hey,
    Here is a copy of the source code until Mr.BluxArt gives us the demo original files ;)

    Link : 4shared[dot]com[Slash]zip/gdOb3AO8/Mac-OS-X-Lion-UI-CSS3.html

    thank you Mr.BluxArt for your ideas and invent !

    Sakhr;

  59. microsoft software

    I wanted to thank you for this wonderful read!! I definitely loved every bit of it.
    I have you book marked to check out new stuff you post…

  60. Extremely like the article you’ve shared the community. I have added your blog to my RSS. Looking forward to your next post. Web Watcher if u wanna see my website.

  61. When Can I Open Up Programs?

  62. Amazing…
    l’ve never seen like this before

  63. Extremely like this, i never seen this project. Good job, bro!

  64. DevilishDB

    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

  65. Kakadu

    Is it know artifact in left top corner? (after pressing button on dock)

    http://wstaw.org/m/2013/11/05/plasma-desktopKP5268.png

    P.S. Looks awesome, btw

  66. Woah. This absolutely amazing.

  67. Really nice and impressive on what you did with CSS3.

  68. Luke_lew

    Hey,it’s so brilliant!Nice work~

Leave a Reply