Dieses hier ist für meine Mac-Nerds. OS X Mountain Lion, das neueste Desktop-Betriebssystem von Apple, verfügt über ein integriertes Benachrichtigungssystem, das dem von iOS seit Jahren ähnelt. Heute bauen wir eines der Benachrichtigungsfenster mit CSS.
Um dies herauszufinden, verwenden wir etwas einfaches HTML und ein wenig schickes CSS3. Zum Abschluss fügen wir jQuery magic hinzu, damit der Benutzer das Fenster ziehen kann. Es wird jede Menge Spaß machen, also booten Sie Ihre Lieblings-Codierungs-App und folgen Sie ihr!
Was wir bauen
Um sicherzustellen, dass wir die Details richtig verstehen, habe ich eine Testbenachrichtigung eingerichtet und einen Screenshot auf meinem Mac erstellt. So sieht das Fenster aus:
Wie Sie sehen, haben wir ein abgerundetes Grundrechteck mit einem Verlaufshintergrund und einer leichten Transparenz. Es beginnt mit einem Symbol auf der linken Seite, gefolgt von einer Überschrift, die den Warnungstext und einen Zeitstempel darunter enthält. Schließlich haben wir auf der rechten Seite zwei Knöpfe: Snooze und Close.
Ich liebe es, solche Dinge zu betrachten und darüber nachzudenken, wie sie mit CSS erstellt werden können. Es mag wie eine sinnlose Übung erscheinen, aber es ist eine großartige Möglichkeit, Ihre Coding-Chops zu verbessern. Nie aufhören zu üben! Lass uns anfangen.
Schritt 1. Das HTML
Um dieses Projekt zu starten, springen wir in das Markup. Unser Ziel ist es, das obige Beispiel zu betrachten und zu sehen, ob wir es in verschiedene Elemente aufteilen können. Ich beginne gerne mit meinen Basiscontainern und überlege, wie Objekte gruppiert werden. Natürlich benötigt das Fenster selbst ein div, und wir können das Icon direkt darin ablegen.
Von hier aus gibt es jedoch zwei Textobjekte, die gruppiert werden müssen, und zwei Schaltflächen, die gruppiert werden müssen. Wir verwenden eine? Nachricht? div und? Tasten? div für diese.
Schritt 5 Geben Sie CSS ein
Lassen Sie uns jetzt unseren Text unter Kontrolle bringen. Wir haben zwei Stil-Hooks, die wir anvisieren müssen: einen für h2 und einen für den Absatz. Der knifflige Teil hier ist, dass Sie einen weißen Textschatten anwenden möchten. Dies scheint ein wenig seltsam, aber es gibt einen leicht abgeschrägten Blick, der den Text insetieren lässt.
Fortschrittskontrolle
Mit diesen schnellen Änderungen sieht unser Benachrichtigungsfenster viel besser aus! Tatsächlich sind wir fast fertig. Wir müssen nur die Schaltflächen kodieren und das Ganze schleppbar machen.
Schritt 6 Button CSS
Um die Knöpfe so aussehen zu lassen, wie wir wollen, brauchen wir einiges an Styling. Lassen Sie uns es in ein paar überschaubare Stücke aufteilen, damit es nicht überwältigend ist.
Grundlegende Schaltflächenstile
Als erstes müssen wir die Form und das Aussehen der Schaltflächen definieren. Wir teilen diesen Code genau wie beim obigen Fensterschritt auf, beginnen mit der Grundgröße und -form, beginnen dann mit dem Text und beenden mit dem CSS3-Zeug.
Wie Sie sehen, ist dies sehr ähnlich wie wir das Fenster gestaltet haben. Ein bemerkenswerter Unterschied besteht darin, dass wir die Position der Schaltflächen auf absolut setzen, sodass wir sie genau dahin bewegen können, wo wir sie innerhalb der Grenzen des relativ positionierten übergeordneten Elements haben möchten. div.
Das Text-Styling ist diesmal etwas robuster, da für Links ein zusätzliches Standard-Clearing erforderlich ist, um ordentlich auszusehen.
Button Hover
Damit die Schaltflächen beim Schweben besser hervorstechen, wird der Verlauf angepasst, indem die Transparenz entfernt wird. Einfach und subtil!
Tasten positionieren
Jetzt, da unsere Knöpfe schön und hübsch aussehen, ist es an der Zeit, sie in Position zu bringen. Da wir absolute Positionierung verwenden, ist dies eigentlich ganz einfach. Interessanter ist, wie wir auf jede Schaltfläche zielen: die n-te untergeordnete CSS3-Auswahl. Dadurch können wir bestimmte Schaltflächen verwenden, ohne zusätzliche Klassen in unserem HTML-Code hinzuzufügen.
Diese Selektoren sollten auf allen Ebenen gut funktionieren, sogar auf dem IE9. Für IE8 und zuvor, wählen Sie Selectivizr.
Fortschrittskontrolle
Unser Benachrichtigungsfenster ist fertig! Es sieht ziemlich gut aus, wenn ich es selbst sage Um es noch kühler zu machen, springen Sie zum nächsten Schritt.
Schritt 7 Mach es ziehbar
Nur zum Spaß möchte ich es so gestalten, dass ein Benutzer dieses Fenster wie bei Windows in Ihrem Betriebssystem überall auf dem Bildschirm anklicken und ziehen kann. Klingt kompliziert richtig? Mit etwas jQuery-Zauber braucht man eigentlich nur ein bisschen JavaScript.
Das ist es! Wir zielen einfach auf unsere? Benachrichtigung? div und rufen Sie die ziehbare Funktion auf. Einfacher geht es nicht.
Schauen Sie sich die Demo an
Wir haben alle mit unserem Mountain Lion Benachrichtigungsfenster fertig.Sehen Sie sich die Live-Demo an, die über CodePen eingebettet ist.
Interessanterweise funktioniert die Klick- und Ziehfunktion nur auf der CodePen-Site. Sehen Sie sich also die vollständige Demoseite an und ziehen Sie das Fenster unbedingt mit.
Aktualisieren
Doh! Mir ist gerade aufgefallen, dass ich den? Nahen? und? schlummern? Schaltflächen, wie sie in Mountain Lion erscheinen. Ich habe den Code so korrigiert, dass er jetzt korrekt sein sollte.
Fazit
Also, es gibt ein Benachrichtigungsfenster im Mountain Lion-Stil, das rein mit gutem altem HTML & CSS (und einem kleinen bisschen optionalem jQuery) codiert ist. Welche anderen beliebten Elemente der Benutzeroberfläche würden Sie gerne in Tutorials verwandelt sehen? Hinterlasse einen Kommentar und lass es uns wissen!