Heute werden wir ein bisschen Spaß haben, wenn wir uns ein fantastisches neues kostenloses Tool für Webentwickler anschauen, das einfach CSS Button genannt wird. Mit dieser Web-App können Sie die CSS-Schaltflächen Ihrer Träume mit einfachen und intuitiven Steuerelementen schnell und einfach erstellen.
Ich habe schon einige andere CSS-Button-Hersteller gesehen, und fast keiner verdient den wiederholten Einsatz, aber diese Seite hat viel zu bieten und kann Ihnen wirklich viel Zeit und Frustration ersparen. Lass uns rein gehen und es ausprobieren!
Treffen Sie den CSS Button
Die CSS-Button-App eignet sich hervorragend für das Starten der Buttons. Auf der Startseite gibt es einige Dinge, die Sie nicht verpassen möchten. Die grundlegenden Steuerelemente sind ziemlich offensichtlich. Sie können eine neue Schaltfläche von Grund auf neu starten, eine Vorlage auschecken und ändern oder sich mit Twitter verbinden, um Ihre Arbeit zu speichern.
Verpassen Sie auch nicht den etwas versteckten? Random Button? Funktion in der Fußzeile. Im Moment gibt es nicht zu viele Inhalte auf der Website (die App befindet sich noch in der Beta-Phase). Da sie jedoch immer mehr Benutzer aufnimmt, wird diese Funktion zu einer unterhaltsamen Art, neue Button-Ideen zu entdecken.
Erstellen einer Schaltfläche von Grund auf
Ich bin nie einer, der sich für den einfachen Ausweg entscheidet, also bauen wir unseren eigenen Button komplett von Grund auf. Klicken Sie dazu einfach auf den Link links:
Daraufhin sollten Sie zu einem neuen Bildschirm gelangen, auf dem Sie alle Steuerelemente finden, die Sie zum Erstellen einer super ausgefallenen Schaltfläche benötigen. Alle Eingaben sind einfach und verwenden entweder einfache Formulare oder intuitive WYSISYG-Steuerelemente.
Wir werden jeden Schritt durchgehen, um Ihnen zu zeigen, wie der Prozess funktioniert. Denken Sie daran, dass sich dies in einem schriftlichen Layout recht gut anfühlt, aber wenn Sie es einmal selbst ausprobieren, fühlt sich der Aufwand wirklich minimal an.
Hintergrund Farbverlauf
Als ersten Schritt definieren wir einen Hintergrund für unsere Schaltfläche. Sie können entweder eine Volltonfarbe oder einen Farbverlauf wählen, ich nehme die Farbverlaufsroute. Hierbei werden einfache Farbselektoren verwendet, um Sie beim Erstellen des Farbverlaufs zu unterstützen. Wenn Sie jemals CSS-Farbverläufe von Hand codiert haben, wissen Sie, dass wir uns bereits viel Zeit sparen, da die Auswahl von zwei Farben weitaus einfacher ist, als den Code für das Durchführen dieses Vorgangs zu schreiben.
Durch Klicken auf den Blitz neben einer Option wird die Liste der Steuerelemente angezeigt. Bei vielen dieser Optionen können Sie mehrmals klicken, um den Effekt mehrmals hinzuzufügen. Dies hilft beim Erstellen wirklich komplexer, Photoshop-ähnlicher Ebenen.
Die Vorschau verstehen
Rechts neben den Schaltflächen der Schaltfläche befindet sich die Vorschau auf das, was Sie erstellen. An diesem Punkt sieht es nicht viel aus, aber es wird mit dem Fortschritt viel besser.
Beachten Sie, dass hier alle Grundlagen behandelt wurden, und Sie können den normalen Status, den Schwebeflug und den aktiven Status anpassen. Standardmäßig wirken sich unsere Aktionen auf den Normalzustand aus. Klicken Sie einfach auf einen der anderen Zustände, um ihn gezielt anzuvisieren. Die endgültige? Version ist eine Live-Schaltfläche, mit der Sie Ihr Design bewerten und mit ihm interagieren können.
Box Schatten
Als nächstes sind die Box-Shadow-Steuerelemente. Diese sind einfach genug und ermöglichen es Ihnen, Werte für Versatz, Unschärfe, Ausbreitung usw. schnell einzugeben. Sie wählen dann Ihre Farbe aus und können sogar die Einfügungsoption für innere Schatten umschalten. Meine einzige Enttäuschung hier ist, dass es nicht so aussieht, als könnten Sie den Schatten mit einem RBAA-Wert festlegen. Dies ist meine bevorzugte Methode, damit der Hintergrund durchscheint.
Tastenabmessungen
Nun ist es Zeit, unserem Knopf endlich etwas Substanz zu geben. In diesem Abschnitt können Sie eine statische Größe festlegen und Ränder / Füllungen hinzufügen, um Ihrer Schaltfläche Gewicht zu verleihen. Sie können die Ecken auch mit einem gewissen Randradius abrunden. Mit jeder dieser Optionen können Sie so spezifisch sein, wie Sie möchten. Sie können beispielsweise festlegen, dass der Randrand auf allen Seiten gleich ist oder für jede Ecke unterschiedlich ist.
Nach diesem Schritt können wir sehen, dass unser Button mehr wie ein Button aussieht!
Font-Eigenschaften
Als Nächstes haben wir einige Steuerelemente zum Festlegen unserer Text- und Textschattenstile. Ich schätze es sehr, dass ich nicht nur die Schriftart, sondern auch den Fontstapel einstellen kann. Dies zeigt, dass der Entwickler beim Erstellen dieses Tools Codierer im Auge hatte.
Nach diesem Schritt sieht unser Knopf ziemlich scharf aus. Wir haben fast alles festgelegt, was wir für einen einfachen Button benötigen (Sie können auch hineingehen und einen Übergang einstellen, wenn Sie möchten).
Schweben und aktiv
Nachdem ich meinen normalen Knopfstatus genau so erhalten habe, wie ich es will, ist es Zeit, zurück zu gehen und die Einstellungen für meinen Schwebeflug und meinen aktiven Status hinzuzufügen. Ich nahm den vorhersehbaren Weg, den Knopf beim Schweben ein wenig leichter zu machen und den Verlauf umzukehren, um einen Druck auf aktiv zu simulieren.
Sobald wir fertig sind, bekommen wir einen schönen, fetten CSS-Block, den wir in unseren Code einfügen können. Es ist ein großes Stück Code, aber es ist alles mein eigenes Tun und resultiert hauptsächlich aus all diesen verrückten Browser-Präfixen, die Sie verwenden müssen, um Farbverläufe und Schatten abzubilden. Wenn ich mir den gesamten Code ansehe, der für diese einfache Schaltfläche erforderlich ist, wird deutlich, wie viel Zeit dieses kleine Werkzeug mir erspart hat. Ich bin mehr als in der Lage, diesen Button von Hand zu erstellen, aber das würde mich zugegebenermaßen mehrere Minuten in Anspruch nehmen.
Starten von einer Vorlage
Nun, da wir die Heimwerker-Route gegangen sind, gehen wir zurück zum Anfang und nehmen die andere Option: Starten Sie von einer Vorlage. Wenn Sie auf diesen Link klicken, gelangen Sie zu der Seite mit den Vorlagen, auf der derzeit fünf Beispiele für superschnelle Tasten zur Auswahl stehen.
Ändern der Vorlage
Zu Beginn habe ich mich für den "Sexy Green Download Button" entschieden. Vorlage. Wenn Sie sich für eine Option entscheiden, gelangen Sie in denselben Generator, den wir zuvor gesehen haben. Der einzige Unterschied besteht darin, dass jetzt die entsprechenden Einstellungen für die Erstellung der unten stehenden Schaltfläche vorbelegt sind.
Es ist wirklich schön, diese solide Basis bereits aufgebaut zu haben. Von hier aus müssen Sie lediglich die Werte anpassen, die Sie ändern möchten.Zum Beispiel begann ich mit dem Button oben, änderte nur die Eigenschaften für den Grenzradius und den Boxschatten und konnte schnell meinen eigenen, einzigartigen 3D-Button herausdrücken.
Einen Versuch wert?
Ich weiß, was viele von Ihnen denken, und ich bin bei Ihnen. Ich bin ein totaler Nerd, der sowohl die Kunst als auch die Wissenschaft von CSS liebt, also eigentlich genießen Kodieren dieser Art von Dingen von Hand. Davon abgesehen, kann ich nicht anders als ein Dienstprogramm zu schätzen, das mir wirklich Zeit spart. Dies ist eines dieser Tools. Darüber hinaus weiß ich nicht immer, was ich mit einem Button anfangen möchte, wenn ich mit dem Erstellen beginne. Es ist schön, ein paar visuelle Werkzeuge zu haben, mit denen man experimentieren und optimieren kann, bis ich etwas finde, das mir gefällt.
CSS Button ist noch in der Beta, also bin ich auf ein oder zwei Fehler gestoßen. Wenn Sie beispielsweise eine Farbe von Hand eingeben und dann später auf die Farbauswahl klicken, um sie zu verändern, stellen Sie fest, dass die Farbauswahl nicht aktualisiert wird, um die manuelle Eingabe wiederzugeben.
Abgesehen von ein paar sehr kleinen Macken ist dies ein solides Programm, das ich meiner ständig wachsenden CSS3-Toolbox hinzufügen möchte. Wie ich oben erwähnt habe, gibt es eine Menge über diese App, die deutlich macht, dass sie für Codierer gedacht ist. Ich habe eine beeindruckende Flexibilität, um all die Dinge zu erledigen, die ich normalerweise von Hand machen würde. Sie sind nur in einem Format, das etwas einfacher zu folgen ist.
Was denkst du? Haben Sie Spaß an Werkzeugen, die Ihnen helfen, komplexe Aufgaben etwas einfacher zu erledigen, oder bevorzugen Sie den puristischen Weg, nur von Hand zu codieren?