Folgen Sie uns, während Sie einen einfachen und unterhaltsamen Download-Button erstellen, der ein paar ausgefallene CSS3-Dateien enthält. Unser Button verwendet viele lustige Goodies, einschließlich Randradius, Box-Shadow, linearer Gradienten, Z-Index und Übergängen, um einen einzigartigen doppelten Schieberegler-Effekt beim Schweben zu erzielen.
Ich werde im weiteren Verlauf besprechen, warum einige Techniken, die Sie vielleicht verwenden sollten, vermieden werden sollten. Übergänge sind schwierig zu handhaben und neigen dazu, mit bestimmten Eigenschaften nicht zu arbeiten. Lesen Sie weiter, um mehr zu erfahren.
Das Konzept
Ausgehend von dieser Idee, wollte ich einen Download-Button mit einem coolen Schubladeneffekt erstellen, bei dem ursprünglich verborgene Informationen angezeigt werden, wenn der Benutzer ein Hover-Ereignis beginnt. Um meine eigene Wendung darzustellen, entschied ich mich, den Effekt zu verdoppeln und eine Schublade oben und unten am Button zu erstellen (klicken Sie hier, um einen Blick auf das fertige Ergebnis zu erhalten).
Und so funktioniert es: Mit einer Kombination aus HTML und CSS erstellen wir drei separate Teile. Dazu gehören die Hauptschaltfläche und zwei kleinere Info-Bereiche. Die kleineren Bedienfelder verbergen sich zunächst unter der größeren Schaltfläche. Wenn der Benutzer den Mauszeiger darüber bewegt, rutscht einer nach oben und der andere nach unten.
Wie Sie sehen können, ist dies ein ziemlich einfaches Projekt, das perfekt für Anfänger geeignet ist, die ihre CSS-Fähigkeiten verbessern möchten. Es lohnt sich besonders zu lernen, wie wir die absolute Positionierung und Stapelung über Z-Index nutzen.
Was wird nicht funktionieren?
Bei der Planung dieses Projekts habe ich mir ein paar Möglichkeiten ausgedacht, um mein Konzept zum Laufen zu bringen. In Anbetracht der Tatsache, dass ich in letzter Zeit auf einem Pseudo-Element-Kick war, habe ich mich für das Projekt zunächst durch die Verwendung von Vorher und Nachher entschieden.
Mit diesen Pseudoelementen können wir nur den Download-Button in unserem HTML-Code codieren und dann mit reinem CSS die Flügel hinzufügen. Es scheint eine optimale Lösung zu sein und hat wirklich gut funktioniert? bis ich versuchte, den Übergang zu animieren. Egal was ich versuchte, ich konnte den Übergang zur Arbeit einfach nicht schaffen.
Nach einer kurzen Recherche entdeckte ich, dass nur Firefox CSS-Übergänge für Pseudoelemente unterstützt. Dies ist ein echter Mistkerl, der den Spaß, den wir mit vor und nachher haben können, wirklich einschränkt, aber auf der anderen Seite habe ich eine wertvolle Lektion gelernt, die mir in der Zukunft viel Zeit und Ärger erspart.
In Tutorials wie diesem kann man nicht oft erfahren, wo der Autor versagt hat, aber ich denke, es ist wichtig, diese Fehler mitzuteilen, damit man so wie ich von ihnen lernen kann. Wenn Sie nun das nächste Mal ein Pseudoelement animieren möchten, werden Sie daran denken, dass es in den meisten Browsern nicht funktioniert!
Fehlschläge beiseite, lassen Sie uns in eine Methode das springen werden Arbeit.
Die Taste
Zu Beginn erstellen und gestalten wir unseren Button. Sobald wir dies haben, ist es einfacher, die anderen Elemente zu formen. Alles, was wir in der HTML-Abteilung brauchen, ist ein einziges Div, das einen Link enthält. Wir können den Link einfach für die Schaltfläche verwenden, aber wir müssen mehrere Objekte zusammenfassen, sodass ein div erforderlich ist.
Knopfform & größe
Der obige HTML-Code sollte lediglich einen Textlink enthalten. Wir werden dies in eine Schaltfläche mit einer festgelegten Hintergrundform und -größe umwandeln. Dazu beginnen wir mit einigen Bemaßungen, fügen Farbe hinzu und setzen den Anzeigewert auf Blockieren.
Hier sehen Sie, wie Ihr Button nach diesem Schritt aussehen sollte. Es sieht noch nicht nach viel aus, aber es wird ein schick aussehender Knopf sein, bevor Sie es wissen.
Geben Sie Styles ein
Die erste hässliche Sache über der Schaltfläche oben, die wir reparieren müssen, ist der Typ, der momentan ein Durcheinander ist. Zum Glück ist das leicht anzusprechen. Alles, was wir tun müssen, ist, die Farbe auf Weiß zu setzen, eine Schrift zu deklarieren und sie zu zentrieren.
Hier sind einige interessante Dinge zu beachten. Beachten Sie zunächst, dass ich die? Schriftart? Verwende. Abkürzung, anstatt einzeln durch die Eigenschaft "reach font" zu laufen. Dies ist eine großartige Möglichkeit, um Platz zu sparen und die Schriftstile kurz und knapp zu halten. Die Reihenfolge hier ist wie folgt:
Hier ist ein weiterer raffinierter Trick: Ich habe die Zeilenhöhe auf 50 Pixel gesetzt, um sie vertikal in der Schaltfläche zu zentrieren. Beachten Sie auch, dass ich den Text unterstrichen und den Typ in Großbuchstaben umgewandelt habe. Warum habe ich es nicht einfach in HTML in Großbuchstaben geschrieben? Weil dies wirklich eine Stilauswahl ist und sich bei einer zukünftigen Neugestaltung ändern könnte.
Jetzt sieht unser Button viel besser aus!
CSS3 Magic
Zu diesem Zeitpunkt sieht unser Button noch ein wenig schlicht aus. Wenn Sie mit dem minimalistischen Look cool sind, können Sie vorausgehen. Ansonsten machen wir es etwas interessanter. Als erstes runden wir die Ecken ab. Stellen Sie sicher, dass Sie alle drei Browser-Präfixe hinzufügen:
Als nächstes werfen wir einen Box-Schatten. Wieder benötigen wir drei Versionen, um die verschiedenen Browser abzudecken. Die Kurzwertreihenfolge hier ist horizontaler Versatz, vertikaler Versatz, Unschärfe und Farbe.
Zum Schluss werfen wir noch einen Farbverlauf. Leider erfordert dies eine ganze Reihe von Code. Die Art und Weise, wie Gradienten funktionieren, ändert sich in letzter Zeit. Daher brauchen wir nicht nur mehrere Präfixe, sondern auch mehrere Syntax, um sicherzustellen, dass wir alles unterstützen.Ich werde ehrlich sein, ich codiere dieses Zeug selten von Hand. Stattdessen verwende ich den Ultimate Gradient Generator und füge den generierten Code ein. Hier ist das Ergebnis:
Jetzt ist unser Button komplett gestylt und sieht gut aus. Hier ist das Ergebnis:
Die Schubladen hinzufügen
Jetzt, da unser Hauptknopf fertig ist, ist es Zeit, die kleinen Schubladen hinzuzufügen, die von oben und unten herausgleiten (vielleicht "Flügel" ist der passende Begriff). Zu diesem Zweck fügen wir zunächst ein wenig zu unserem HTML hinzu:
Wie Sie sehen können, habe ich im Grunde zwei Absätze mit einer eindeutigen Klasse abgelegt, die sie leicht anvisieren lässt (Sie können stattdessen einige Pseudo-Selektoren verwenden, wenn Sie wirklich Lust haben wollen).
Standard-Absatzstil
Springen Sie jetzt zu Ihrem CSS und wir gestalten die Absätze. Zu Beginn möchten wir uns auf die Stile konzentrieren, die beide Absätze gemeinsam nutzen. Durch das gleichzeitige Design beider Elemente bleibt unser Code sauber und weniger redundant. Hier ist ein großes Stück Code zum Nachdenken:
Nun, das ist eine Menge, die du auf einmal auf dich werfen kannst, also gehe ich Schritt für Schritt durch. Als Erstes geben wir den Absätzen Form, Farbe und Schriftstil genau so, wie wir es auf der Schaltfläche getan haben. Der Hauptunterschied besteht darin, dass diese kleiner sind und einige Ränder verwenden, um sie in Position zu bringen.
Als nächstes sind die Positionierungsstile. Diese sind sehr wichtig, also vergewissern Sie sich, dass Sie sie klar verstehen. Damit die Flügel hinter der Schaltfläche erscheinen, müssen wir den Z-Index anwenden, der die Stapelreihenfolge der Elemente beeinflusst. Betrachten Sie dies als "send to back". Art von Befehl. Um dies zu erreichen, müssen wir absolute Positionierung anwenden.
Schließlich haben wir die gleichen Randradius- und Verlaufsstile wie zuvor hinzugefügt. Ich habe diese von den vorherigen Styles getrennt, um die Dinge einfach und klar zu halten, aber um DRYer zu machen, möchten Sie wahrscheinlich Ihre gemeinsam genutzten CSS3-Styles in etwas wie folgt umschreiben:
Jedes Mal, wenn Sie mehrmals Stile wiederholen oder einfügen, machen Sie Ihren Code unnötig komplex und sollten versuchen, ihn zu vereinfachen.
Am Ende dieses Schritts sehen Sie seltsamerweise keine Änderung in Ihrer Vorschau vom letzten Mal. Dies liegt daran, dass wir diese Elemente hinter der Schaltfläche versteckt haben. Sie sind da, man kann sie nur noch nicht sehen!
Schwebeflug und aktive Stile
Als nächstes wollen wir die soeben erstellten Flügel nehmen und nach außen schieben, wenn der Benutzer über die Schaltfläche fährt. Um dies zu erreichen, müssen wir lediglich die Ränder für jeden Absatz anpassen. Hier zielen wir auf jede der Klassen ab, die wir erstellt haben, und bewegen dann den oberen und den oberen Bereich nach unten. Die .top-Klasse benötigte auch eine leichte Höhenanpassung, um richtig auszusehen.
Wenn wir hier sind, können wir auch einige aktive Stile anwenden. Diese werden während eines Mouse-Down-Ereignisses wirksam.
Wie Sie sehen, habe ich hier den Verlauf so angepasst, dass die obere Farbe etwas weiter gedehnt wird. Dann habe ich die Flügel etwas zurückgebracht, sodass beim Klicken ein Kontraktionseffekt entsteht.
Jetzt sieht unser Button super aus. Alle drei Staaten arbeiten. Wenn Sie nicht schweben, sieht es aus wie ein einfacher alter Knopf. Wenn Sie schweben, springen die Flügel oder Schubladen heraus. Wenn Sie klicken, kommen die Flügel ein wenig und der Verlauf ändert sich geringfügig.
Letzter Schritt: Fügen Sie den Übergang hinzu
An diesem Punkt scheint alles gut zu funktionieren. Das einzige Problem ist, dass der Hover-Effekt sofort eintritt und wir möchten, dass er etwas allmählicher wird. Um dies zu erreichen, gehen Sie zurück zu Ihrem Absatzblock und fügen Sie unter Verwendung aller erforderlichen Präfixe einen einfachen Übergang von 0,5 Sekunden hinzu.
Mit diesem Zusatz wechselt der Button sehr gut zwischen den drei verschiedenen Zuständen.
Sehen Sie es in Aktion
Wir sind alle fertig! Sie sollten jetzt einen fantastischen animierten CSS-Download-Button haben, der sicherlich beeindrucken wird. Schauen Sie sich die Live-Demo unten an oder überprüfen Sie den Code auf Tinkerbin.
Demo: Klicken Sie hier, um zu starten
Möchten Sie eine noch bessere Version des Buttons mit sechs verschiedenen Versionen zur Auswahl haben? Testen Sie den tollen kostenlosen Download auf unserer neuen Schwestersite Design Curate.
Fazit
Danke fürs Lesen und Mitmachen. Wenn Sie den ganzen Weg geschafft haben, klopfen Sie sich für eine gute Arbeit auf den Rücken.
Ich hoffe, Sie haben ein oder zwei Dinge über Z-Index oder coole CSS3-Tricks gelernt. Wenn nicht, haben Sie zumindest einen fantastischen Button bekommen! Hinterlassen Sie einen Kommentar und lassen Sie uns wissen, ob Ihnen das Tutorial gefallen hat.