Ich habe mich in letzter Zeit langweilig mit all dem Lauf der Mühle, einfachen jane iTunes / Mac App Store-Schaltflächen, die ich im Web gesehen habe, also habe ich ein paar lustige kleine animierte Alternativen zusammengestellt, von denen ich dachte, dass sie sie teilen würden.
Dieses Projekt ist sehr einfach. Selbst wenn Sie ein Anfänger sind, sollten Sie mitverfolgen können. Wir werden lernen, wie man einige ausgefallene Techniken verwendet, wie das Einbinden von Symbolschriftarten in ein Design und das Einfügen von Objekten mithilfe von Pseudoelementen.
Das Konzept
Um ein Projekt zu starten, macht es oft Spaß, einen Stift zu nehmen und ein paar Ideen zu skizzieren. Wir neigen dazu, beim Zeichnen mit den Händen freier zu denken als mit der Maus. Sie müssen auch nicht gut zeichnen können, zögern Sie nicht, schnelle, hässliche Skizzen zu zeichnen. Solange sie Ihren Denkprozess kommunizieren, funktionieren sie!
Das Konzept hier ist ziemlich grundlegend und ähnelt anderen Projekten, die wir in der Vergangenheit durchgeführt haben. Ich möchte mit einem Kreis beginnen, der nur ein Symbol enthält. Wenn Sie den Mauszeiger über das Symbol bewegen, wird eine Meldung zum Herunterladen der App im App Store angezeigt.
Da Apple über drei Hauptgeräte-Archetypen (iPad, iPhone und Mac) verfügt, müssen wir natürlich einige verschiedene Versionen erstellen.
Schritt 1: Das HTML
Um zu beginnen, besiege ein Div wie das unten gezeigte. Innen habe ich einen Absatz eingefügt, der in einem Anker-Tag verpackt ist, von dem ein Teil ebenfalls in einem kleinen Tag verpackt ist. Dies hilft uns, den Text ein wenig zu unterscheiden.
Wenn Sie das jetzt betrachten, fühlt es sich ein wenig schwer an. Sie können die Klassen wahrscheinlich direkt auf den Anker anwenden und das Div ganz auslassen, aber wir werden uns erst einmal darauf konzentrieren. Beachten Sie, dass ich zwei separate Klassen auf das div angewendet habe. Ich hätte mit einer davon auskommen können, aber um die verschiedenen Arten von Schaltflächen, die wir erstellen, zu unterscheiden, ist es hilfreich, sie in separate Klassen zu unterteilen (dies ermöglicht es Ihnen, jede Version einzeln anzuvisieren). Die sich wiederholenden Stile können dann in einem "Appstor-Button" zusammengefasst werden. Klasse, eine Organisationsmethode, die unser CSS nett und trocken hält.
Beachten Sie auch, dass wir mit HTML5 einen Link um alles legen können, was wir wollen. Wenn das für Sie ein wenig abwegig aussieht, wissen Sie einfach, dass es vollkommen erlaubt ist.
Schritt 2: Grundlegende Schaltflächenstile
Lassen Sie uns nun zu ein paar CSS springen und sich die Appstorebutton holen. Haken. Der Standardzustand der Schaltfläche ist ein Kreis. Es ist jedoch viel einfacher, alles mit der Schaltfläche in erweitertem Zustand zu arrangieren. Wir beginnen also mit einer Breite von 275 Pixeln, die wir auf 80 Pixel reduzieren werden, sobald wir fertig sind alles beendet.
Es gibt auch einige andere interessante Dinge hier. Zunächst haben wir die relative Positionierung angewendet, da wir später bei einem Element innerhalb dieses Elements eine absolute Positionierung verwenden werden, was uns einen Startpunkt gibt. Wenn dies keinen Sinn ergibt, lesen Sie diesen Artikel.
Wir setzen den Überlauf auch auf ausgeblendet. Dies liegt daran, dass sich der Button im kreisförmigen Zustand befindet und ein Großteil des Inhalts außerhalb der physischen Grenzen des Buttons liegt. Wir möchten, dass der Button schön und unsichtbar bleibt. Schließlich haben wir dem? Iphone? Eine Hintergrundfarbe hinzugefügt. Klasse. Später erstellen wir noch einige davon für die anderen Versionen.
Fortschrittskontrolle
An diesem Punkt ist unser Objekt abscheulich, aber machen Sie sich keine Sorgen, es wird in kürzester Zeit besser aussehen.
Schritt 3: Formatieren Sie den Absatz
Als nächstes ist es Zeit, den hässlichen Text zu korrigieren. Dies ist ziemlich unkompliziert und beinhaltet das Ändern der Farbe in Weiß und das Definieren verschiedener Größen für den kleinen und normalen Absatztext. Ich habe auch eine festgelegte Breite festgelegt, die den Text in zwei Zeilen aufteilt, und dann mit Rändern alles zusammengefügt.
Fortschrittskontrolle
Habe ich dir nicht versprochen, dass alles bald gut aussehen würde? Schon sehen wir, wie sich das Endergebnis weiterentwickelt. Es ist erstaunlich, wie weit ein kleiner gestalteter Text gehen kann!
Schritt 4: Fügen Sie das Symbol hinzu
Im Bild oben scheint der Text unbeholfen nach rechts zu rollen, mit einem großen leeren Bereich auf der linken Seite. Dies ist, wo unser kleines iPhone-Symbol gehen wird. Bevor wir es jedoch dort einsetzen, müssen wir darüber nachdenken, wie wir es machen sollen.
Der erste Gedanke, der mir in den Sinn kommt, ist die Verwendung einer Symbolschriftart. Diese sind einfach zu implementieren und unendlich skalierbar und funktionieren daher perfekt für eine Schaltflächengrafik. Nach einer kleinen Jagd fand ich eine kostenlose Schriftart namens Modern Pictograms von Font Squirrel, die sowohl ein iPhone als auch ein iPad enthält, die wir für dieses Projekt verwenden können.
Anstatt unser Markup noch weiter zu verschmutzen, können wir dieses Symbol mit reinem CSS einfügen, indem Sie das: before-Pseudo-Element verwenden. Der Code dazu sowie die Implementierung der Symbolschriftart ist unten dargestellt.
Wie Sie sehen, haben wir unserem CSS gesagt, dass Im Absatz wollten wir den Buchstaben "O" einfügen, der der iPhone-Grafik in der Schrift "Modern Pictograms" entspricht. Der @ font-face-Code, den ich hier verwendet habe, wird direkt aus den fantastischen @ font-face-Kits von Font Squirrel kopiert und eingefügt.
Als Nächstes haben wir die iPhone-Grafik in Position gebracht. Durch die Verwendung der absoluten Positionierung ziehen wir die Grafik aus dem normalen Fluss. Es ist jedoch aufgrund des relativen Positionierungskontexts, den wir in einem vorherigen Schritt angewendet haben, an den Platz unserer Schaltfläche gebunden. Von hier aus schubsen wir es zehn Pixel von oben und zwanzig von links, und dann sind wir fertig.
Fortschrittskontrolle
Wie Sie sehen, sieht das Symbol aus der Schriftart in unserer kleinen Schaltfläche perfekt aus. Alles, was wir wissen müssen, ist, unsere Ecken abzurunden, die Breite zu reduzieren und einen Schwebeflug zu setzen.
Schritt 5: Machen Sie den Kreis
Nun, da unser Button ungefähr so aussieht, wie wir es wünschen, wenn er erweitert wird, ist es Zeit, ihn zu kontrahieren. Um dies zu tun, gehen Sie zurück zu unserem? Appstor-Button? Legen Sie die Breite auf 80px fest und fügen Sie einen Randradius von 40px hinzu.
Fortschrittskontrolle
Nun ist unser Button in einem schönen kleinen Kreis zusammengebrochen. Da unser Überlauf ausgeblendet ist, wird der Text nicht angezeigt. Im nächsten Schritt werden wir sehen, wie wir alles zurückbringen können.
Schritt 6: Hover erweitern
Um unseren animierten Button zu beenden, müssen wir einen Übergangs- und einen Hover-Status hinzufügen. Unser Übergang zielt auf die Breite der .appstorebutton-Klasse mit einer Dauer von einer Sekunde und einer Zeitsteuerungsfunktion ab.
Sobald der Benutzer den Mauszeiger über die Schaltfläche bewegt, wird er auf die zuvor verwendete Breite von 275px erweitert.
Fortschrittskontrolle
Unser Button ist fertig! An diesem Punkt sollte alles perfekt funktionieren. Wenn Sie mitverfolgt haben, sollte Ihr Ergebnis wie folgt aussehen.
Schritt 7: Fügen Sie die anderen hinzu
Jetzt, da wir nur noch eine Taste haben, ist es an der Zeit, diese Idee auf drei Tasten zu erweitern. Fügen Sie Ihrem HTML-Code zwei weitere divs hinzu, und geben Sie ihnen eine eindeutige Klasse, wie ich es unten tat.
Von hier aus folgen wir den Schritten, die wir zuvor gemacht haben, um die Icons mit dem Pseudoelement: before einzufügen. Das iPad-Symbol ist? Q? In unserer Icon-Schriftart gibt es leider keinen Laptop oder iMac, den wir für das Mac App Store-Symbol verwenden können. Dafür ging ich hin und holte mir eine Ikone aus dem fabelhaften Noun-Projekt (ich musste es etwas anpassen, um es den anderen näher zu bringen).
Zum Abschluss gab ich jedem Button eine eigene Farbe, indem wir die speziellen Klassen verwendeten, die wir in unserem HTML-Code angewendet haben. Verwenden Sie diese, um andere button-spezifische Stile anzuwenden, die Sie verwenden möchten.
Sehen Sie sie in Aktion!
Ihre ganze harte Arbeit hat sich ausgezahlt und Sie haben einen ordentlichen kleinen Knopf, den Sie dafür anzeigen können. Wenn Sie die Schaltflächen nicht selbst mitverfolgt haben, klicken Sie unten, um das Ergebnis für eine Probefahrt zu ermitteln.
Demo: Klicken Sie hier, um die Demo zu starten.
Fazit
Ein kleines Projekt wie dieses ist großartig, um Ihre CSS-Hacks frisch zu halten und Ihr Gehirn in einem Modus zu halten, in dem Sie ständig neue Design-Ideen ausdenken.
Haben Sie kürzlich andere kreative App Store-Schaltflächen gesehen? Teilen Sie uns im Kommentarbereich unten mit.