15 Große HTML5 und CSS3 Generatoren
HTML5 und CSS3 sind großartige Sprachen, mit denen ich anfange zu lernen, und ich dachte immer, dass einer der besten Wege, um mit dem Lernen zu beginnen, darin besteht, einfach einzutauchen und den Code zu manipulieren. Wie Sie wahrscheinlich wissen, sind dies Generatoren. Sie sind eine großartige Möglichkeit, um Code zu generieren, damit zu spielen und zu lernen.
Nicht nur das, sie sind unglaublich nützlich, weil wir oft als Entwickler oder Designer feststellen, dass wir Dinge immer und immer wieder tun. Nun, Generatoren können diese Kante abnehmen und jedes Mal diese kleinen Dinge für Sie tun.
Als Beispiel habe ich ein Text-Expander-Snippet, das eine HTML5-Vorlage erstellt, über die ich geschrieben habe Hier . Nun, Text-Expander ist großartig, aber es löst nicht alle Bedürfnisse, und in diesem Fall gibt es einen großen Bedarf an Generatoren, also habe ich mir die Zeit genommen, 20 meiner Favoriten zu finden und zu beschreiben, warum ich sie mag.
Ich werde sagen, dass sich der Großteil dieser Liste auf CSS3-Generatoren konzentrieren wird, einfach weil sie mehr als HTML5-Generatoren nachgefragt werden, und wir werden erfahren, warum. Hinweis: Klicken Sie auf die Bilder, um die Webseiten zu öffnen.
CSS3 Generatoren
Diese Generatoren haben eine etwas negative Konnotation, und ich muss sagen, dass es als Designer und Entwickler nichts Negatives gibt. Es ist eine große Zeitersparnis und ehrlich gesagt kenne ich drei Entwickler, die ihre eigenen Generatoren geschrieben haben, nur weil sie der Community helfen wollten. Denken Sie daran, es ist nicht so, dass Sie ein Tabu von AOL verwenden. Das sind sehr natürliche und organische Generatoren, die so entstanden sind, wie wir sie gebraucht haben. Warum also nicht etwas von dem Reichtum teilen? Lassen Sie uns ein paar meiner Favoriten durchgehen und warum Sie sie mögen.
Generatoren
Dieser Abschnitt wird sich auf Generatoren konzentrieren, die sich um die Bedürfnisse und Nutzungen des breiten Spektrums kümmern. Diese decken fast alles ab, was Sie benötigen oder in einem Generator haben möchten, aber aufgrund ihrer Natur können sie bei bestimmten Details schlechter sein. Deshalb werde ich später in diesem Artikel so viele Optionen für bestimmte Typen geben.
CSS3.me
Dies ist einer der genauen Generatoren, auf die ich mich gerade bezog. Dieser wurde von einem meiner Lieblingsdesigner erstellt, Eric Hoffman und es ist erstaunlich. Sehr einfach, minimal und stilvoll, aber gleichzeitig sehr funktional. Sie können den Randradius, den Schlagschatten, den Farbverlauf und die Deckkraft ändern und einstellen.
Hinweis: Werfen Sie einen Blick auf Erics Website; Es ist ein großartiges Beispiel für das erste mobile Design. Er ist auch Designer bei Zendesk , also schick ihm etwas Liebe, wenn du jemals dieses Produkt genossen hast.
CSS3-Maker
Oftmals werden Menschen Generatoren finden, die sie lieben, und bei ihnen bleiben. Und genau das ist mit einem Kunden passiert, mit dem ich zuvor in Bezug auf diesen Generator gearbeitet habe. Er war absolut verliebt, und ich kann sehen, warum - es ist sicherlich funktional. Es ist vielleicht nicht das Schönste, was jemals gemacht wurde, aber es scheint alles zu haben.
Sie können @ font-face-Arbeit, Animation, Box-Schatten, Text-Schatten, Text-Rotation, Übergänge, Farbverläufe, Rand-Radius und vieles mehr tun. Es ist eine, die ich normalerweise markiert habe, aber selten benutze einfach wegen, wie gut die kleineren Generatoren in jeder ihrer jeweiligen Kategorien tun. Aber es ist sicherlich ein guter Generator zu versuchen, wenn Sie einen brauchen und nicht zu einer Reihe von anderen springen mögen.
CSS3 Generator
Dies ist ein weiterer guter allgemeiner, der eine Menge Funktionalität bietet. Ich mag dieses, weil es nette und einfache Dropdowns und einfach zu verwendende Funktionalität hat. Das Design ist auch ziemlich nett. Es bietet auch eine schöne Box-Size-Funktionalität. Dieser bietet die folgenden Möglichkeiten: Randradius, Boxschatten, Textschatten, RGBA, mehrere Spalten, Boxgröße, Umriss, Übergänge, Transformationen, Selektoren-Gradienten. Ich denke, das ist einer meiner Favoriten, weil das Design und die Benutzeroberfläche so sauber sind. Normalerweise benutze ich diesen, wenn ich den CSSMaker vergessen habe.
Knopfgeneratoren
CSS3-Tricks Button Maker
Einer der ersten Knopfmacher, die ich am Tag gesehen habe, hat mich wirklich zum Weinen gebracht. Es war sehr linear, hatte keine Benutzeroberfläche (ironisch) und war insgesamt ein entsetzlich gestaltetes Produkt. Als Nebenbemerkung werde ich als nächstes über etwas Ähnliches sprechen, aber für den Moment werde ich einen zeigen, den ich gefunden habe css3tricks und es ist wirklich nett.
Einer der wichtigsten Punkte, auf die hier Bezug genommen wird, ist die Tatsache, dass es fast vollständig durch einen Drag & Drop-Schieberegler gesteuert werden kann, was wirklich nett ist. Warten Sie, bis Sie alles manuell über die Tastatur eingeben müssen und Sie wünschen, dass Sie einen schönen Schieberegler haben. Als letzte Randbemerkung ist CSS3 Tricks eine wunderbare Seite mit einer Menge gut organisierter und durchdachter Inhalte, die Sie alle gerne sehen würden.
CSS3 Button.net
Und jetzt kommen wir zu dem Generator, auf den ich mich gerade bezog. Das Design mag fehlen, aber es bietet viel mehr Auswahl als das vorherige, was ironischerweise oft ist, wie die Dinge funktionieren. Manchmal möchten Sie einfach zu bedienen sein und manchmal brauchen Sie eine ernsthafte Auswahl, wenn es um Generatoren geht, und diese letzten beiden treffen wirklich beide dieser Punkte.
Dieser bietet die Möglichkeit, mehrere Textschatten, Innenschatten, Rahmen und Schriftfarben hinzuzufügen, während der letzte wirklich nicht so detailliert wurde. Es kann schwierig sein, es zuerst herauszufinden, aber du wirst es bekommen, wenn du nur ein paar Minuten damit spielst. Ich finde, dass dies am nützlichsten ist, wenn Sie an Windows-Benutzeroberflächen gewöhnt sind, und infolgedessen hatte ich Kunden, die mir sagten, dass dies ihr Favorit sei, weil sie jahrelang auf XP stecken geblieben sind und es nicht besser wissen. Und ich bin mir sicher, dass sich einige von euch fragen, aber es ist ehrlich gesagt, wie es läuft - einige Kunden wollen, dass Links zu Generatoren für sie selbst lernen, nachdem Sie sie beeindruckt haben. Ich verlinke sie normalerweise mit Lynda , TeamTreehouse , und ein paar dieser Generatoren für ein gutes Maß.
CSS3 Knopfgenerator
Das ist wirklich lustig. Es gibt Ihnen einen großen Knopf zu manipulieren, der auch in einer rad retro Farbe ist. Sie können dann Schatten, Rahmen und Farbe manipulieren und darüber hinaus können Sie den Hover-Over bearbeiten. Ich mag diesen Titel, weil ich ihn vor einiger Zeit in CSS gefunden habe, und er hat mir eine Vorstellung davon gegeben, was er tun kann. Die Drag & Drop-Schieberegler sind ideal für Leute, die neu in den Sprachen sind, weil Sie sehen können, was Sie sofort tun können. Jetzt werde ich sagen, ich benutze dieses nicht mehr besonders - im Hinblick auf andere, die entstanden sind, aber es ist eine großartige Erinnerung.
Randbild- und Radiusgeneratoren
Rahmenbild
Nichts geht über border-image.com, wenn es darum geht, ein bestimmtes Bild aufzunehmen und es dann zu replizieren, um den richtigen Rahmenstil zu finden. Stellen Sie sicher, dass Sie nicht gegen das Urheberrecht verstoßen, und verwenden Sie das Bild von jemand anderem ohne Zuordnung.
Nehmen wir an, Sie haben einen Pfeil oder ein Dreieck gezeichnet, und Sie möchten einen Generator finden, mit dem Sie ihn im gesamten Bereich Ihrer Website oder sogar an der Grenze eines Elements wiederholen können. Nun, nichts ist besser als diese Seite, wenn es darum geht. Sie können den Versatz, die Größe und die Wiederholung des Bildes ändern.
Sobald Sie auf der Website ankommen, sehen Sie ein Beispielbild, in das sie geladen wurden, aber es ist wirklich viel nützlicher, als das Bild gezeigt hat. Ich werde es oft für Designs in Hintergründen verwenden, die ich wiederholen möchte, und / oder sehen, wie es wirklich schnell aussehen würde, bevor tatsächlich der gesamte Hintergrund in Photoshop repliziert wird. Sie können es für alles verwenden, was mit wiederholten Bildern zusammenhängt.
Rand-Radius
Dies ist ein großartiges und minimales kleines Werkzeug, das ich oft sehr praktisch finde. Damit legen Sie einfach nur fest, wie viel abgerundete Kante Sie an jeder Ecke haben möchten. Sehr praktisch, sehr einfach. Und dann überprüfen Sie einfach, welche Art von Browser-Präfix Sie enthalten möchten, und Boom fertig. Es ist ein schönes UI in aller Ehrlichkeit. Es sollte Tests in Informatikkursen geben, bei denen alles, was Sie tun, ist, sich etwas so Einfaches und Funktionelles wie dieses zu überlegen.
CSS3 Gradientengeneratoren
Farbe Zilla Farbverlaufs-Editor
Dies wird als der ultimative CSS3-Farbverlaufseditor in Rechnung gestellt und für gutes Recht. In der Tat ist es so großartig, dass es der einzige Gradienteneditor ist, den ich hier aufnehmen werde. Es hat eine Menge Funktionen und ist sehr brauchbar und einfach zu beginnen. Ziehe einfach die schwarzen und blauen Stifte ein bisschen herum und du wirst schnell sehen, was sie tun. Sie machen auch einen Browser-Editor in Chrom oder Feuerfuchs das ist wirklich nützlich für Designer, die im Internet arbeiten. Spielen Sie auch in diesem Fall mit den Presets herum, da diese oft gut genug sind - wer auch immer sie ausgewählt hat, hat großartige Arbeit geleistet.
Typografische Generatoren / Editoren
@fontface Generator
Dies ist ein wirklich interessantes Produkt. Mit dieser Funktion können Sie Schriftarten hochladen, die Sie aus dem Internet ausgewählt haben oder die sich auf dem Computer befinden. Anschließend erhalten Sie eine ausgegebene Datei, mit der Sie im Web arbeiten können. Sie bekommen jedoch mehr als eine Sache, Sie bekommen ein paar Dinge. Sie erhalten das CSS für @ font-face-Eigenschaften, wenn Sie die Schriftart ausgewählt haben, und eine HTML-Datei, die die Schriftart und ihre zahlreichen Verwendungsmöglichkeiten anzeigt. Es ist wirklich ein großartiges Werkzeug, um das volle Potenzial einer Schrift auszuloten, wenn Sie nicht ganz sicher sind, und vor allem, wenn Sie nicht die Zeit haben, eine ganze Website mit dieser Schriftart zu erstellen, bevor Sie die Entscheidung treffen.
Reverse CSS3 Generator
CSS3 Bitte
Das ist ein wirklich faszinierendes Produkt. Im Grunde ist es, dass es Ihnen eine Box-Set und alle CSS dafür gibt, und gibt Ihnen dann die Möglichkeit, die Abschnitte ein- und auszuschalten, um zu sehen, was sie tun. Sie können also das CSS3 im Wesentlichen zurückentwickeln, um herauszufinden, was es tut, und dann können Sie sehen, was Sie tun. Dies ist eine gute Möglichkeit, CSS3 zu lernen, wenn Sie interessiert sind, aber denken, dass Generatoren ein bisschen zu kompliziert sind.
CSS3 Schlagschattengeneratoren
Webestools Schattengenerator
Ich mag diesen Schattengenerator sehr, weil er in Details und Tiefen in Bezug auf Schlagschatten geht, die die anderen Generatoren einfach nicht haben. Es sieht vielleicht nicht wie das beste Design aller Zeiten aus, aber es ist sicherlich großartig. Es hat Schatten, Anfangsschatten und die Fähigkeit, Offsets zu manipulieren, Farben einzustellen und so ziemlich alles zu tun, was man mit Code tun kann - aber stattdessen mit einer schönen Schleppleiste. Oh, wie ich die Schleppstange liebe. Überprüfen Sie diese Option, wenn Sie allgemein sehen möchten, wie Ihre Schattenidee aussehen könnte, bevor Sie sie fest codieren.
HTML5-Generatoren
HTML5-Generatoren sind irgendwie schwer zu bekommen, und der Grund dafür ist wahrscheinlich, wie großartig HTML5-Kesselplatte ist. Wir werden nicht darüber sprechen, weil es nicht speziell ein Generator ist, also fasse ich es hier zusammen: Es ist im Grunde eine HTML5-Vorlage bereits ausgefüllt und bereit für Sie zu arbeiten, also schauen Sie es sich an, wenn Du hast es nicht gesehen. Es ist eigentlich ziemlich genial. Viele Leute verwenden es als Starter-Vorlage für ihre Websites, und das aus gutem Grund. Jetzt zurück zu Generatoren. Eine Qualität zu finden, ist ziemlich schwierig, aber ich habe hier ein paar gefunden, die ich zeigen werde - und danach habe ich ein paar mehr generalisierte, die alle Themen in diesem Artikel behandeln.
Shikiryu HTML5-Generator
Shikiryus HTML5-Generator ist viel komplexer. Sie können Funktionen hinzufügen, mit denen Sie Dinge innerhalb von Blueprint (Mixins, usw.) und Fantasy-Typ machen können - also ist es tatsächlich ziemlich nützlich. Ich mag es, weil es etwas semantischer als die anderen Optionen ist und gleichzeitig ermöglicht es Ihnen, wirklich beliebte Anwendungen von Drittanbietern hinzuzufügen, die die Leute gerne verwenden.
Wechseln Sie zu HTML5-Generator
Dies ist ein interessanter Generator. Es ermöglicht Ihnen, ein schnelles und einfaches Framework für die Erstellung von Websites zu erstellen, aber im Gegensatz zu HTML5 Boilerplate können wir genau auswählen , welche Selektoren wir in unserem Framework bevorzugen würden. Ich habe es tatsächlich verwendet, um Code anstelle von HTML5 Boilerplate zu generieren, wenn ich ein paar mehr Selektoren oder Elemente brauche, als sie bieten. Nun folgt es nicht genau den schön gestalteten Prinzipien des semantischen Markups - wie es HTML5 Boilerplate tut - aber es funktioniert gut und Sie können reingehen und den Rest erledigen, wenn Sie es wirklich brauchen.
Quackit HTML5 Generator
Dieser nimmt einen Schritt zurück, und anstatt Ihnen nur eine Gruppe von Code zu geben, der ziemlich allgemein und grundlegend ist, können Sie all Ihre eigenen Informationen eingeben. Das ist wirklich nützlich, und ich habe festgestellt, dass andere, die neuer auf Websites sind, es wirklich lieben. Sie lieben es besonders, ich habe herausgefunden, dass es das Standardbasis-HTML für Sie erzeugt, um dann zu schauen, wie Sie wünschen, mit CSS. Also, wenn Sie CSS lernen, und sind immer noch ein wenig unklar auf HTML (obwohl nicht sicher, warum das der Fall wäre), dann können Sie es so machen.
Und das wird es einpacken. Diese Generatoren sind einfach fantastisch, um schnell und agil zu arbeiten, aber statt für Unternehmer sind sie für Designer. Und das ist meiner Meinung nach wirklich genial. Haben Sie eine schnelle Idee für einen Grenzradius (tab'd vielleicht?) Oder einen Schatten oder einen Farbverlauf oder eine html5-Vorlage mit Blueprint - diese sind dann nur für Sie gemacht. Beachten Sie jedoch, dass dies keine erschöpfende Liste war, aber es waren einige meiner Favoriten, die meine Kollegen in der Vergangenheit verwendet haben. Ich geniesse es sehr viele davon zu benutzen und hoffe es auch.