Ratschläge für komplexe CSS-Illustrationen

Wenn Sie mich fragen würden, welche Frage ich am häufigsten zur Front-End-Entwicklung höre, würde ich sagen: „Wie werde ich besser in CSS?“. Diese Frage kommt normalerweise auf, nachdem ich eine von mir erstellte CSS-Illustration geteilt habe. Es ist etwas, das ich liebe, auf CodePen zu tun.

Für viele ist CSS dieses mythische Biest, das nicht gezähmt werden kann. Dieser Tweet von Chris brachte mich zum Kichern, denn obwohl er ironisch ist, steckt viel Wahrheit darin. Was wäre, wenn ich Ihnen sagen würde, dass Sie nur wenige Eigenschaften und Techniken davon entfernt sind, alles zu erstellen, was Sie wollten? Die Wahrheit ist, dass Sie tatsächlich so nah dran sind.

Ich wollte schon seit einiger Zeit einen Artikel wie diesen verfassen, aber es ist ein schwieriges Thema, da es so viele Möglichkeiten und Techniken gibt, dass es oft mehr als einen Weg gibt, dasselbe zu erreichen. Dasselbe gilt für CSS-Illustrationen. Es gibt keinen richtigen oder falschen Weg, dies zu tun. Wir benutzen alle dieselbe Leinwand. Es gibt einfach so viele verschiedene Werkzeuge, um diese Pixel auf die Seite zu bringen.

Obwohl es keinen „Einheitsansatz“ für CSS-Illustrationen gibt, kann ich Ihnen eine Reihe von Techniken anbieten, die Ihnen auf Ihrer Reise helfen könnten.

Zeit und Übung

CSS-Illustration erfordert viel Zeit und Übung. Je genauer Sie sein wollen und je komplizierter die Illustration, desto länger wird es dauern. Der zeitaufwändige Teil ist normalerweise nicht die Entscheidung, *welche* Eigenschaften verwendet werden sollen und wie, sondern das *Tüfteln*, um die Dinge richtig aussehen zu lassen. Seien Sie bereit, sich mit dem Style-Inspektor in Ihren Browser-Entwicklertools vertraut zu machen! Ich empfehle auch, VisBug auszuprobieren, falls Sie es noch nicht getan haben.

Zwei fantastische CSS-Künstler sind Ben Evans und Diana Smith. Beide haben kürzlich über den Zeitaufwand bei der CSS-Illustration gesprochen.

Ich habe ein Meme-ähnliches Bild von einer Tasse gepostet und Ben's Antwort fasste es perfekt zusammen

Ich war versucht, dies in CSS zu erstellen, als ich den Tweet zum ersten Mal sah, aber dann dachte ich, meine Antwort würde etwa einen Monat dauern.

Es braucht Zeit!

CSS-Illustration pic.twitter.com/vqpQLKTte5

— Jhey 🛠 (@jh3yy) 10. Mai 2020

>

Nachzeichnen ist vollkommen akzeptabel

Wir haben oft eine Vorstellung davon, was wir illustrieren wollen. Dieser Artikel handelt schließlich nicht von Design; es geht darum, ein Bild zu nehmen und es mit dem DOM und CSS zu rendern. Ich bin ziemlich sicher, dass diese Technik seit Anbeginn der Zeit existiert. Aber es ist eine, die ich in den letzten Monaten geteilt habe.

• Finden oder erstellen Sie ein Bild dessen, was Sie illustrieren möchten.
• Ziehen Sie es mit einem `<img>`-Tag in Ihr HTML.
• Positionieren Sie es so, dass es unter Ihrer Illustration liegt.
• Reduzieren Sie die Bildtransparenz, sodass es noch sichtbar, aber nicht zu dominant ist.
• Zeichnen Sie es mit dem DOM nach.

Zu meiner Überraschung ist diese Technik kein allgemeines Wissen. Aber sie ist unschätzbar wertvoll für die Erstellung genauer CSS-Illustrationen.

Sehen Sie diesen Trick in Aktion hier

Hier ist ein Zeitraffer der Erstellung dieser CSS @eggheadio 😎

Die Schatten wurden mit clip-path nachbearbeitet 🛠️

💻 https://#/XhDRspwwFg via @CodePen #webdev #coding #CSS #animation #webdesign #design #creative #100DaysOfCode #HTML #Timelapse https://#/ZQ1hyzcoSA pic.twitter.com/iPf7ksYCGX

— Jhey 🛠 (@jh3yy) 1. Mai 2020

Und probieren Sie es hier aus

Achten Sie auf Responsivität

Wenn es zwei wichtige Techniken gibt, die Sie aus diesem Artikel mitnehmen sollten, dann lassen Sie es die oben genannte „Tracing“-Technik und die nächste sein.

Es gibt einige fantastische Beispiele für CSS-Illustrationen. Aber das Unglückliche an einigen von ihnen ist, dass sie auf kleinen Bildschirmen nicht gestylt – oder sogar nicht sichtbar – sind. Wir leben in einer Zeit, in der erste Eindrücke mit Technologie wichtig sind. Betrachten Sie das Beispiel einer mit CSS illustrierten Tastatur. Jemand stolpert über Ihre Arbeit, öffnet sie auf seinem Smartphone und wird nur mit der halben Illustration oder einem kleinen Teil davon begrüßt. Sie haben wahrscheinlich die coolsten Teile der Demo verpasst!

Hier ist mein Trick: Nutzen Sie Viewport-Einheiten für Ihre Illustrationen und erstellen Sie Ihre eigene skalierte Einheit.

Für die Größen- und Positionsbestimmung haben Sie entweder die Möglichkeit, eine skalierte Einheit oder Prozentsätze zu verwenden. Dies ist besonders nützlich, wenn Sie einen Box-Schatten verwenden müssen, da die Eigenschaft Viewport-Einheiten, aber keine Prozentsätze akzeptiert.

Betrachten Sie das oben von mir erstellte CSS-Logo von egghead.io. Ich habe das Bild, das ich verwenden wollte, gefunden und es mit einem img-Tag in den DOM eingefügt.

<image src='egghead.png'/>

img {
  height: 50vmin;
  left: 50%;
  opacity: 0.25;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
}

Die Höhe, 50vmin, ist die gewünschte Größe der CSS-Illustration. Die reduzierte Deckkraft ermöglicht es uns, die Illustration beim Fortschritt klar zu „verfolgen“.

Dann erstellen wir unsere skalierte Einheit.

/**
  * image dimensions are 742 x 769
  * width is 742
  * height is 769
  * my desired size is 50vmin
*/
:root {
  --size: 50;
  --unit: calc((var(--size) / 769) * 1vmin);
}

Mit den Bildmaßen können wir eine einheitliche Einheit erstellen, die mit unserem Bild skaliert. Wir wissen, dass die Höhe die größte Einheit ist, also verwenden wir diese als Basis, um eine fraktionale Einheit zu erstellen.

Wir erhalten so etwas wie das hier

--unit: 0.06501950585vmin;

Das sieht etwas seltsam aus, aber glauben Sie mir, es ist in Ordnung. Wir können dies verwenden, um den Container unserer Illustration mit `calc()` zu skalieren.

.egg {
  height: calc(769 * var(--unit));
  position: relative;
  width: calc(742 * var(--unit));
  z-index: 2;
}

Wenn wir entweder Prozentsätze oder unsere neue ` --unit`-Benutzereigenschaft verwenden, um Elemente innerhalb des Containers unserer CSS-Illustration zu stylen, erhalten wir responsive CSS-Illustrationen... und alles, was es brauchte, waren ein paar Zeilen Mathematik mit CSS-Variablen!

Verändern Sie die Größe dieser Demo und Sie werden sehen, dass alles immer im Verhältnis bleibt und 50vmin als Größenbeschränkung verwendet wird.

Zweimal messen, einmal schneiden

Ein weiterer Tipp ist, Dinge zu messen. Heck, Sie können sogar ein Maßband schnappen, wenn Sie mit einem physischen Objekt arbeiten!

Das mag etwas seltsam aussehen, aber ich habe diese Szene gemessen. Es ist die TV-Kombinationseinheit, die ich in meinem Wohnzimmer habe. Diese Maße entsprechen Zentimetern. Ich habe sie verwendet, um eine responsive Einheit basierend auf der tatsächlichen Höhe des Fernsehers zu erhalten. Wir können dieser Zahl – und allen anderen – einen Namen geben, der es einfach macht, sich daran zu erinnern, wofür sie ist, dank benutzerdefinierter Eigenschaften.

:root {
  --light-switch: 15;
  --light-switch-border: 10;
  --light-switch-top: 15;
  --light-switch-bottom: 25;
  --tv-bezel: 15;
  --tv-unit-bezel: 4;
  --desired-height: 25vmin;
  --one-cm: calc(var(--desired-height) / var(--tv-height));
  --tv-width: 158.1;
  --tv-height: 89.4;
  --unit-height: 42;
  --unit-width: 180;
  --unit-top: 78.7;
  --tv-bottom: 114.3;
  --scaled-tv-width: calc(var(--tv-width) * var(--one-cm));
  --scaled-tv-height: calc(var(--tv-height) * var(--one-cm));
  --scaled-unit-width: calc(var(--unit-width) * var(--one-cm));
  --scaled-unit-height: calc(var(--unit-height) * var(--one-cm));
}

Sobald wir eine Variable berechnet haben, können wir sie überall verwenden. Ich weiß, dass mein Fernseher 158,1 cm breit und 89,4 cm hoch ist. Ich habe im Handbuch nachgeschaut. Aber in meiner CSS-Illustration wird er immer auf 25vmin skaliert.

Positionieren Sie absolut fast alles

Das spart Ihnen ein paar Tastatureingaben. Öfter als nicht, werden Sie Elemente absolut positionieren wollen. Sparen Sie sich Mühe und legen Sie diese Regel irgendwo ab.

/* Your class name may vary */
.css-illustration *,
.css-illustration *:after,
.css-illustration *:before,
.css-illustration:after,
.css-illustration:before {
  box-sizing: border-box;
  position: absolute;
}

Ihre Tastatur wird es Ihnen danken!

Positionierung ist ein kniffliges Konzept in CSS. Sie können in der CSS-Almanach nachlesen, um weitere Informationen darüber zu erhalten, wie Sie es verwenden können.

Oder spielen Sie mit diesem kleinen Positionierungs-Spielplatz herum

Bleiben Sie bei einem Ansatz

Dies ist mit Abstand die schwierigste Sache. Wie gehen Sie eine CSS-Illustration an? Wo fangen Sie überhaupt an? Sollten Sie mit dem äußersten Teil beginnen und sich nach innen arbeiten? Das funktioniert nicht so gut.

Wahrscheinlich werden Sie einige Ansätze ausprobieren und einen besseren Weg finden. Sie werden sicherlich ein wenig hin und her machen, aber je mehr Sie üben, desto besser werden Sie darin, Muster zu erkennen und einen Ansatz zu entwickeln, der für Sie am besten funktioniert.

Ich neige dazu, meinen Ansatz mit der Erstellung eines Vektorgrafikbildes zu vergleichen, bei dem Illustrationen aus Ebenen bestehen. Teilen Sie es auf und skizzieren Sie es bei Bedarf auf Papier. Aber beginnen Sie von unten und arbeiten Sie sich nach oben vor. Das bedeutet normalerweise zuerst größere Formen und dann feinere Details. Sie können den Stapelindex immer noch ändern, wenn Sie Elemente verschieben müssen.

Pflegen Sie eine solide Struktur für Ihre Stile

Das führt uns zur Struktur. Versuchen Sie, eine flache DOM-Struktur für Ihre Illustration zu vermeiden. Wenn Sie die Dinge atomar halten, können Sie Teile Ihrer Illustration einfacher verschieben. Es macht es auch viel einfacher, Teile der Illustration ein- und auszublenden oder sie später zu animieren. Betrachten Sie die CSS Snorlax-Demo. Arme, Füße, Kopf usw. sind separate Elemente. Das machte die Animation des Arms viel einfacher, als wenn ich versucht hätte, die Dinge zusammenzuhalten, da ich die Animation einfach auf die Klasse `.snorlax__arm-left` anwenden konnte.

Hier ist ein Zeitrafferfoto von mir bei der Erstellung der Demo

Ich habe versucht, einen Zeitraffer des CSS Snorlax zusammenzustellen, den wir letzte Nacht gebaut haben 😅

Es ist amüsant, es sich anzusehen!

💻 https://#/vbVYmFUN5V via @CodePen#webdev #coding #HTML #CSS #webdesign #100DaysOfCode #creative #design #animation pic.twitter.com/0mJtLPRQfP

— Jhey 🛠 (@jh3yy) 28. April 2020

Umgang mit schwierigen Formen

Es gibt einen ziemlich guten Artikel hier auf CSS-Tricks zur Erstellung von Formen mit CSS. Aber was ist mit „schwierigeren“ Formen wie einer langen Kurve oder sogar einer äußeren Kurve? In diesen Szenarien müssen wir über den Tellerrand hinausschauen. Eigenschaften wie `overflow`, `border-radius` und `clip-path` sind große Helfer.

Betrachten Sie diese CSS Jigglypuff-Demo. Schalten Sie die Checkbox um.

Das ist der Schlüssel zur Erstellung von gekrümmten Formen! Wir haben ein Element, das viel größer als der Körper ist und auf das `border-radius` angewendet wird. Wir wenden dann `overflow: hidden` auf den Körper an, um diesen Teil abzuschneiden.

Wie könnten wir eine äußere Kurve erstellen? Diese ist etwas kniffliger. Aber ein Trick, den ich gerne verwende, ist ein transparentes Element mit einem dicken Rand. Dann wende `border-radius` an und schneide den Überschuss ab, falls erforderlich.

Wenn Sie auf den Schalter drücken, wird das Element enthüllt, das wir verwenden, um über diese Ecke zu gehen. Ein weiterer Trick könnte sein, einen Kreis darüber zu legen, der die Hintergrundfarbe hat. Das ist in Ordnung, bis wir die Hintergrundfarbe ändern müssen. Es ist in Ordnung, wenn Sie eine Variable oder etwas für diese Farbe haben. Aber es könnte die Wartung etwas erschweren.

`clip-path` ist Ihr Freund

Sie haben vielleicht ein paar interessante CSS-Eigenschaften in dieser letzten Demo bemerkt, darunter `clip-path`. Sie werden `clip-path` höchstwahrscheinlich benötigen, wenn Sie komplexe CSS-Formen erstellen möchten. Es ist besonders nützlich, um Teile von Elementen abzuschneiden, wenn das Ausblenden des Überlaufs des übergeordneten Felds nicht ausreicht.

Hier ist eine kleine Demo, die ich vor einiger Zeit erstellt habe und die verschiedene `clip-path`-Möglichkeiten zeigt.

Es gibt auch diese Demo, die Ideen aus dem Artikel „Shapes of CSS“ aufgreift und mit `clip-path` nachgebildet wurde.

`border-radius` ist Ihr anderer Freund

Sie benötigen `border-radius`, um Kurven zu erstellen. Ein ungewöhnlicher Trick ist die Verwendung einer „doppelten“ Syntax. Dies ermöglicht es Ihnen, für jede Ecke einen horizontalen und vertikalen Radius zu erstellen.

Spielen Sie mit dieser Demo, um die Kraft von `border-radius` wirklich zu schätzen. Ich befürworte die Verwendung von Prozentsätzen für alles, um die Dinge reaktionsfähig zu halten.

Schattierungstechniken

Sie haben alle Formen, alles ist gut angeordnet und alle richtigen Farben sind vorhanden... aber etwas sieht immer noch nicht richtig aus. Wahrscheinlich fehlt es an Schattierung.

Schattierung verleiht Tiefe und erzeugt ein realistisches Gefühl. Betrachten Sie diese Nachbildung einer Gal Shir-Illustration. Gal ist fantastisch darin, Schatten und Verläufe zu verwenden, um wunderschöne Illustrationen zu erstellen. Ich dachte, es wäre lustig, es nachzubilden und einen Schalter einzubauen, der die Schattierung umschaltet, um zu sehen, was für einen Unterschied das macht.

Schattierungseffekte werden oft mit einer Kombination aus `box-shadow` und `background-image` erstellt.

Das Wichtigste bei diesen Eigenschaften ist, dass wir sie in einer kommagetrennten Liste stapeln können. Zum Beispiel hat der Kessel in der Demo eine Liste von Verläufen, die über den Körper verteilt sind.

.cauldron {
  background:
    radial-gradient(25% 25% at 25% 55%, var(--rim-color), transparent),
    radial-gradient(100% 100% at -2% 50%, transparent, transparent 92%, var(--cauldron-color)),
    radial-gradient(100% 100% at -5% 50%, transparent, transparent 80%, var(--darkness)),
    linear-gradient(310deg, var(--inner-rim-color) 25%, transparent), var(--cauldron-color);
}

Beachten Sie, dass hier `radial-gradient()` und `linear-gradient()` verwendet werden und nicht immer mit perfekt runden numerischen Werten. Auch diese Zahlen sind in Ordnung. Tatsächlich werden Sie viel Zeit damit verbringen, Dinge im Style-Inspektor zu optimieren und zu tüfteln.

Im Grunde ist es dasselbe, wenn Sie mit `box-shadow` arbeiten. Mit diesem können wir jedoch auch den `inset`-Wert verwenden, um knifflige Ränder und zusätzliche Tiefe zu erzeugen.

.cauldron__opening {
  box-shadow:
    0 0px calc(var(--size) * 0.05px) calc(var(--size) * 0.005px) var(--rim-color) inset,
    0 calc(var(--size) * 0.025px) 0 calc(var(--size) * 0.025px) var(--inner-rim-color) inset,
    0 10px 20px 0px var(--darkness), 0 10px 20px -10px var(--inner-rim-color);
}

Es gibt sicherlich Zeiten, in denen es mehr Sinn macht, `filter: drop-shadow()` zu verwenden, um den gewünschten Effekt zu erzielen.

Lynn Fishers a.singlediv.com ist ein brillantes Beispiel für diese Eigenschaften in Aktion. Stöbern Sie auf dieser Seite und inspizieren Sie einige der Illustrationen, um großartige Möglichkeiten zu entdecken, `box-shadow` und `background-image` in Illustrationen zu verwenden.

`box-shadow` ist so leistungsfähig, dass Sie damit Ihre gesamte Illustration erstellen könnten. Ich habe einmal gescherzt, eine CSS-Illustration eines Dollars zu erstellen.

In CSS, richtig? 😅#webdev #CSS #animation #webdesign #coding #100DaysOfCode #HTML https://#/VmyeySsK83

— Jhey 🛠 (@jh3yy) 22. April 2020

Ich habe einen Generator verwendet, um die Illustration mit einem einzigen div zu erstellen. Aber Alvaro Montoro hat es noch einen Schritt weiter gebracht und einen Generator geschrieben, der es mit box-shadow macht.

Präprozessoren sind sehr hilfreich

Auch wenn sie nicht erforderlich sind, können Präprozessoren helfen, Ihren Code sauber und ordentlich zu halten. Pug macht zum Beispiel das Schreiben von HTML schneller, insbesondere wenn es darum geht, Schleifen für die Verarbeitung vieler wiederholender Elemente zu verwenden. Von dort aus können wir CSS-Custom-Properties (CSS-Variablen) so scope-en, dass wir Stile nur einmal definieren und sie dann überschreiben müssen, wo nötig.

Hier ist ein weiteres Beispiel, das eine DRY-Struktur demonstriert. Die Blumen sind mit demselben Markup konstruiert, aber jede hat ihre eigene Indexklasse, die verwendet wird, um gescoped CSS-Eigenschaften anzuwenden.

Die erste Blume hat diese Eigenschaften

.flower--1 {
  --hue: 190;
  --x: 0;
  --y: 0;
  --size: 125;
  --r: 0;
}

Es ist die erste, also basieren alle anderen darauf. Beachten Sie, wie die zweite Blume nach rechts und leicht nach oben verschoben ist. All das braucht nur die Zuweisung unterschiedlicher Werte zu denselben benutzerdefinierten Eigenschaften.

.flower--2 {
  --hue: 320;
  --x: 140;
  --y: -75;
  --size: 75;
  --r: 40;
}

Animierte responsive CSS Leif ist im neuesten CodePen Spark zu sehen! ✨

Für diejenigen, die Animal Crossing nicht kennen: Leif ist ein Faultier mit grünem Daumen, das Ihre Insel besucht 🌻

Hier ist ein Zeitraffer! 📹

💻 https://#/tkHX4nWXp7 via @CodePen pic.twitter.com/naJIrsSlYM

— Jhey 🛠 (@jh3yy) 19. Mai 2020

Das ist alles!

Gehen Sie hinaus, nutzen Sie diese Tipps, erfinden Sie Ihre eigenen, teilen Sie sie und teilen Sie Ihre CSS-Meisterwerke! Und hey, wenn Sie eigene Ratschläge haben, teilen Sie diese bitte auch! Dies ist definitiv eine Sache, die durch viel Versuch und Irrtum gelernt wird - was für mich funktioniert, mag anders aussehen als das, was für Sie funktioniert, und wir können aus diesen unterschiedlichen Ansätzen lernen.