Teilen ist ein wesentlicher Bestandteil des Web-Erlebnisses, und Designer suchen ständig nach neuen und interessanten Möglichkeiten, um den Freigabeteil ihrer Seiten hervorzuheben oder zu präsentieren.
Heute erstellen wir ein einfaches Freigabemenü, das eine Symbolschriftart sowie einige Animationen enthält. Das Endprodukt ist von Disqus inspiriert, hat jedoch eine einzigartige Wendung. Lass uns rein springen und sehen, wie es funktioniert.
Schauen Sie sich die finale Demo an: Klick hier
Disqus Share-Menü
Die Idee für das heutige Tutorial stammt aus dem Kommentar-Menü von Disqus, das Sie unten in diesem und in jedem anderen Artikel von Design Shack sehen. Wenn jemand einen Kommentar hinterlässt, können Sie diesen Kommentar über ein kleines kleines Freigabemenü teilen. Standardmäßig ist dies einfach das Wort "share", aber wenn Sie mit der Maus darüber fahren, fliegen drei soziale Symbole heraus und werden sichtbar. Es ist ein auffälliger Effekt, der wirklich einfach zu erstellen ist. Ich dachte, es würde Spaß machen, durch ihn zu gehen.
Schritt 1. Die Icon-Schriftart
Für dieses Menü benötigen wir mindestens drei Social-Sharing-Symbole. Um die Skalierungsprobleme zu vermeiden, die Sie im obigen Disqus-Beispiel sehen, möchte ich, dass diese vektorbasiert sind. Um dies zu erreichen, können wir zwei verschiedene Wege gehen. Die erste ist die Verwendung von SVG-Grafiken, was leicht genug ist. Eine noch einfachere Route ist jedoch die Verwendung einer Symbolschriftart.
Nach einigem Suchen fand ich Socialico von FontFabric, das kostenlos ist, über eine Vielzahl von Icons verfügt und für das Einbetten in Websites lizenziert ist.
Um sicherzugehen, dass wir maximale Kompatibilität für das Einbetten dieser Schriftart in unsere Seite haben, gehen wir zu FontSquirrel über. Diese Website ermöglicht es uns, eine einzelne Schriftartdatei hochzuladen und ein hübsch verpacktes @ font-face-Kit mit allen verschiedenen Dateitypen und Code herunterzuladen, die wir zum Einbetten der Schriftart in CSS benötigen.
Nachdem Sie das @ font-face-Kit heruntergeladen haben, greifen Sie alle enthaltenen Zeichensatzdateien auf und legen Sie sie für dieses Projekt in das Hauptverzeichnis der Site. Wenn wir die generierte CSS-Datei öffnen, finden wir den folgenden Code, den wir kopieren und in unser eigenes CSS einfügen können.
So weit, ist es gut! Wir haben jetzt eine großartige Schrift zur Verfügung, die unendlich skalierbare soziale Symbole in unsere Seite einbetten kann. Sie müssen diese Bequemlichkeit zu schätzen wissen.
Schritt 1. Das HTML
Jetzt ist es Zeit, diesen Trottel zu markieren. Das ist extrem einfach. Erstellen Sie zunächst einen Absatz mit dem Klassennamen "share" und geben Sie dann "share" ein. auch als Text.
Fügen Sie anschließend nach dem? Share? Text. Ich verwende die Großbuchstaben F, L und S, die in Facebook, Twitter und StumbleUpon in unserer Social-Icon-Schriftart übersetzt werden.
Das ist es! Alles, was wir brauchen, ist dieses einfache Markup. Wir wenden uns an CSS für all die schicken Dinge.
Schritt 2. Absatz CSS
Das erste, was wir gestalten müssen, ist der Absatz selbst. Es gibt ein paar wichtige Dinge, die Sie hier finden sollten. Zuerst müssen wir die Position auf setzen relativ. Dies ist später der Fall, wenn wir die absolute Positionierung auf den Symbolen verwenden, bleiben sie innerhalb der Absätze.
Als Nächstes fügen wir Rand, Füllungen, Bemaßungen, Farben hinzu und legen die Schriftart fest. Beachten Sie, dass ich für die Zwecke der Demo alles groß dimensioniert habe. Fühlen Sie sich frei, all das zu verkleinern!
Mit diesem Teil des Codes soll Ihre Seite so aussehen. Beachten Sie, dass die Symbole zu diesem Zeitpunkt nur Buchstaben sind. Dies liegt daran, dass wir die Schriftart für die Links noch nicht festgelegt haben. Kümmern wir uns darum.
Schritt 3. Absatz CSS
Jetzt ist es Zeit, diese Ankertags zu codieren. Hier verwenden wir die absolute Positionierung, die wiederum die Position dieser Links innerhalb der Grenzen unseres relativ positionierten Absatzes zurücksetzt. Bei der absoluten Positionierung können wir die Artikel mit der oben und links Eigenschaften.
Als nächstes kümmern wir uns um das Aussehen der Links. Wir möchten Farbe, Textdekoration und Schriftart festlegen. Stellen Sie für die Schriftart sicher, dass Sie das Socialico-Font-Kit verwenden, das wir in Schritt 1 erstellt haben.
Dieser Code verwandelt unsere Briefe in die sozialen Symbole, nach denen wir suchen. Das Problem ist natürlich, dass sie auf der linken Seite zusammengeballt sind.
In der Realität ist dies jedoch überhaupt kein Problem, es ist genau das, was wir wollen. Nur im Schwebeflug möchten wir, dass sich diese auf animierte Weise ausbreiten. Für den Moment müssen wir diese Symbole jedoch unsichtbar machen und einen Übergang hinzufügen, damit alle später eintretenden Änderungen schrittweise erfolgen.
Schritt 4. Grundlegende Hovers
Wir haben den Anfangspunkt unseres Menüs so gut wie festgelegt. Jetzt müssen wir nur noch ein ganzes Durcheinander von Schwebezuständen aufarbeiten, um das alles funktionieren zu lassen. Wir beginnen mit einigen grundlegenden Effekten.
Der erste Mauszeiger ändert den Cursor zum Zeiger, obwohl das Wort? Share? ist technisch kein Link. Der zweite bringt die Deckkraft für unsere versteckten Symbole. Das dritte Symbol ändert die Farbe eines Symbols, wenn der Benutzer den Mauszeiger darüber bewegt.Da unsere Icons eigentlich Text sind, ist das wirklich einfach! Dies hätte die Bewegung eines Sprites oder das Ändern des Hintergrundbildes erfordert, wenn wir einen bildbasierten Ansatz verwendet hätten.
Schritt 5 Verschiebe die Icons
Das nächste, was wir tun müssen, ist, die Icons an ihren Platz zu bringen, wenn der Benutzer über "share" fährt. Dazu verwenden wir einfach die links Eigentum, um sie anzustoßen.
Der eigentliche Trick besteht darin, herauszufinden, wie jeder Link einzeln ausgewählt und positioniert werden kann. Glücklicherweise hat CSS3 einen fantastischen Selektor, der hier perfekt funktioniert: nth-of-type.
Dies sind komplizierte Selektoren, also brechen wir sie auf. Der erste Block teilt dem Browser mit, dass wir ein Hover-Ereignis für die Freigabe starten. Klasse. Als nächstes verwenden n-te des Typs um den ersten, zweiten und dritten Anker anzuvisieren, der effektiv jedes unserer Icons greift.
Kompatibilitätswarnung
Eine Sache zu bedenken, n-te des Typs ist ein Level-3-Selektor, was bedeutet, dass Sie kein Glück für IE8 und Prior haben. Um dies zu beheben, können wir zwei Dinge tun. Wenn Sie kein bisschen JavaScript mögen, können Sie Selectivizr verwenden, um diese Funktionalität wieder in den IE6 zu integrieren.
Wenn Sie die JavaScript-Route nicht verwenden möchten, können Sie nur noch Markup hinzufügen. In diesem Szenario hat jeder Anker seine eigene eindeutige Klasse.
Jetzt haben Sie in Ihrem CSS einen einzigartigen Hook, der Sie relativ einfach zu jedem einzelnen Symbol führt. Diese Lösung ist definitiv viel unübersichtlicher als die Selectivizr-Route, aber das Fehlen von JavaScript ist ein Bonus.
Schritt 6 Fügen Sie weitere Effekte hinzu
Standardmäßig werden unsere Symbole nach rechts verschoben und werden eingeblendet. Wenn wir diesen Effekt jedoch etwas aufregender gestalten möchten, können wir uns CSS-Transformationen zuwenden und verschiedene Ergebnisse erzielen. Hier sind einige Optionen, die Sie in Betracht ziehen sollten, die alle in der finalen Demo gezeigt werden.
Sehen Sie es in Aktion!
Damit sind wir alle fertig! Folgen Sie dem Link unten, um die Demo-Seite anzuzeigen, und bewegen Sie den Mauszeiger über die verschiedenen Menüs, um die Früchte unserer Arbeit zu sehen.
Demo: Klick hier
Fazit
Jetzt haben Sie ein tolles animiertes Freigabemenü, mit dem Sie bei Ihrem nächsten Projekt etwas Aufmerksamkeit erregen können. Hinterlasse einen Kommentar und lass mich wissen, was du davon hältst und wie du es verbessern könntest!