Boot-, Login- und Desktop-Fake mit CSS3
Wenn man sich die Demo zu dem mit CSS3 gefakten Login-Screen von Alessio Atzeni anschaut, könnte man wirklich meinen, dass gerade Mac OS X Lion im Browser gebootet wird. Wie Alessio aber selbst in seinem Blog dazu schreibt, handelt es sich hierbei um ein erstes Experiment dazu, die Grenzen von CSS3 und HTML5 auszutesten, indem er damit Boot- und Login-Screen sowie auch noch den Desktop von Mac OS X Lion nachbaut. Das jetzige Demo ist sein erstes Release und noch nicht überall voll funktionstüchtig. Aber in Browsern wie Safari oder Chrome, die CSS3-Keyframe-Animations (Schlüsselbildanimationen) aktuell schon unterstützen, ist die Demo jetzt schon ein Erlebnis.
Der Boot-Screen ist über eine CSS3-Schlüsselbildanimation mit Fake-Loader gelöst. Auch die Animation beim Login-Screen für das Erscheinen des Passwortfelds wenn man auf den Avatar klickt ist CSS3 – genauso der Tooltip wenn man auf das Passwortfeld klickt.
Neben CSS3 wird auch noch etwas JavaScript für die Uhr und jQuery UI Draggable für Drag & Drop der Desktopfenster verwendet. Die Animation bei falscher Passworteingabe ist zwar über JavaScript angebunden, aber über CSS3 erstellt. Auch der Wechsel zu der Desktopansicht ist wegen leichter Schwächen von :target in CSS3 Pseudo-Klassen noch über JavaScript gesteuert.
In Zukunft hat Alessio geplant, sein Demo noch mit mehr CSS3 für Desktop Dock und weitere Features auszubauen sowie den Code zu optimieren. Wir sind schon auf die nächste Version gespannt!
Weiterführende Links:
- Blogpost von Alessio Atzeni: CSS3-Experiment: Mac OS X Lion with CSS3
- CSS3: Individuelle Tooltips ohne JavaScript bei T3N
- Schicke Hover-Effekte mit CSS3 Transitions bei T3N
- Beindruckende CSS 3D Demo: „Making Love To WebKit“ bei T3N
![OS X 10.8 Mountain Lion kommt heute – 30 Features kurz erklärt [Update]](http://t3n.de/uploads/t3n-news-post-403743_os-x-mountain-lion-10.8-500x281_medium.jpg)
von Daniel Web via facebook 23.01.2012 (19:57Uhr) 1.
Watn Scheiss...
von t3n Magazin via facebook 23.01.2012 (20:05Uhr) 2.
kein Scheiß sondern Frontend-Art! Nach dem Login geht es mit Dock usw. dann hier weiter http://roberto.ovh.org/mac/ ;)
von Daniel Web via facebook 23.01.2012 (20:08Uhr) 3.
Ich klöppel mir gleich ne Bratpfanne mit CSS3 und blende da ein Apple-Logo ein. Gibt das dann auch einen T3N-Artikel? Dieses Fanboy-Verhalten in Sachen Apple ist einer Fachredaktion absolut abträglich. Dagen ist selbst mac & i von heise ja noch sachlicher...
von t3n Magazin via facebook 23.01.2012 (20:10Uhr) 4.
so what!? was hat das mit apple fanboy zutun!? die autorin nutzt gar kein apple ich selbst bin android user und natürlich hätten wir diese derbe CSS3 akrobatik auch gebracht, wenn es der windows login in CSS gewesen wäre. was hat dich geritten!?
von Tino Che Bonkers via facebook 23.01.2012 (20:30Uhr) 5.
kann sich kein apple leisten ...^^
von Daniel Web via facebook 23.01.2012 (20:40Uhr) 6.
Gilt das jetzt öffentlich? Wenn ich oder jemand anderes eine Windows 7-Anmeldung mit CSS3 bauen, bekommt die auch einen Artikel bei T3N? Word?
von Dirk Spannaus via facebook 23.01.2012 (20:55Uhr) 7.
So was vermisse ich seit Jahren bei vielfältigen Supportfragen aus dem Freundeskreis um mal kurz blind am Telefon zu erklären, wo er eine Einstellung findet. Eigentlich unverständlich, warum es nicht zu jedem OS eine Webseite gibt, wo ich schnell mal eben schaun kann, wo sich ein Menüpunkt befindet...
von Cedric Ziel via facebook 23.01.2012 (21:47Uhr) 8.
Ich finds scharf-und das hat nicht mal so viel mit Apple zu tun. Hier ist nur CSS3 mit ein Bisschen JS am Werk. Ich finde, dass zeigt recht eindrucksvoll, was mit simplen Mitteln machbar ist.
Erzähl mal dem Kunden, dass HTML5 + CSS3 soooo mega geil ist-und was zeigst Du ihm als proof? - Vielleicht die NyanCat weil die so seriös ist?
Ist doch super. Ernsthaft. Ich bin selber kein Apple-Fan; aber jedem das seine! - Die UIs sind hervorragend konzipiert-warum nicht zeigen, dass dies auch im guten (neuen) alten Browser möglich ist?
von Felix 23.01.2012 (23:08Uhr) 9.
Wer hat Daniel denn geritten? Vielleicht solltet ihr ihm mal die 5 gegen Willy Methode vorstellen, hilft oft! ;)
Ansonsten kann ich nur sagen, is weng buggy, aber MEGA! geil! :)
von Facebook vs. Google, Megaupload, DLD | t… 24.01.2012 (08:01Uhr) 10.
[...] CSS3 Experiment: Der italienische Webdesigner Alessio Atzeni zeigt, was mit CSS3-Keyframe-Animations möglich ist. Er hat einen täuschend echten Mac OS X Lion Login-Screen samt Desktop mit HTML5 und CSS3 nachgebaut. t3n [...]
von Philip 24.01.2012 (08:45Uhr) 11.
@Daniel Web
Was soll das denn? Hier wird lediglich was gezeigt was alles mit CSS3 möglich ist, hat doch nix mit fanboy zu tun, was ein Schwachsinn. Letztens das CSS3 - iPhone war auch genial, ich selbst hab n Android Phone und würde auch nicht wechseln wollen, trotzdem beschwer ich mich nicht das die Demo n iPhone darstellte, ich freue mich viel mehr das hier Entwickler und Methoden gezeigt werden die einfach richtig gut sind.
CSS3 - iPhone: <- Und jetzt bitte nicht flamen nur weils n iPhone ist..omg..
von bt9000 24.01.2012 (11:30Uhr) 12.
Ja, ich benutze Computer von Apple. Aber ich habe auch normale PCs. Warum reibt man sich an der Vielfalt bzw. an der Visualisierung von visuell ansprechendem?
Sähen die Dinge und die Software von Apple grottenschlecht aus, würden sie weniger Beachtung erhalten, sicher. Aber Gerade der Wettbewerb der verschiedenen Systeme ist doch eine Bereicherung für uns als User. Wie schön sehen heute Linux-Desktops aus (ich finde Ubuntu als ein Glück verglichen mit der Ansicht früherer Linux-Desktops, vor allem in Hinsicht auf die Möglichkeit Neulinge dafür gewinnen zu können). Auch Windows 7 ist von MacOS beeinflusst. Wie auch umgekehrt.
Früher wurde alles von Microsoft von "Alten Hasen" verteufelt. Heute ist für einige eben Apple das Sichtbarwerden des Bösen. Ist nicht schön, aber wohl auch nicht zu vermeiden.
Toll finde ich hier, dass solche Einträge gepostet werden können und ebenso auch alternative Ansichten Platz haben.
Zum Thema selbst: Web-Entwicklung lebt von solchen Ideen und Anwendungsbeispielen!
Gerne mehr von solchen guten Anschauungsbeispielen. Danke!
von kk_koenig 24.01.2012 (12:06Uhr) 13.
So'n Login haben wir schon vor 2 Jahren gebaut....
Ergo: sehr schöne Idee, gute Umsetzung, aber nix neues ;O)
von Rudolf Gottfried 24.01.2012 (19:21Uhr) 14.
@Daniel Web
Quält dich mal wieder dein Apple-Komplex? Armer Kerl. LOL
von CSS3: Bildübergänge mit 3D-Rollover-Ef… 27.02.2012 (15:18Uhr) 15.
[...] CSS3-Experiment: Mac-Login-Screen komplett nachgebaut [...]
von CSS3 & HTML5 – langsam aber si… 13.04.2013 (15:41Uhr) 16.
[...] CSS3 & HTML5 – langsam aber sicher… [...]