Ich habe kürzlich die animierten Grafiken auf meiner Website mit einem neuen Thema und einer Gruppe bahnbrechender Charaktere aufgefrischt und dabei viele der Techniken, die ich in dieser Serie vorgestellt habe, in die Praxis umgesetzt. Einige meiner Animationen ändern ihr Aussehen, wenn jemand mit ihnen interagiert oder zu verschiedenen Tageszeiten.
Die Farben in der Grafik auf meinen Blogseiten ändern sich jeden Tag von morgens bis abends. Dann gibt es noch den Schneemodus, der dank einer Überlagerungsebene und eines Mischmodus kühle Farben und ein winterliches Thema hinzufügt.
Während ich daran arbeitete, begann ich mich zu fragen, ob mir relative CSS-Farbwerte mehr Kontrolle geben und gleichzeitig den Prozess vereinfachen könnten. Hinweis: In diesem Tutorial konzentriere ich mich auf relative Farbwerte und den OKLCH-Farbraum für die Themengestaltung von Grafiken und Animationen. Wenn Sie tief in die relative Farbe eintauchen möchten, hat Ahmad Shadeed einen hervorragenden interaktiven Leitfaden erstellt. Was Farbräume, Farbskalen und OKLCH angeht, hat unser eigener Geoff Graham darüber geschrieben.
Entscheidend war die wiederholte Verwendung von Elementen. Hintergründe wurden, wann immer möglich, wiederverwendet, wobei Zooms und Überlagerungen dabei halfen, neue Szenen aus demselben Kunstwerk zu erstellen. Es entstand aus der Notwendigkeit heraus, regte aber auch dazu an, eher in Serien als in einzelnen Szenen zu denken. Das Problem beim manuellen Aktualisieren von Farbpaletten Kommen wir gleich zu meiner Herausforderung. In Toon-Titeln wie diesem – basierend auf der Yogi Bear Show-Folge „Lullabye-Bye Bear“ von 1959 – und meiner Arbeit im Allgemeinen sind die Paletten auf einige wenige Farben beschränkt.
Ich erstelle Schattierungen und Tönungen aus meiner sogenannten „Grundierungsfarbe“, um die Palette zu erweitern, ohne weitere Farbtöne hinzuzufügen.
In Sketch arbeite ich im HSL-Farbraum, daher beinhaltet dieser Prozess das Erhöhen oder Verringern des Helligkeitswerts meiner Grundfarbe. Ehrlich gesagt ist es keine mühsame Aufgabe – aber die Wahl einer anderen Grundfarbe erfordert die Erstellung ganz neuer Farbtöne und Tönungen. Dies immer wieder manuell zu erledigen, wird schnell mühsam.
Ich habe den HSL-Farbraum (H (Farbton), S (Sättigung) und L (Helligkeit)) erwähnt, aber das ist nur eine von mehreren Möglichkeiten, Farbe zu beschreiben. RGB – R (Rot), G (Grün), B (Blau) – ist wahrscheinlich das bekannteste, zumindest in seiner Hex-Form. Es gibt auch LAB – L (Helligkeit), A (Grün–Rot), B (Blau–Gelb) – und das neuere, aber mittlerweile weithin unterstützte LCH – L (Helligkeit), C (Chroma), H (Farbton) – Modell in seiner OKLCH-Form. Mit LCH – speziell OKLCH in CSS – kann ich den Helligkeitswert meiner Grundfarbe anpassen.
Oder ich kann sein Chroma ändern. LCH-Chroma und HSL-Sättigung beschreiben beide die Intensität oder Fülle einer Farbe, jedoch auf unterschiedliche Weise. LCH bietet mir eine größere Auswahl und vorhersehbarere Farbmischungen.
Ich kann den Farbton auch ändern, um eine Farbpalette zu erstellen, die die gleichen Helligkeits- und Chromawerte aufweist. Sowohl bei HSL als auch bei LCH beginnt das Farbtonspektrum bei Rot, verläuft über Grün und Blau und kehrt zu Rot zurück.
Warum OKLCH meine Einstellung zu Farbe verändert hat Die Browserunterstützung für den OKLCH-Farbraum ist mittlerweile weit verbreitet, auch wenn Designtools – einschließlich Sketch – nicht aufgeholt haben. Glücklicherweise sollte Sie das nicht davon abhalten, OKLCH zu verwenden. Browser konvertieren Hex-, HSL-, LAB- und RGB-Werte gerne für Sie in OKLCH. Sie können eine benutzerdefinierte CSS-Eigenschaft mit einer Grundfarbe in jedem beliebigen Bereich, einschließlich Hex, definieren: /* Foundation-Farbe */ --foundation: #5accd6;
Alle daraus abgeleiteten Farben werden automatisch in OKLCH konvertiert: --foundation-light: oklch(from var(--foundation) [...]; } --foundation-mid: oklch(from var(--foundation) [...]; } --foundation-dark: oklch(from var(--foundation) [...]; }
Relative Farbe als Designsystem Stellen Sie sich relative Farben so vor, als würden Sie sagen: „Nehmen Sie diese Farbe, optimieren Sie sie und geben Sie mir dann das Ergebnis.“ Es gibt zwei Möglichkeiten, eine Farbe anzupassen: absolute Änderungen und proportionale Änderungen. Sie sehen im Code ähnlich aus, verhalten sich jedoch ganz anders, wenn Sie anfangen, Grundfarben auszutauschen. Das Verständnis dieses Unterschieds kann die Verwendung relativer Farben zu einem System machen. /* Foundation-Farbe */ --foundation: #5accd6;
Der Helligkeitswert meiner Grundierungsfarbe beträgt beispielsweise 0,7837, während eine dunklere Version einen Wert von 0,5837 hat. Um die Differenz zu berechnen, subtrahiere ich den niedrigeren Wert vom höheren und wende das Ergebnis mit einer calc()-Funktion an: --foundation-dark: oklch(von var(--foundation) calc(l - 0,20) c h);
Um eine hellere Farbe zu erzielen, füge ich stattdessen die Differenz hinzu: --foundation-light: oklch(von var(--foundation) calc(l + 0,10) c h);
ChromaAnpassungen folgen dem gleichen Prozess. Um die Intensität meiner Grundfarbe von 0,1035 auf 0,0035 zu reduzieren, subtrahiere ich einen Wert vom anderen: oklch(von var(--foundation) l calc(c - 0,10) h);
Um eine Farbpalette zu erstellen, berechne ich die Differenz zwischen dem Farbtonwert meiner Grundfarbe (200) und meinem neuen Farbton (260): oklch(von var(--foundation) l c calc(h + 60));
Diese Berechnungen sind absolut. Wenn ich einen festen Betrag subtrahiere, sage ich praktisch: „Subtrahieren Sie immer so viel.“ Das Gleiche gilt auch beim Hinzufügen von Festwerten: calc(c - 0,10) calc(c + 0,10)
Ich habe die Grenzen dieses Ansatzes auf die harte Tour kennengelernt. Als ich mich auf das Subtrahieren fester Chroma-Werte verließ, verschwanden die Farben in Richtung Grau, sobald ich die Grundierung änderte. Eine Palette, die für eine Farbe funktionierte, fiel für eine andere auseinander. Die Multiplikation verhält sich anders. Wenn ich Chroma multipliziere, sage ich dem Browser: „Reduzieren Sie die Intensität dieser Farbe um einen bestimmten Anteil.“ Auch wenn sich die Grundierung ändert, bleibt die Farbbeziehung erhalten: calc(c * 0,10)
Meine Regeln zum Bewegen, Skalieren und Drehen
Helligkeit verschieben (addieren oder subtrahieren), Chroma skalieren (multiplizieren), Farbton drehen (Grad hinzufügen oder subtrahieren).
Ich skaliere die Chroma, weil ich möchte, dass Intensitätsänderungen proportional zur Grundfarbe bleiben. Farbtonbeziehungen sind rotierend, daher macht eine Multiplikation des Farbtons keinen Sinn. Helligkeit ist wahrnehmungsbezogen und absolut – ihre Vervielfachung führt oft zu seltsamen Ergebnissen.
Von einer Farbe bis zu einem ganzen Thema Mithilfe der relativen Farbe kann ich eine Grundfarbe definieren und daraus jede andere Farbe generieren, die ich benötige – Füllungen, Striche, Verlaufsstopps, Schatten. An diesem Punkt hört die Farbe auf, eine Palette zu sein, und beginnt, ein System zu sein. Bei SVG-Illustrationen werden in der Regel dieselben wenigen Farben für Füllungen, Striche und Verläufe wiederverwendet. Mit der relativen Farbe können Sie diese Beziehungen einmal definieren und überall wiederverwenden – ähnlich wie Animatoren Hintergründe wiederverwenden, um neue Szenen zu erstellen.
Ändern Sie die Grundfarbe einmal und jede abgeleitete Farbe wird automatisch aktualisiert, ohne dass etwas manuell neu berechnet werden muss. Außerhalb animierter Grafiken könnte ich denselben Ansatz verwenden, um Farben für den Status interaktiver Elemente wie Schaltflächen und Links zu definieren. Die Grundfarbe, die ich in meinem Toon-Titel „Lullabye-Bye Bear“ verwendet habe, ist ein Cyan-blau. Der Hintergrund ist ein radialer Farbverlauf zwischen meiner Grundierung und einer dunkleren Version.
Um alternative Versionen mit ganz anderen Stimmungen zu kreieren, muss ich nur die Grundfarbe ändern: --foundation: #5accd6; --grad-end: var(--foundation); --grad-start: oklch(von var(--foundation) calc(l - 0,2357) calc(c * 0,833) h);
Um diese benutzerdefinierten Eigenschaften an meinen SVG-Verlauf zu binden, ohne Farbwerte zu duplizieren, habe ich hartcodierte Stoppfarbwerte durch Inline-Stile ersetzt:
Als nächstes musste ich sicherstellen, dass mein Toon-Text immer einen Kontrast zu der von mir gewählten Grundfarbe bildet. Eine Farbtondrehung um 180 Grad erzeugt eine Komplementärfarbe, die zwar hervorsticht, aber unangenehm vibrieren kann: .text-light { füllen: oklch(von var(--foundation) l c calc(h + 180)); }
Eine 90°-Verschiebung erzeugt eine lebendige Sekundärfarbe, ohne vollständig komplementär zu sein: .text-light { füllen: oklch(von var(--foundation) l c calc(h - 90)); }
Meine Nachbildung von Quick Draw McGraws Toon-Titel „El Kabong“ aus dem Jahr 1959 verwendet die gleichen Techniken, jedoch mit einer abwechslungsreicheren Palette. Beispielsweise gibt es einen weiteren radialen Farbverlauf zwischen der Grundfarbe und einem dunkleren Farbton.
Das Gebäude und der Baum im Hintergrund sind einfach unterschiedliche Farbtöne derselben Grundfarbe. Für diese Pfade brauchte ich zwei zusätzliche Füllfarben: .bg-mid { füllen: oklch(von var(--foundation) calc(l - 0,04) calc(c * 0,91) h); }
.bg-dark { füllen: oklch(von var(--foundation) calc(l - 0,12) calc(c * 0,64) h); }
Wenn die Fundamente in Bewegung geraten
Bisher war alles, was ich gezeigt habe, statisch. Selbst wenn jemand einen Farbwähler verwendet, um die Grundfarbe zu ändern, erfolgt diese Änderung sofort. Aber animierte Grafiken stehen selten still – der Name sagt es schon. Wenn also Farbe Teil des Systems ist, gibt es keinen Grund, warum sie nicht auch animiert werden kann.
Um die Grundfarbe zu animieren, muss ich sie zunächst in ihre OKLCH-Kanäle aufteilen– Helligkeit, Chroma und Farbton. Aber es gibt noch einen wichtigen zusätzlichen Schritt: Ich muss diese Werte als typisierte benutzerdefinierte Eigenschaften registrieren. Aber was bedeutet das?
Standardmäßig weiß ein Browser nicht, ob ein benutzerdefinierter CSS-Eigenschaftswert eine Farbe, Länge, Zahl oder etwas ganz anderes darstellt. Das bedeutet oft, dass sie während der Animation nicht reibungslos interpoliert werden können und von einem Wert zum nächsten springen.
Durch die Registrierung einer benutzerdefinierten Eigenschaft wird dem Browser mitgeteilt, welche Art von Wert sie darstellt und wie sie sich im Laufe der Zeit verhalten soll. In diesem Fall möchte ich, dass der Browser meine Farbkanäle als Zahlen behandelt, damit sie reibungslos animiert werden können.
@property --f-l {
Syntax: „
@property --f-c {
Syntax: „
@property --f-h {
Syntax: „
Nach der Registrierung verhalten sich diese benutzerdefinierten Eigenschaften wie natives CSS. Der Browser kann sie Frame für Frame interpolieren. Anschließend baue ich die Grundfarbe aus diesen Kanälen neu auf: --foundation: oklch(var(--f-l) var(--f-c) var(--f-h));
Dadurch wird die Grundfarbe wie jeder andere numerische Wert animierbar. Hier ist eine einfache „atmende“ Animation, die die Helligkeit im Laufe der Zeit sanft verändert: @keyframes atme { 0 %, 100 % { --f-l: 0,36; } 50 % { --f-l: 0,46; } }
.toon-title { Animation: 10 Sekunden lang ein- und ausatmen, unendlich; }
Da jede andere Farbe in Füllungen, Verläufen und Strichen von --foundation abgeleitet ist, werden sie alle zusammen animiert und es muss nichts manuell aktualisiert werden. Eine animierte Farbe, viele Effekte Zu Beginn dieses Prozesses habe ich mich gefragt, ob relative CSS-Farbwerte mehr Möglichkeiten bieten und gleichzeitig die Implementierung vereinfachen könnten. Ich habe der Kontaktseite meiner Website kürzlich einen neuen Goldminen-Hintergrund hinzugefügt, und die erste Version enthielt Öllampen, die leuchteten und schwingten.
Ich wollte untersuchen, wie das Animieren relativer CSS-Farben das Mineninnere realistischer machen kann, indem es mit den Farben der Lampen getönt wird. Ich wollte, dass sie die Welt um sie herum so beeinflussen, wie es echtes Licht tut. Anstatt also mehrere Farben zu animieren, habe ich ein kleines Beleuchtungssystem gebaut, das nur eine Farbe animiert.
Meine erste Aufgabe bestand darin, eine Überlagerungsebene zwischen dem Hintergrund und meinen Lampen zu platzieren:
Ich habe „mix-blend-mode: color“ verwendet, weil dadurch das, was sich darunter befindet, getönt und gleichzeitig die darunter liegende Luminanz erhalten bleibt. Da ich möchte, dass das Overlay nur sichtbar ist, wenn Animationen aktiviert sind, habe ich das Overlay aktiviert: .svg-mine #overlay { Anzeige: keine; }
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #overlay { Anzeige: Block; Deckkraft: 0,5; } }
Die Auflage war vorhanden, aber noch nicht mit den Lampen verbunden. Ich brauchte eine Lichtquelle. Meine Lampen sind einfach und jede enthält ein Kreiselement, das ich mit einem Filter verwischt habe. Der Filter erzeugt eine sehr weiche Unschärfe über den gesamten Kreis.
Anstatt das Overlay und die Lampen separat zu animieren, animiere ich ein einzelnes „Flammen“-Farbtoken und leite daraus alles andere ab. Zuerst registriere ich drei typisierte benutzerdefinierte Eigenschaften für OKLCH-Kanäle:
@property --fl-l {
Syntax: „
Ich habe diese Kanäle animiert und dabei bewusst ein paar Frames in Richtung Orange verschoben, damit das Flackern klar wie Feuerschein aussieht:
@keyframes Flamme { 0 %, 100 % { --fl-l: 0,86; --fl-c: 0,12; --fl-h: 95; } 6 % { --fl-l: 0,91; --fl-c: 0,10; --fl-h: 92; } 12 % { --fl-l: 0,83; --fl-c: 0,14; --fl-h: 100; } 18 % { --fl-l: 0,88; --fl-c: 0,11; --fl-h: 94; } 24 % { --fl-l: 0,82; --fl-c: 0,16; --fl-h: 82; } 30 % { --fl-l: 0,90; --fl-c: 0,12; --fl-h: 90; } 36 % { --fl-l: 0,79; --fl-c: 0,17; --fl-h: 76; } 44 % { --fl-l: 0,87; --fl-c: 0,12; --fl-h: 96; } 52 % { --fl-l: 0,81; --fl-c: 0,15; --fl-h: 102; } 60 % { --fl-l: 0,89; --fl-c: 0,11; --fl-h: 93; } 68 % { --fl-l: 0,83; --fl-c: 0,16; --fl-h: 85; } 76 % { --fl-l: 0,91; --fl-c: 0,10; --fl-h: 91; } 84 % { --fl-l: 0,85; --fl-c: 0,14; --fl-h: 98; } 92 % {--fl-l: 0,80; --fl-c: 0,17; --fl-h: 74; } }
Dann habe ich diese Animation auf die SVG-Datei übertragen, sodass die gemeinsam genutzten Variablen sowohl für die Lampen als auch für mein Overlay verfügbar sind:
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] { Animation: Flamme 3,6s unendlich linear; Isolation: isolieren;
/* Flammenfarbe aus animierten Kanälen erstellen */ --flame: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Lampenfarbe abgeleitet von der Flamme */ --lamp-core: oklch(from var(--flame) calc(l + 0.05) calc(c * 0.70) h);
/* Overlay-Tönung, abgeleitet von derselben Flamme */ --overlay-tint: oklch(von var(--flame) calc(l + 0,06) calc(c * 0,65) calc(h - 10)); } }
Schließlich habe ich diese abgeleiteten Farben auf die leuchtenden Lampen und die Überlagerung angewendet, auf die sie sich auswirken: @media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #mine-lamp-1 > Kreis, .svg-mine[data-animations=on] #mine-lamp-2 > Kreis { füllen: var(--lamp-core); }
.svg-mine[data-animations=on] #overlay { Anzeige: Block; fill: var(--overlay-tint); Deckkraft: 0,5; } }
Wenn sich die Flamme in Richtung Orange verschiebt, erwärmen sich die Lampen und die Szene erwärmt sich mit ihnen. Wenn die Flamme abkühlt, setzt sich alles zusammen. Das Beste daran ist, dass nichts manuell geschrieben wird. Wenn ich die Grundfarbe ändere oder die Flammenanimationsbereiche optimiere, wird das gesamte Beleuchtungssystem gleichzeitig aktualisiert. Das Endergebnis können Sie auf meiner Website sehen. Wiederverwendung, Wiederverwendung, erneut besucht Diese Hanna-Barbera-Animatoren waren notgedrungen gezwungen, Elemente wiederzuverwenden, aber ich verwende Farben wieder, weil meine Arbeit dadurch konsistenter und einfacher zu pflegen ist. Mit den relativen CSS-Farbwerten kann ich Folgendes tun:
Definieren Sie eine einzelne Grundierungsfarbe, Beschreiben Sie, in welcher Beziehung andere Farben dazu stehen. Verwenden Sie diese Beziehungen überall wieder und Animieren Sie das System, indem Sie einen Wert ändern.
Relative Farben erleichtern nicht nur die Themenfindung. Es fördert eine Denkweise, bei der Farbe ebenso wie Bewegung beabsichtigt ist – und bei der die Änderung eines Werts eine ganze Szene verändern kann, ohne das darunter liegende Werk neu zu schreiben.
