Dinge ziehen, Farben auswählen, eine schöne Klasse für Ihre Schaltflächen erstellen… Einführung des Button Makers.
Mann, das ist ein schöner Button, der da.
Ich sage „CSS3“, weil diese Verläufe, Schatten und abgerundeten Ecken nutzen, die sehr zu ihrer Button-Haftigkeit beitragen. In älteren Browsern, die diese Eigenschaften nicht unterstützen, ist der Fallback ein einfarbiger Hintergrund, keine Schatten und eckige Ecken. Keine große Sache.
Ich hoffe, das ist schmerzlich offensichtlich, aber um diese Button-Maker-Sache zu nutzen, passen Sie einfach die Einstellungen an, bis Sie einen schön aussehenden Button haben, drücken Sie dann den Button und er gibt Ihnen den CSS. Kopieren und fügen Sie nach Belieben ein. Jetzt können Sie den Klassennamen „button“ auf HTML-Elementen verwenden, um sie wie Buttons aussehen zu lassen. Der CSS ist nicht wirklich schön formatiert. Wenn jemand eine Idee hat, wie man das besser machen kann, lassen Sie es mich bitte wissen.
Das super-coole ermächtigende Konzept…
…in Bezug darauf, wie der Button-Maker-Vorschau funktioniert.
Es ist einfach, den CSS eines Elements mit JavaScript im laufenden Betrieb zu ändern. Aber wie können wir den :hover-Zustand ändern? Die Antwort ist, dass wir es nicht wirklich können, zumindest nicht wirklich einfach. Wir könnten ein mouseenter-Ereignis anhängen, das einige neue CSS anwendet, die die alten überschreiben würden, und ein mouseleave-Ereignis, das es wiederherstellt. Das ist ein großer Aufwand für etwas so Relativ Kleines. Es wird noch komplizierter, wenn wir auch den :active-Zustand steuern wollten.
Dieser Button-Maker zeigt Ihnen eine live funktionierende Version des von Ihnen erstellten Buttons, komplett mit :hover- und :active-Zuständen. Es wird ohne das Anhängen von JavaScript-Ereignissen an den Button selbst getan. Wie wird das also gemacht? Ich habe es mit einer Technik gemacht, die ich von Doug Neiner übernommen habe, der sie (als kleinen Teil einer völlig anderen Anwendung) auf jQConf vorgestellt hat.
Okay, okay, ich mache weiter. Die Idee ist, ein<style>Element in den<head>einzufügen, das den bestehenden CSS überschreibt (in-Dokument-CSS überschreibt automatisch verknüpftes CSS für Selektoren mit demselben Spezifitätswert). Dann, wenn sich etwas ändert, reißt man buchstäblich das gesamte Style-Tag heraus und ersetzt es.
Ein neues Style-Element hinzufügen
$("head").append("<style type='text/css'></style>");Textvariable, in der der CSS gespeichert wird. Halten Sie diesen Text bei Änderungen der Optionen auf dem neuesten Stand.
var cssText = "";Verwenden Sie die replaceWith()-Funktion, um das vorhandene Style-Element herauszureißen und ein neues anzuwenden.
$("style").replaceWith("<style type='text/css'>" + cssText + "</style>");Der Teil des Heraustrennens ist wichtig. Ursprünglich habe ich versucht, eine ID auf das Style-Element zu setzen und den Inhalt darin im laufenden Betrieb zu ersetzen. Es hat den Inhalt ersetzt, aber diese Änderungen wurden nicht auf der Seite angezeigt. Anscheinend müssen Sie es buchstäblich entfernen und wieder einfügen, um den Browser zum erneuten Rendern mit dem neuen CSS zu zwingen.
Nimm es, schüttle es
Ich werde den Quellcode für das Ding bereitstellen, falls Sie ihn aus irgendeinem Grund lokal ausführen möchten. Oder noch besser, weil Sie ihn cooler machen wollen. Wenn ja, teilen Sie ihn bitte.
Gute Arbeit von oben bis unten. Ich mag all die Optionen, die Sie anbieten, und die Art und Weise, wie Sie den CSS servieren, ist auch sehr cool.
Ich wollte schon immer etwas wie das, es ist zu lang, um Vektorverläufe von Hand zu tippen.
Wow, das ist ziemlich raffiniert. Gute Arbeit!
Gut gemacht!
Ich bin mir nicht sicher, ob das funktionieren würde, aber könnten Sie irgendwie die Kraft von http://www.styleneat.com für die CSS-Formatierung nutzen? Vielleicht ein Link in der CSS-Anzeige, der den Benutzer zu styleneat.com mit dem vorab ausgefüllten Eingabefeld mit Ihrem generierten Inhalt schickt?
Wenn ich Zeit habe, werde ich den Quellcode herunterladen und sehen, ob ich etwas ausarbeiten kann. Ich bin mir nicht sicher, wie einfach styleneat von einer externen Quelle aus zu integrieren ist, also könnte es eine Zeitverschwendung sein, aber wer weiß?
Schönes Projekt. Ich denke, es ist besser, wenn CSS gut formatiert ist, um die Lesbarkeit zu verbessern.
Ich schreibe meinen CSS normalerweise im einzeiligen Format, also funktioniert es für mich gut, aber ich stimme zu, dass es im Allgemeinen schöner wäre, wenn es Zeilenumbrüche/Leerzeichen für die Lesbarkeit verwenden würde.
Mit einzeilig meinen Sie eine Zeile pro Regel, richtig? Die Demo ist eine Zeile für alles.
Das ist großartig. Vielen Dank. Das ist es, wonach ich gesucht habe.
Web 2.0 oh nein!
Tolles Werkzeug. Danke…
Das ist wirklich cool! Gute Arbeit Chris
Sehr sexy Chris :D
Sehr schön!
Vielen Dank für dieses hilfreiche (und wunderschön gemachte!) Werkzeug.
Zu großartig Chris!!
Tolle Arbeit und ein wirklich cooles Werkzeug!
Sehr tolles Werkzeug, die Idee, so viel Zeit zu sparen!^^
Danke Chris.
Sie sollten kein !important verwenden. Es ruiniert den „Kommentar absenden“-Button und macht userstyles unwirksam.
Sprechen Sie über dieses spezielle Kommentarformular? Was ist mit ihm „ruiniert“? Sieht für mich gut aus.
Benutzerstile sind jedoch ein interessanter Punkt. Sieht es für Sie „ruiniert“ aus, weil Sie Ihre eigenen Benutzerstile haben, die damit irgendwie kämpfen? Können Sie nicht einfach !important in Ihren Benutzerstilen verwenden, um gegen meine zu kämpfen? So funktionieren Benutzerstile, nicht wahr? Sie kämpfen ständig gegen das, was auf der Seite ist? Oder können Sie meine Stile einfach ausschalten und Ihre eigenen verwenden, was das !important-Zeug hinfällig macht?
Ich habe meine Gründe, !important an solchen Stellen zu verwenden. Der .button-Stil ist generisch und hat nicht viel CSS-Spezifität. Dennoch möchte ich sicherstellen, dass meine Buttons genau so aussehen, wie ich sie geschrieben habe, also verwende ich !important, wo ich muss, um sicherzustellen, dass die Kaskade sie nicht kaputt macht.
Gut formuliert!
Nimmt den ganzen Firebug-Spaß raus ;-)
Mir ist egal, wie der CSS serviert wird. Ich schreibe auch meistens im einzeiligen Format.
Tolles Werkzeug. Ich werde es definitiv benutzen, wenn ich vergesse, wie man den lästigen Webkit-Verlauf schreibt.
Es ist nicht so schwer, es auch in mehrzeilig zu zerlegen :)
Eine weitere großartige Idee von Chris.
-..- erstaunt
Hallo: Ich mag den Button-Maker wirklich, ich werde ihn in einigen meiner Projekte verwenden.
Eine kleine Sache hinzuzufügen, ist ein Schattenfarb-Picker, denn „der Schatten darf nicht schwarz sein“ :D
Der Schatten kann eine dunklere Version der Hintergrundfarbe sein oder eine dunklere Version der aktiven Hintergrundfarbe verwenden.
Auch wenn der CSS die IE-Version des Verlaufs enthält (ala CSS3 bitte!), wäre das ein Hit ;)
Im Gegenteil, der Schatten muss immer schwarz sein mit unterschiedlicher Deckkraft. Sobald Sie anfangen, die Farbe des Schattens zu ändern, wird er nicht gut aussehen auf verschiedenen Farben des darunter liegenden Elements.
Durch die Verwendung von schwarzem Material mit teilweiser Deckkraft machen Sie automatisch jede darunter liegende Farbe „zu einer dunkleren Version dieser Farbe“.
Hier ist warum. Nehmen wir an, Sie haben Ihren Button über einem geschäftigen Bild, das hauptsächlich Rot enthält, aber auch etwas Gelb und Blau. Da es hauptsächlich grün ist, haben Sie Ihren Schatten als „dunkleres Grün“ eingestellt
Rot + ein durchscheinender dunklerer roter Schatten = dunkles Rot, wo der Schatten auf dem Hintergrund liegt. Visuell korrekt!
Gelb + ein durchscheinender dunklerer roter Schatten = Orange, wo der Schatten auf dem Hintergrund liegt. Nicht korrekt. Der Schatten für Gelb sollte, wie Sie sagen, ein dunkleres Gelb sein.
Blau + ein durchscheinender dunklerer roter Schatten = Lila, wo der Schatten auf dem Hintergrund liegt. Ebenfalls nicht korrekt.
Sie sehen, worauf ich hinauswill. Wenn Sie schwarzes Material mit geringer Deckkraft verwenden, ist alles darunter korrekt eine dunklere Version seiner eigenen Farbe.
Entschuldigung, der Satz „Da es hauptsächlich grün ist, haben Sie Ihren Schatten als „dunkleres Grün“ eingestellt“ sollte grün durch rot ersetzen. Ich habe mit meinem Beispiel als grün begonnen und gemerkt, dass es einfacher zu erklären ist, wenn ich mich an Grundfarben halte. ;) Chris, fühlen Sie sich frei, die Änderung direkt am Originalkommentar vorzunehmen, wenn Sie möchten, und löschen Sie diesen. ;-)
Vielen Dank für ein tolles Werkzeug! Ich fange gerade erst an, mich mit der Vorstellung abzufinden, dass Leute, die IE benutzen, mit eckigen Ecken und so leben müssen, aber sie haben andere Optionen ;)
Du bist großartig, Mann! Ich weiß wirklich nicht, wie ich dir für dieses nützliche Werkzeug und all die anderen Dinge danken soll, die du machst…
Wenn Sie unser Leben so einfach machen, müssen wir Ihnen bald einen Prozentsatz von all unseren Projekten geben!
Danke, dass Sie das Web zu einem besseren Ort machen!
Wow, Chris, das ist absolut erstaunlich, eine Kleinigkeit, könnten wir :active und :hover Verläufe haben.
Danke
Das ist verdammt sexy.
Das letzte Mal, als ich einen Online-Button-Maker angesehen habe, war vor ~5 Jahren. Ich habe das Konzept aufgegeben, weil sie in Flash programmiert waren – und waren nicht halb so sexy wie deine Buttons.
Tolle Arbeit, danke!
Das ist großartig, Sie haben so gute Arbeit geleistet und all die Optionen, die Sie zur Erstellung abgerundeter Buttons anbieten, sind sehr gut.
Das gefällt mir am besten.
Touchdown Chris!! Ich bin sicher, dieser wird sehr beliebt sein, sobald CSS3 standardisiert ist.
Eine Frage: Warum macht die Jquery .replaceWith() Funktion manchmal einen zusätzlichen Stapel von Stylesheets, wenn die HTML-Quelle in Firebug angezeigt wird? Ist das ein jQuery-Bug oder ein Firebug-Bug? :-)
Gute Arbeit, dieser Trick ist genial. :)
Sie sind eine echte Legende!! Das ist großartig! Warum verstecken Sie es unter css3-button-maker/example – stellen Sie es auf eine eigene Website… das ist alles, was es braucht! :) ahahah, es ist fantastisch!
Ich stimme zu, das braucht eine eigene Website. Gute Arbeit.
Danke, es ist fantastisch, du hast mir (und anderen) viel Arbeitszeit gespart!
Prost!
Warum sind alle Eigenschaften in einer Zeile?
Das ist gut, wirklich hilfreich, zeitersparend, hoffentlich gibt es noch mehr solche Ideen, hmmm… ein Formular wäre gut.
Liebe das! Vielen Dank, Chris!
Großartig, das wird ein tolles Werkzeug für einige meiner Web 2.0-Projekte sein.
Es ist so einfach, aber perfekt – danke fürs Teilen!
Das sieht in IE7 schrecklich aus. Überhaupt keine Hintergrundfarbe.
Ich liebe das Konzept. Ich wünschte nur, wir könnten die IE 6 & 7 Benutzer dazu bringen, endlich zu upgraden.
Wenn wir als Designer und Entwickler weitermachen, werden die Benutzer es auch tun. Wir können nicht erwarten, dass sie den ersten Schritt machen.
Selbst wenn wir den IE-Nutzern eine langweilige Alternative anbieten, sollte dies in den meisten Fällen trotzdem geschehen. Unsere Website zum Beispiel wird von der Mehrheit ihrer Besucher von Universitäten, Regierungen und großen Unternehmen bezogen. Den Benutzern selbst ist es normalerweise nicht gestattet, nicht unternehmensbezogene Browser zu verwenden, und viele sind auf ältere IE-Versionen angewiesen, da ihr Unternehmen Software verwendet, die nur mit Browser X funktioniert und teuer im Upgrade ist.
Ich liebe es sehr! Muss es noch unter IE testen. Funktioniert gut in Firefox und Safari! Vielen Dank!.
Ich habe Ihr Werkzeug als Ressource auf meiner CSS-Aggregator-Website hinzugefügt, ich hoffe, es stört Sie nicht. :)
Ich habe „Quick Copy“ hinzugefügt, damit es einfach ist, den Code zu erhalten, ohne das Stylesheet anzuzeigen.
Liebe das Konzept!
Es ist unter http://cl.ly/1Ekb sichtbar
Oder die Formatierung von cssText, das beim Klicken auf den Button eingegeben wird, ist eine weitere Option, aber das erfordert einen zusätzlichen Klick…
für eine einfachere Möglichkeit, die Mehrzeilen für die Ausgabe zu erhalten
Ändern
Zu
Ich mag deinen Weg lieber!
Sehr gute Arbeit, ich liebe es :)
Das ist ziemlich süß, aber die Textfarbe funktioniert bei mir nicht… sie ändert stattdessen die untere Gradientenfarbe?
Danke für dein tolles Werkzeug.
wirklich beeindruckt von der Programmierung..
Es ist wirklich hilfreich.
Danke..
wirklich nützlich und danke fürs Teilen.
Können Sie mir bitte mehr über die Box erzählen, die den CSS des Buttons anzeigt (wie haben Sie sie gemacht)
Chris,
Das ist der erste Kommentar für mich hier, also lassen Sie mich Ihnen für all die Dinge danken, die Sie hier teilen. Es hat mir schon sehr geholfen und mich bei vielen Dingen beruhigt.
Haben Sie für dieses spezielle Thema etwas als Fallback für IE-Benutzer? In meinem Land nutzen immer noch mehr als 75% es… (leider natürlich…).
Danke.
Schön, das erinnert mich an das, das ich hier online habe…
http://dvia.com/buttonMaker
=)
So cool das auch ist, ich schreibe meinen CSS immer noch lieber selbst, damit ich meine Fähigkeiten dort behalte, wo ich sie brauche. Das ist die Art von Dingen, die Zeit spart, aber dazu neigt, dass ich vergesse, wie man es tatsächlich macht, wenn ich es brauche. Ich mag es definitiv.
Bedeutet das, dass wir diesen Stil von Buttons jetzt überall sehen werden?
Sehr beeindruckend. Teste es am Ende der Backup-Homepage meiner Website unter http://lowendmac.com/index.shtml
Sieht großartig aus in Opera, Safari, iCab und Firefox auf meinen Macs mit OS X 10.4 und 10.5. Bricht gut ab in Camino und IE 5.2 (der letzten Mac-Version).
Korrektur: Es ist auch in Camino großartig. Musste neu laden.
Das ist großartig, danke! Ich bevorzuge definitiv CSS-Buttons gegenüber Bildern, und es ist schön, einen seriösen Ort zu haben, um diese Buttons zu generieren (versuchen Sie, nach Button-Generator zu googeln und sich einige dieser Seiten anzusehen).
Nochmals vielen Dank!
SCHÖN! Sehr, sehr schön!
Einfache Mehrzeilen-Ausgabe
Ehrlich gesagt, Chris, eines der einfachsten, aber genialsten Konzepte, die ich seit Monaten gesehen habe – gut gemacht.
Chris, das ist verdammt genial! Danke!
Danke, Mann!
Wow, das ist fantastisch, danke dafür!
Zur Formatierung des CSS…
Kopieren und fügen Sie einfach den CSS ein in
http://www.lonniebest.com/FormatCSS/
und Sie haben die volle Kontrolle.
Tolles Werkzeug, aber in Opera 10.53 funktionieren die Scroller nicht.
So verdammt cool!!
Das ist ein großartiges Werkzeug, aber ich denke, es muss noch etwas Arbeit geleistet werden, um es rückwärtskompatibel mit ie7 zu machen (zumindest).
net tuts hat gerade ein ähnliches Tutorial für einen CSS3-Button gemacht, das in ie6 & ie7 in Ordnung zu sein scheint… allerdings ist er ohne Gradienten, ohne abgerundete Ecken und ohne @font-face. Aber zumindest sieht er einigermaßen wie ein Button aus.
http://net.tutsplus.com/tutorials/html-css-techniques/build-kick-ass-practical-css3-buttons/
Schauen Sie sich die Demo an.
Ich stimme zu! Es muss zumindest für IE7 zurückgehen!
Verdammt cool Chris. Obwohl es Hunderte von anderen Button-Machern im Web gibt, ist dies der beste, den ich bisher gesehen habe.
Sie sind mein neuer Favorit.
Etwas anständige Abwärtskompatibilität sollte für IE6-7 hinzugefügt werden. Viele Unternehmensstandorte sind leider immer noch eine Weile mit IE6 eingeschränkt.
Sehr einfacher Weg, das zu tun, geben Sie einfach eine Hintergrundfarbe an ;)
Download Squad hat davon gehört: http://www.downloadsquad.com/2010/06/04/button-maker-lets-you-make-css-only-buttons-for-the-web/
Wow, das ist gute Arbeit!
Danke für dieses hilfreiche und tolle Werkzeug
Süßer Button, echt cooles Werkzeug!!
Prost!!
Informationen erhalten – ein wenig zu hoch für mich – aber ich werde es kapieren!
Tolles Tutorial, aber das jQuery hat es etwas verwirrend gemacht, aber ich habe es zum Laufen gebracht. Für alle, die eine einfachere Möglichkeit suchen, Buttons zu erstellen, gibt es mehrere Generatoren, die ebenfalls einen Versuch wert sind, wie zum Beispiel http://www.generatecss.com und http://www.cssbutton.me