How-To 8-Bit Schwebt - Bright Bright Groß - Web Design, Entwicklung, Markenstrategie
Für die Yetee ‚s-Redesign, wollten wir mit Hover-Stile zu entwickeln, die mit der Marke spielerischen Gefühl einzigartig und gehalten waren.
Wir spielten um mit ein paar verschiedene Möglichkeiten, aber abgerechnet letztlich auf diese beiden 8-Bit-inspirierten Hover-Effekte.
Lassen Sie uns durch, wie sie zusammengesetzt sind.
8-Bit Buttons
Die Idee hinter diesen Tasten ist ein pixelig Seitenhieb-Effekt. Wenn Sie schweben, 5 Bars vertikal gestapelt gleiten in versetzter Weise von links. Jeder Balken hat auch einen Platz am Ende, die zwischen dunkler / hellen Tönen blinken.
Hinweis: Im folgenden Code, meine Farben als Variablen gespeichert wurden, und ich zeige nur die Stile für die Desktop-Medienabfrage der Kürze halber. Alle Medien Abfrage Stile können auf CodePen finden.
Lassen Sie uns zunächst unsere Elemente aufgebaut. Diese Stile funktionieren könnte auf regelmäßige Anker oder Tasten, aber wir Anker verwenden vorerst.
Als nächstes wollen wir für diese Taste einige grundlegende Arten erhalten. Achten Sie darauf, z-Index hinzuzufügen: 1, so dass wir einen negativen z-index auf unseren Hover Bedienfeld einstellen. Dies wird sicherstellen, dass es hinter dem Text statt vor ihm sitzt, und dass es nicht hinter der Schaltfläche Hintergrundfarbe versteckt.
Jetzt, da wir fünf Bars brauchen + fünf Plätze für die Schwebe, brauchen wir mehr Elemente als Pseudo-Elemente bieten könnte. Meine Strategie war ein Wrapper div für die ganze schweben und eine Spanne für jeden Balken zu verwenden, unter Verwendung von Pseudo-Elemente für die Quadrate. Ich hätte den gewünschten Effekt mit weniger Elementen erreicht, aber für jeden Takt einen Wrapper und ein Element unter Verwendung macht die CSS viel mehr geradlinig.
Jetzt ist hier, wo die komplizierten Sachen zu geschehen beginnen. Lassen Sie uns das Hover-Panel und seine Kinder Stil. Wir wollen nur der Hover-Panel absolut die Taste im ganzen Raum positioniert werden. Spannweiten werden die vertikalen Balken sein, wobei jeder Span: nach dem Quadrat verwendet wird.
Jeder vertikaler Balken beginnt mit einem anderen weg von der Kante des Knopfes versetzt, und hat eine andere Übergangsdauer. Um mehr von diesem 8-Bit-Geschmack zu erfassen, sind wir Schritte des Übergangs mit, um es weniger glatt.
Die einzige andere Sache los sind die kleinen Quadrate blinken Farbe. Wir haben eine Animation bekommen, in wechselnden Richtungen für alternative Quadrate ausgeführt wird (ohne Präfixe für geistige Gesundheit). Sie laufen für die gleiche Zeitdauer, sondern beginnen bei verschiedenen Offsets.
Und das ist es für die Tasten!
8-Bit-Social Icons
Beginnen wir mit einigen Anker aus. Ich bin mit einem Symbol Schriftart für die Symbole, also müssen wir nur die entsprechenden Klassen verwenden.
Grund Stile. Wir wollen einfach nur eine große ol‘Kreis und ein paar ziemlich Farben für die Symbole.
Wie mit den Tasten, ich brauche mehr Elemente als ich. Um den 8-Bit-Effekt zu erzielen, werden wir im Wesentlichen zu „verfolgen“ der Kreis mit Quadraten und Rechtecke, die pixelig aussehen wollen wir zu schaffen. Für jede „Seite“ wollen wir drei Elemente: ein Rechteck der Hauptkante und zwei Quadrate „Kurve“ nach unten zu verfolgen. Um alles ordentlich zu halten, werde ich jQuery verwenden 4 Felder zu erzeugen, eine für jede Seite.
Lassen Sie uns jetzt stylen sie! Sie werden ohne Trübung beginnen und skaliert bis auf Null. Wenn wir schweben, werden sie wieder normal skalieren.
Wir machen gerade diese pixelig Umriss groß genug, dass alle Teile zusammenpassen und den Kreis schön skizzieren. Ich ging für einen Durchmesser von 108, 12 Pixel größer als der 96px Kreis. Die Zahl sah gut aus und war durch 2 teilbar Ich wusste, dass ich 10px Eckstücke wollte, also von dort nur hatte ich die Mathematik zu tun, um herauszufinden, welche Größe die langen Stücke sein sollten. Jedes Rechteck wird auf seiner langen Seite zu 48px und 10px auf der kurzen Seite. Die Quadrate sind 10px tatsächlich von 16px oder vice versa - breiten für die oberen / unteren Seiten, größer für die linken / rechte Seiten. Sie sind immer noch visuell 10px, müssen wir nur machen, dass zusätzliche 12px zu decken Lücken, wo die Seiten des Kreises treffen.
Im Test waren sie ein wenig nervös und hatte einige Malerei Fragen. Tossing sowohl Backface-Sichtbarkeit: hidden; und eine Perspektive auf ihnen geholfen. Die andere Sache, die dazu beigetragen wurde Übergang nur auf schwebt die Transformation und den Übergang sowohl transformieren und Opazität auf verwischen.
Nun wollen wir die Quadrate positionieren. Jedes Quadrat ist ein Pseudo-Element auf der rechteckigen Spanne. Wir gehen von 10px in welcher auch immer zu Bewegungsrichtung geeignet ist (zB: für das Oberteil, 10px nach unten und 10px nach links / rechts).
Nach alldem ist die Hover ziemlich einfach. Lass es wachsen!
Und das ist, wie Sie 8-Bit-Hover machen! Sicherstellen, dass der Yetee auszuzuchecken. wo können Sie diese schwebt in Aktion, und viele anderen erhältlichen Sachen sehen.
