Wenn Sie ein Design mit einem Klick von Photoshop ins Web bringen, ist dies nicht einmal eine aus der Ferne neue Idee. Seit es "Webdesigner" gibt Es war der Traum eines solchen Workflows. Heute werden wir uns ein weiteres Werkzeug anschauen, das dieses Versprechen macht: CSS Hat.
CSS Hat unterscheidet sich jedoch von anderen Apps, die Sie gesehen haben. Es handelt sich nicht um ein ausgereiftes WYSIWYG, mit dem Sie eine komplette Website erstellen können, ohne Code schreiben zu müssen. Es ist vielmehr eine Möglichkeit, ein paar schnelle CSS3-Stile für ein einzelnes Element zu verwenden, indem Sie den Prozess verwenden, den Sie in den letzten zehn Jahren verwendet haben. direkt in Photoshop. Spoiler-Alarm: Es ist gut. Wirklich gut. Lesen Sie weiter, warum.
Treffen Sie den CSS-Hut
Sprechen wir darüber, was CSS Hat ist und was nicht. Erstens ist es keine eigenständige Anwendung. Stattdessen handelt es sich um ein Photoshop-Plugin. Und ich meine nicht eines dieser riesigen Photoshop-Plugins, das sich wirklich wie eine separate App anfühlt. Ich meine ein sehr einfaches Panel, das wirklich nicht viel über die textbasierte Ausgabe hinaus hat.
Für Sie bedeutet das, dass die Lernkurve bemerkenswert niedrig ist. Tatsächlich ist es praktisch nicht vorhanden, wenn Sie sich in Photoshop auskennen.
Der von CSS Hat ausgeführte Trick besteht darin, dass er eine Ebene in Photoshop betrachten, seine verschiedenen Eigenschaften analysieren und dann versuchen kann, diese Eigenschaften mit reinem CSS zu duplizieren. Natürlich kann es nicht alles replizieren, aber das Sortiment ist ziemlich beeindruckend und wird für die meisten Zwecke Ihren Bedürfnissen entsprechen. Hier sind einige der Dinge, mit denen es erfolgreich umgehen kann:
- Ebenenstile: Hier liegt der Nutzen wirklich. Viele Ebenenstile von Photoshop werden bemerkenswert gut in CSS übersetzt (nicht alle, aber viele). Einige Beispiele für unterstützte Stile sind Schatten, Glühen und Überlagerungen von Farbverläufen.
- Abgerundete Ecken: Wenn Sie eine Vektorform mit einem abgerundeten Eckenradius zeichnen, verwendet das resultierende CSS einen entsprechenden Grenzradiuswert.
- Hintergrundfarbe und Deckkraft: Füllen Sie eine Form mit einer Farbe und diese wird auch in Ihrem CSS angewendet.
- Typografie-Stile: Nicht so schnell. Anscheinend kommt diese Funktion, wird aber noch nicht implementiert. Ebenenstile, Füllungen usw. funktionieren weiterhin, aber keine Eigenschaften, die sich auf die Schriftart beziehen.
Spitze: Um ein Gefühl für die Verwendung von Photoshop zur Generierung von CSS zu erhalten, besuchen Sie die kostenlosen Web-App-Ebenenstile. Es ist nicht fast so glatt wie CSS Hat, aber es ist eine lustige kleine Alternative.
Aber ich hasse WYSIWYGs!
Ich weiß, ich hasse Dreamweaver und jede andere App, die versucht, den Codierungsaspekt beim Erstellen von Websites herunterzuspielen. Ich bin mit dir da. Ich codiere Websites von Hand und genieße es, es auf diese Weise zu tun, sodass Sie sicher sein können, dass ich Sie nicht auf einem Pfad hinunterführe, der Ihre Codierungsfehler abschwächt und einen horrenden Output erzeugt.
CSS-Hat ist keine Möglichkeit für Nicht-Codierer, eine gut aussehende Website mit einer beschissenen Codebasis zu betrügen und zu erstellen. Tatsächlich ist es offensichtlich, dass CSS Hat tatsächlich ein Programm für Codierer ist, nicht für Nicht-Codierer. Wenn Sie es effektiv einsetzen möchten, müssen Sie ein gutes Verständnis von CSS haben: Was ist möglich, wie wird es implementiert und wie verschiedene Eigenschaften in Browsern angewendet werden.
Sicher, CSS Hat wird eine Menge Arbeit für Sie mit der Codegenerierung erledigen, aber es gibt Ihnen nur ein kleines Stück des riesigen Puzzles, das eine Website ist, und es liegt an Ihnen, dieses Stück richtig zu integrieren.
Wieso sich die Mühe machen? Das ist eine gültige Frage. Ich glaube, die Antwort liegt in der unbestreitbaren Tatsache, dass CSS3 trotz all seiner erstaunlichen Fähigkeiten verdammt sperrig ist. Es ist viel Code erforderlich, um selbst einfache Ergebnisse zu erzielen. Wenn Sie ein Tool verwenden können, das Ihre Zeitintensität reduziert, während Code generiert wird, der praktisch identisch ist mit dem, was Sie von Hand schreiben würden, warum verwenden Sie ihn nicht?
Lass es uns versuchen!
Ich bin immer skeptisch gegenüber solchen Werkzeugen, aber nachdem ich einige der Beispiele gesehen hatte, die CSS Hat vertreiben konnte, wollte ich es selbst ausprobieren. Lassen Sie uns zunächst eine einfache Schaltfläche in Photoshop erstellen und sehen, wie CSS Hat die Aufgabe erledigt.
Der Prozess hier ist im Wesentlichen genau der Prozess, den Sie für das Erstellen einer Schaltfläche in Photoshop immer benötigen würden. Ich beginne mit dem Zeichnen einer Box mit einem 10px-Eckenradius.
Als Nächstes fügen wir eine Verlaufsüberlagerung hinzu, beginnend mit # 009ced und endet mit # 0065bd.
Jetzt schauen wir uns einen inneren Schatten an, um oben ein subtiles Highlight zu erzeugen.
Lassen Sie uns die Dinge hier beschleunigen und zum fertigen Button springen. Im Grunde habe ich von hier aus ein dunkles inneres Glühen (arbeitet eher wie ein innerer Schatten), einen einzelnen Pixelstrich und einen Schlagschatten hinzugefügt. Denken Sie daran, dass die Erklärung von Photos eine Weile dauert, auch wenn dies alles eine Weile dauert.
Go Go Gadget CSS-Hut!
Jetzt, da wir den Button so haben, wie wir ihn haben wollen, müssen wir nur unser CSS-Hat-Panel öffnen und ein großes Stück Code finden, das darauf wartet, kopiert zu werden.
Bevor wir uns ansehen, wie dies im Browser aussieht, machen wir die Ausgabe noch besser. Unten sehen Sie fünf Knöpfe. Die erste kopiert den Code in die Zwischenablage und die anderen vier Optionen können Sie ein- und ausschalten:
- Fügen Sie Kommentare hinzu, um zu erklären, woher diese bestimmte Zeile kommt.
- Generieren Sie bei Bedarf CSS mit herstellerspezifischen Präfixen.
- Fügen Sie die Breite und Höhe der ausgewählten Ebene zu CSS hinzu.
- Umschließen Sie das CSS in eine Regel, die nach der Ebene benannt ist.
Der Einfachheit halber werde ich nachsehen alle vier Optionen und benenne meine Ebene? .button ?. Jetzt gehe ich zu einem Code-Editor und füge den resultierenden Code in mein CSS ein:
Hat es funktioniert?
Jetzt kommt der Moment der Wahrheit. Wie sieht die Live-Demo im Vergleich zur Photoshop-Version aus? Hier ist deine Antwort:
Wie Sie sehen, sind sie sicherlich nicht vollkommen identisch. Davon abgesehen, sind sie ziemlich nah dran und in vielerlei Hinsicht ist die CSS-Version tatsächlich glatter und sieht besser aus. Meiner Meinung nach ist es eine Verbesserung meines Photoshop-Konzepts!
Es gibt einige Einschränkungen, die Sie beachten müssen. Einige Aspekte von Photoshop-Stilen können zu diesem Zeitpunkt einfach nicht in CSS übersetzt werden. Zum Beispiel fügt Photoshop den Mischmodus "Multiplizieren" hinzu. Schatten standardmäßig fallen lassen, dies kann jedoch nicht auf Ihr CSS übertragen werden.
Davon abgesehen gibt es hier viele fortgeschrittene Möglichkeiten, und Sie können Ihre Arbeit leicht mit einer guten, altmodischen Codierung von Hand ergänzen. Die CSS Hat-Website zeigt einige wirklich beeindruckende Demos, die mit Hilfe dieses großartigen Tools erstellt wurden, wie zum Beispiel das von musHo.
So viel Code!
Ich weiß bereits, was einige von Ihnen an diesem Punkt denken, also lassen Sie mich Sie erwischen, bevor Sie einen unangenehmen Kommentar hinterlassen. Der klare Nachteil der Beispiele, die wir oben sehen, ist, dass sie so viel Dang-Code benötigen. Dies ist jedoch nicht die Schuld von CSS Hat. Der Code, den er produziert, ist eigentlich gut organisiert und so kurz wie möglich.
Die Wahrheit ist, wenn Sie Bilder verwenden möchten, um diese Arten von Effekten zu erstellen, können Sie diesen Weg problemlos gehen. Heutzutage möchten wir in einer Welt, in der alles auf verschiedene Geräte (z. B. mit atemberaubenden Bildschirmauflösungen) skaliert werden muss, Dinge mit reinem Code erstellen, sodass Größe und Pixelierung nie ein Problem sind.
Um dies zu erreichen, wenden wir uns an unseren Freund CSS3, der sich noch immer im Fluss befindet und daher erfordert, dass wir diese riesigen Blöcke redundanten Codes mit Browser-Präfixen verwenden, um alles zu besprechen, was es wert ist, diskutiert zu werden. Wenn Sie die riesigen Codeabschnitte oben sehen, reagieren Sie auf den Zustand des Webdesigns und nicht auf dieses spezielle Tool, wenn Sie eine nachteilige Reaktion haben.
Gegenüber Tools wie CSS Hat kann man sagen, dass sie sehr leicht vergessen, dass Sie wirklich mit Code arbeiten. Wenn Sie Code mit der Hand schreiben, sind Sie sich der Ausgabe viel bewusster und daher eher prägnant, sowohl aus Richtigkeit als auch aus Faulheit. Stellen Sie sicher, dass Sie bei der Verwendung eines Codegenerators die Ausgabe immer genau untersuchen, und fragen Sie sich, ob der Effekt die Aufblähung wert ist.
Was denkst du über CSS Hat?
Nach einer gründlichen Testfahrt bin ich überwältigt, wie einfach es CSS Hat ist, mit Photoshop gültiges, gut codiertes CSS zu generieren. Es ist ein Traum, der für viele Designer in Erfüllung gegangen ist, und ich denke, er verdient den ganzen Hype, den er bekommt, und noch mehr.
Wenn Sie viele CSS3-Stile codieren und Photoshop lieben, sollten Sie auf jeden Fall darüber nachdenken, Ihre Kopie zu erhalten. Es sind jetzt 20 Dollar, was sehr viel zu sein scheint. Wenn Photoshop diese Funktionen jedoch morgen veröffentlicht, würden Sie gerne hunderte von Dollar für das Upgrade ausgeben.
Nun, da Sie mein Spiel gelesen haben, würde ich gerne hören, was Sie denken. Ist dies ein fantastisches neues Werkzeug für Designer und Programmierer oder nur ein dummes Spielzeug, das nicht ernst genommen werden sollte? Beschwörung!