Ich liebe es, die wachsende Welt der einzelnen Webapplikationen im Auge zu behalten, die einen Teil Ihrer Arbeit als Webdesigner etwas einfacher machen sollen. Heute schauen wir uns drei dieser Tools an, die mir in letzter Zeit Spaß gemacht haben.
Beginnen wir mit Colllor, einer großartigen Möglichkeit, aus einer einzigen Farbe viele zu machen. Als Nächstes werden wir uns mit Warp-CSS beschäftigen und einige erstaunliche CSS-Typografien erstellen, von denen Sie wahrscheinlich nicht gedacht hätten, dass sie möglich wären. Abschließend möchten wir uns Bear CSS ansehen, um schnell ein Starter-Stylesheet basierend auf Ihrem HTML-Code zu generieren. Lass uns anfangen!
Colllor
Das erste neue Tool, das wir uns ansehen werden, ist Colllor, eine unterhaltsame App, mit der Sie Ihren Farbpaletten Abwechslung verleihen können. Das Konzept hier ist einfach: "Verwandeln Sie eine Farbe in eine Reihe alternativer Farben." Mal sehen, wie es funktioniert.
Wie es funktioniert
Schritt eins ist einfach, eine Farbe auszuwählen. Nehmen Sie diese Startfarbe, tippen Sie sie ein und drücken Sie die? Auswahlfarbe? Taste. Sie können einen Hex-Code oder sogar eine Standardfarbe eingeben. Alternativ können Sie die Zufallsfarbtaste drücken, um eine Probefahrt durchzuführen.
Von hier ist die Ausgabe ziemlich beeindruckend. Sie erhalten vier horizontale Balken, die mit neuen Farbfeldern gefüllt sind: Farbtöne, Töne, Mischen und Ähnliches. Ihre Originalfarbe ist als Referenz deutlich hervorgehoben.
Ihnen werden über fünfzig verwandte Farbfelder präsentiert, von denen jedes gut beschriftet ist, einen coolen 3D-Hover-Effekt hat und mit einem einzigen Klick in die Zwischenablage kopiert werden kann.
Meine Gedanken zu Colllor
Ich bin ein Trottel für Farb-Apps und dieses zog mich sofort ein. Es ist wirklich gut gestaltet und interaktiv genug, um das Finden von Farben zu einem wirklich angenehmen Erlebnis zu machen. Am Anfang war ich etwas verwirrt, warum Standardoptionen wie das Erzeugen komplementärer Farbfelder nicht enthalten waren. Es gibt jedoch eine Vielzahl von Apps mit dieser Funktionalität und ich mag, dass Colllor in seiner Herangehensweise einzigartig ist.
Im Allgemeinen verwende ich 0to255, um verschiedene Schattierungen einer einzigen Farbe zu finden. Diese Seite ist jedoch eher träge. Colllor ist schneller und vielseitiger. Besonders einzigartig ist der? Mix? Option, mit der Sie zwei Farben auswählen können, um einen Farbverlauf einzelner Farben zwischen den beiden Farben zu sehen.
Eine andere Sache, die gut funktioniert, ist das Kopieren in die Zwischenablage. Merkmal. Viele Farbhilfsprogramme haben das Bedürfnis, das? #? Wenn die Farbe kopiert wird, ist dies für CSS nützlich, für Photoshop jedoch schlecht (CS6 spricht dies an). Ich ziehe es vor, das Symbol wegzulassen, was der Weg ist, den Colllor genommen hat.
Ich habe wirklich keine Beschwerden hier. Colllor ist ein fantastisches und kostenloses Farbprogramm, das Sie unbedingt zu Ihrer Lesezeichenliste hinzufügen sollten.
CSS Warp
CSS Warp ist ein verrücktes Werkzeug, mit dem Sie Live-Web-Typen erstellen können, die einem komplizierten Pfad folgen. Das Tool ist der Pfadtyp-Funktionalität in Illustrator auffallend ähnlich. Daher sollte der Workflow so vertraut sein, dass Sie ihn ziemlich schnell abrufen können.
Wie es funktioniert
Gehen wir einen Test durch, um zu sehen, wie es funktioniert. Als Erstes geben Sie Text ein. Da der endgültige generierte Code sehr umfangreich sein kann (wir werden in einer Minute darüber sprechen), empfehle ich Ihnen, Ihren Text kurz und knapp zu halten. Wenn Sie fertig sind, klicken Sie auf die Warp-Schaltfläche.
Im nächsten Schritt definieren Sie die Kurve, der Ihr Typ folgen soll. Die Optionen hier sind ziemlich flexibel. Sie können entweder einen eigenen Bézier-Pfad festlegen oder einen Kreis auswählen. Die Punkte erzeugen standardmäßig abgerundete Kurven, aber unten in der App können Sie sie in scharfe Ecken umwandeln.
In dem kleinen Vorschaufenster, das neben all diesen Steuerelementen angezeigt wird, führen Sie die eigentlichen Formen aus. Dieses Update wird live mit allen von Ihnen vorgenommenen Änderungen aktualisiert, sodass Sie immer genau wissen können, wie das Endprodukt aussehen wird.
Sie können auch mehrere Optionen für die Schriftart definieren. Dazu gehören die Möglichkeit, Größe, Zeilenhöhe, Kerning * und Schriftart festzulegen. Ich finde es toll, dass Sie hier aus der Google Web Font-Bibliothek auswählen können. Sie haben auch einige Optionen, wie der Text am Pfad ausgerichtet wird.
* Ich habe den Begriff "Kerning" verwendet. hier, weil dies der Name des Steuerelements in der eigentlichen App ist. Es ist tatsächlich falsch beschriftet. Dieser Schieberegler steuert die Nachverfolgung des Typs. Der Unterschied ist wichtig. Lesen Sie dies für weitere Informationen.
Wenn Sie fertig sind und den gewünschten Typ haben, klicken Sie auf "HTML generieren". Klicken Sie auf die Schaltfläche oberhalb der Vorschau, um den Textausschnitt zu kopieren und in Ihren Code einzufügen.
Meine Gedanken zu CSS Warp
Ich kann ehrlich sagen, dass ich noch nie ein anderes Tool gesehen habe, das diesen Trick mit Live-Webtext so gut macht. Die Ergebnisse sind absolut beeindruckend und einfach nichts, was Sie jemals von Hand tun möchten. Ich liebe es, wenn Entwickler die Initiative ergreifen, um die Grenzen des Möglichen im Web zu erweitern und ihre Arbeit frei zu verteilen.
Mein einziges echtes Problem hier ist wirklich etwas, das völlig außerhalb der Kontrolle des Entwicklers liegt. CSS und HTML verfügen nicht über eine integrierte Funktionalität für das Tippen entlang eines Pfads. Daher können Sie nur jeden Buchstaben in einem Bereich umbrechen und dann die Buchstaben unabhängig voneinander positionieren und drehen. Dies führt zu einem riesigen Teil des Codes, der nicht leicht zu interpretieren ist. Wie gesagt, der Entwickler kann dem wirklich nicht helfen, andere Tools, die auf einzelne Buchstaben wie Kern.js abzielen, müssen auf die gleiche Weise arbeiten.
Insgesamt war ich überwältigt, wie gut die App insgesamt ist. Es ist sehr einfach, den gewünschten Effekt zu erzielen, und es gibt unzählige Optionen, um auf dem Weg zu optimieren. Es gibt auch eine JavaScript-Version, die Sie auschecken sollten.
Tragen Sie CSS
Bear CSS führt nur eines aus: Es liefert ein Starter-Stylesheet, wenn Sie eine HTML-Datei hochladen.Es ist nicht die Aufgabe, Ihre Webseite zu gestalten, sondern Sie müssen lediglich mit den offensichtlichen Stilhaken für Sie beginnen.
Wie es funktioniert
Bear CSS erfordert kein Nachdenken oder Anstrengung von Ihrer Seite. Alles was Sie tun können, ist ein HTML-Dokument hochzuladen.
Nachdem Sie Ihr HTML-Dokument hochgeladen haben, klicken Sie auf "CSS herunterladen". Taste. Ich nahm ein zufälliges Dokument, das ich herumgelegt hatte, um es auszuprobieren, und erhielt die folgende Ausgabe.
Meine Gedanken über das Bären-CSS
Ich war ziemlich skeptisch gegenüber diesem Werkzeug. Ich schreibe gerne mein eigenes CSS und war nicht verrückt nach der Idee, etwas zu versuchen, es für mich zu tun. Davon abgesehen war ich angenehm überrascht von der Ausgabe. Die Organisation ist zwar nicht für jedes Projekt geeignet, aber auf jeden Fall logisch und weitgehend anwendbar. Ich mag das ohne Anstrengung. Ich habe ein schönes CSS-Starter-Dokument mit den wichtigsten Haken, die ich ansprechen möchte, klar getrennt in Kategorien wie Typografie und Layout.
Es ist offensichtlich kein magisches Werkzeug. Es liest Ihre Gedanken nicht und erstellt keine komplexen Selektoren, es ist nur die "Bärennotwendigkeit". (Kapiert?). Nicht jeder schreibt den vollständigen HTML-Code einer Webseite, bevor er mit CSS startet. Wenn Sie dies tun, sollten Sie dies jedoch unbedingt ausprobieren.
Eine der Funktionen, die ich wirklich gerne sehen würde, ist die Möglichkeit, etwas HTML einzufügen, anstatt eine Datei hochzuladen. Es wäre schön, wenn Sie einfach eine schnelle Kopieraktion aus meinem geöffneten Texteditor ausführen. In einigen meiner Tests, die wiederholte Klassen enthielten, wiederholte das generierte CSS auch diesen Klassenselektor, was offensichtlich überflüssig und unnötig ist.
Eine andere Sache, die ich gerne sehen würde, ist ein paar zusätzliche Optionen, die für Pro-Benutzer zu optimieren sind. Ein paar verschiedene Organisationsmethoden, ob Schwebeflugzeuge eingeschlossen werden sollen oder nicht, und möglicherweise ein Zurücksetzen / Normalisieren der Inklusion.
Fazit
Ich hoffe, Sie haben ein neues Tool oder vielleicht drei neue Tools gefunden, die Sie in Ihre Goody-Bag für die Webentwicklung einfügen können. Die drei oben genannten Apps wirken sich nicht drastisch auf Ihren Workflow aus, sie können jedoch bestimmte Teile davon etwas einfacher machen.
Hinterlasse einen Kommentar und lass uns wissen, was du von den drei Apps findest. Hast du schon mal welche benutzt? Welche anderen großartigen Tools haben Ihnen in letzter Zeit geholfen?