Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

CSS3-Experiment: Mac-Login-Screen komplett nachgebaut

CSS3-Experiment

Der italienische Webdesigner Alessio Atzeni zeigt uns in seinem Blog, was mit CSS3-Keyframe-Animations so alles möglich ist. Er hat einen täuschend echten Mac OS X Lion Login-Screen samt Desktop mit HTML5 und CSS3 nachgebaut. Wir stellen euch hier sein ausgefallenes CSS3-Experiment kurz vor.

CSS3-Experiment: Gefakter Mac OS X Lion Boot-Screen

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.

CSS3-Experiment: Gefakter Mac OS X Lion Login-Screen

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.

CSS3-Experiment: Gefakter Mac OS X Lion Desktop

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:

 

Bitte beachte unsere Community-Richtlinien

5 Reaktionen
Rudolf Gottfried

@Daniel Web

Quält dich mal wieder dein Apple-Komplex? Armer Kerl. LOL

Antworten
kk_koenig

So'n Login haben wir schon vor 2 Jahren gebaut....
Ergo: sehr schöne Idee, gute Umsetzung, aber nix neues ;O)

Antworten
bt9000

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!

Antworten
Philip

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

Antworten
Felix

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! :)

Antworten

Schreibe einen Kommentar zu Felix Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.