Jeg har for nylig opdateret den animerede grafik på min hjemmeside med et nyt tema og en gruppe banebrydende karakterer, hvor jeg har praktiseret masser af de teknikker, jeg delte i denne serie. Et par af mine animationer ændrer udseende, når nogen interagerer med dem eller på forskellige tidspunkter af dagen.
Farverne i grafikken øverst på mine blogsider skifter fra morgen til aften hver dag. Så er der snetilstanden, som tilføjer kølige farver og et vinterligt tema takket være et overlejringslag og en blandingstilstand.
Mens jeg arbejdede på dette, begyndte jeg at spekulere på, om CSS relative farveværdier kunne give mig mere kontrol og samtidig forenkle processen. Bemærk: I denne vejledning vil jeg fokusere på relative farveværdier og OKLCH-farverum til temagrafik og animationer. Hvis du vil dykke dybt ned i relative farver, har Ahmad Shadeed skabt en fantastisk interaktiv guide. Hvad angår farverum, farveskalaer og OKLCH, skrev vores egen Geoff Graham om dem.
Gentagen brug af elementer var nøglen. Baggrunde blev genbrugt, når det var muligt, med zoom og overlejringer, der hjalp med at konstruere nye scener fra det samme kunstværk. Det blev født af nødvendighed, men det tilskyndede også til at tænke i serier frem for individuelle scener. Problemet med manuel opdatering af farvepaletter Lad os gå direkte til min udfordring. I Toon Titles som denne - baseret på Yogi Bear Show-episoden "Lullabye-Bye Bear" fra 1959 - og mit arbejde generelt, er paletter begrænset til nogle få udvalgte farver.
Jeg skaber nuancer og nuancer ud fra det, jeg kalder min "foundation"-farve for at udvide paletten uden at tilføje flere nuancer.
I Sketch arbejder jeg i HSL-farverummet, så denne proces involverer at øge eller mindske lyshedsværdien af min foundationfarve. Helt ærligt, det er ikke en besværlig opgave - men at vælge en anden foundationfarve kræver at skabe et helt nyt sæt af nuancer og nuancer. At gøre det manuelt, igen og igen, bliver hurtigt besværligt.
Jeg nævnte HSL - H (nuance), S (saturation) og L (lightness) - farverum, men det er blot en af flere måder at beskrive farve på. RGB — R (rød), G (grøn), B (blå) — er nok den mest velkendte, i det mindste i sin Hex-form. Der er også LAB - L (lyshed), A (grøn-rød), B (blå-gul) - og den nyere, men nu bredt understøttede LCH - L (lethed), C (chroma), H (nuance) - model i sin OKLCH-form. Med LCH - specifikt OKLCH i CSS - kan jeg justere lyshedsværdien af min foundationfarve.
Eller jeg kan ændre dens chroma. LCH-chroma og HSL-mætning beskriver begge intensiteten eller rigdommen af en farve, men de gør det på forskellige måder. LCH giver mig et bredere udvalg og mere forudsigelig blanding mellem farver.
Jeg kan også ændre nuancen for at skabe en palet af farver, der deler de samme lysheds- og kromaværdier. I både HSL og LCH starter farvetonespektret ved rødt, bevæger sig gennem grønt og blåt og vender tilbage til rødt.
Hvorfor OKLCH ændrede, hvordan jeg tænker på farve Browserunderstøttelse af OKLCH-farverummet er nu udbredt, selvom designværktøjer - inklusive Sketch - ikke har indhentet det. Heldigvis skulle det ikke forhindre dig i at bruge OKLCH. Browsere vil med glæde konvertere Hex-, HSL-, LAB- og RGB-værdier til OKLCH for dig. Du kan definere en tilpasset CSS-egenskab med en grundfarve i ethvert rum, inklusive Hex: /* Foundation farve */ --fundament: #5accd6;
Eventuelle farver afledt af det vil automatisk blive konverteret til OKLCH: --foundation-light: oklch(fra var(--foundation) [...]; } --foundation-mid: oklch(fra var(--foundation) [...]; } --foundation-dark: oklch(fra var(--foundation) [...]; }
Relativ farve som et designsystem Tænk på relativ farve som at sige: "Tag denne farve, juster den, og giv mig så resultatet." Der er to måder at justere en farve på: absolutte ændringer og proportionale ændringer. De ligner hinanden i kode, men opfører sig meget anderledes, når du begynder at bytte foundationfarver. At forstå denne forskel er det, der kan gøre brug af relativ farve til et system. /* Foundation farve */ --fundament: #5accd6;
For eksempel er lyshedsværdien af min foundationfarve 0,7837, mens en mørkere version har en værdi på 0,5837. For at beregne forskellen trækker jeg den lavere værdi fra den højere og anvender resultatet ved hjælp af en calc() funktion: --foundation-dark: oklch(fra var(--fundament) beregnet (1 - 0,20) c h);
For at opnå en lysere farve tilføjer jeg forskellen i stedet: --fundament-lys: oklch(fra var(--fundament) beregnet (1 + 0,10) c h);
Chromajusteringer følger samme proces. For at reducere intensiteten af min foundationfarve fra 0,1035 til 0,0035 trækker jeg en værdi fra den anden: oklch(fra var(--fundament) 1 beregnet (c - 0,10) h);
For at skabe en palette af nuancer beregner jeg forskellen mellem nuanceværdien af min foundationfarve (200) og min nye nuance (260): oklch(fra var(--fundament) lc beregnet (h + 60));
Disse beregninger er absolutte. Når jeg trækker et fast beløb fra, siger jeg i virkeligheden: "Træk altid så meget fra." Det samme gælder ved tilføjelse af faste værdier: beregnet(c - 0,10) beregnet(c + 0,10)
Jeg lærte grænserne for denne tilgang på den hårde måde. Da jeg stolede på at trække faste kromaværdier fra, faldt farverne sammen mod grå, så snart jeg ændrede fundamentet. En palette, der fungerede for én farve, faldt fra hinanden for en anden. Multiplikation opfører sig anderledes. Når jeg multiplicerer chroma, siger jeg til browseren: "Reducer denne farves intensitet med en proportion." Forholdet mellem farver forbliver intakt, selv når fundamentet ændres: beregnet(c * 0,10)
Mine Move It, Scale It, Rotate It-regler
Flyt lethed (tillægge eller trække fra), Skala chroma (multiplicere), Roter nuance (tilføj eller fratræk grader).
Jeg skalerer chroma, fordi jeg ønsker, at intensitetsændringer skal forblive proportionale med grundfarven. Hue-forhold er roterende, så det giver ingen mening at multiplicere nuance. Lethed er perceptuel og absolut - multiplicering af den giver ofte mærkelige resultater.
Fra én farve til et helt tema Relativ farve giver mig mulighed for at definere en grundfarve og generere enhver anden farve, jeg har brug for – fyld, streger, gradientstop, skygger – ud fra den. På det tidspunkt holder farve op med at være en palet og begynder at være et system. SVG-illustrationer har en tendens til at genbruge de samme få farver på tværs af udfyldninger, streger og gradienter. Relativ farve giver dig mulighed for at definere disse relationer én gang og genbruge dem overalt - ligesom animatorer genbrugte baggrunde til at skabe nye scener.
Skift grundfarven én gang, og hver afledte farve opdateres automatisk uden at genberegne noget i hånden. Uden for animeret grafik kunne jeg bruge den samme tilgang til at definere farver for tilstanden af interaktive elementer såsom knapper og links. Grundfarven, jeg brugte i min "Lullabye-Bye Bear" Toon-titel, er en blå, der ser cyan ud. Baggrunden er en radial gradient mellem min foundation og en mørkere version.
For at skabe alternative versioner med helt andre stemninger behøver jeg kun at ændre foundationfarven: --fundament: #5accd6; --grad-end: var(--fundament); --grad-start: oklch(fra var(--foundation) beregnet (1 - 0,2357) beregnet (c * 0,833) h);
For at binde disse brugerdefinerede egenskaber til min SVG-gradient uden at duplikere farveværdier, erstattede jeg hårdkodede stopfarveværdier med inline-stile:
Dernæst var jeg nødt til at sikre, at min Toon Text altid står i kontrast til den grundfarve, jeg vælger. En 180 graders nuancerotation producerer en komplementær farve, der helt sikkert popper - men kan vibrere ubehageligt: .text-light { fill: oklch(fra var(--foundation) lc beregnet (h + 180)); }
En 90° forskydning giver en levende sekundær farve uden at være fuldstændig komplementær: .text-light { fill: oklch(fra var(--foundation) lc beregnet (h - 90)); }
Min genskabelse af Quick Draw McGraws 1959 Toon-titel "El Kabong" bruger de samme teknikker, men med en mere varieret palet. For eksempel er der en anden radial gradient mellem grundfarven og en mørkere nuance.
Bygningen og træet i baggrunden er simpelthen forskellige nuancer af den samme grundfarve. Til disse stier havde jeg brug for to ekstra fyldfarver: .bg-mid { fill: oklch(fra var(--foundation) beregnet (1 - 0,04) beregnet (c * 0,91) h); }
.bg-dark { fill: oklch(fra var(--foundation) beregnet (1 - 0,12) beregnet (c * 0,64) h); }
Når fundamenterne begynder at bevæge sig
Indtil videre har alt, hvad jeg har vist, været statisk. Selv når nogen bruger en farvevælger til at ændre foundationfarven, sker denne ændring øjeblikkeligt. Men animeret grafik står sjældent stille - ledetråden ligger i navnet. Så hvis farve er en del af systemet, er der ingen grund til, at den ikke også kan animere.
For at animere grundfarven skal jeg først opdele den i dens OKLCH-kanaler- lyshed, farve og farvetone. Men der er et vigtigt ekstra trin: Jeg skal registrere disse værdier som indtastede brugerdefinerede egenskaber. Men hvad betyder det?
Som standard ved en browser ikke, om en tilpasset CSS-egenskabsværdi repræsenterer en farve, længde, tal eller noget helt andet. Det betyder ofte, at de ikke kan interpoleres jævnt under animation og springe fra en værdi til den næste.
Registrering af en tilpasset ejendom fortæller browseren, hvilken type værdi den repræsenterer, og hvordan den skal opføre sig over tid. I dette tilfælde vil jeg have browseren til at behandle mine farvekanaler som tal, så de kan animeres uden problemer.
@property --f-l {
syntaks: "
@property --f-c {
syntaks: "
@property --f-h {
syntaks: "
Når de er registreret, opfører disse tilpassede egenskaber sig som indbygget CSS. Browseren kan interpolere dem frame-by-frame. Jeg genopbygger derefter grundfarven fra disse kanaler: --fundament: oklch(var(--f-l) var(--f-c) var(--f-h));
Dette gør, at foundationfarven bliver animerbar, ligesom enhver anden numerisk værdi. Her er en simpel "åndende" animation, der forsigtigt skifter lethed over tid: @keyframes ånder { 0 %, 100 % { --f-l: 0,36; } 50% {-f-l: 0,46; } }
.toon-title { animation: ånde 10s lethed-i-ud uendelig; }
Fordi hver anden farve i fyld, gradienter og streger er afledt af --foundation, animerer de alle sammen, og intet skal opdateres manuelt. Én animeret farve, mange effekter I starten af denne proces spekulerede jeg på, om relative CSS-farveværdier kunne tilbyde flere muligheder og samtidig gøre dem nemmere at implementere. Jeg har for nylig tilføjet en ny guldminebaggrund til min hjemmesides kontaktside, og den første iteration inkluderede olielamper, der lyser og svinger.
Jeg ville undersøge, hvordan animation af CSS-relative farver kunne gøre minens indre mere realistisk ved at tone det med farver fra lamperne. Jeg ønskede, at de skulle påvirke verden omkring dem, sådan som rigtigt lys gør. Så i stedet for at animere flere farver, byggede jeg et lille belysningssystem, der kun animerer én farve.
Min første opgave var at placere et overlejringslag mellem baggrunden og mine lamper:
Jeg brugte mix-blend-mode: farve, fordi det toner det, der er under det, samtidig med at den underliggende luminans bevares. Da jeg kun ønsker, at overlejringen skal være synlig, når animationer er slået til, har jeg valgt overlejringen: .svg-mine #overlay { display: ingen; }
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #overlay { display: blok; opacitet: 0,5; } }
Overlægget var på plads, men endnu ikke forbundet med lamperne. Jeg havde brug for en lyskilde. Mine lamper er enkle, og hver enkelt indeholder et cirkelelement, som jeg slørede med et filter. Filteret giver en meget blød sløring over hele cirklen.
I stedet for at animere overlejringen og lamperne separat, animerer jeg et enkelt "flamme"-farvetoken og udleder alt andet fra det. Først registrerer jeg tre indtastede brugerdefinerede egenskaber for OKLCH-kanaler:
@property --fl-l {
syntaks: "
Jeg animerede disse kanaler og skubbede bevidst et par billeder mod orange, så flimmeret tydeligt aflæses som ild:
@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-1: 0,83; --fl-c: 0,14; --fl-h: 100; } 18% {-fl-1: 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-1: 0,79; --fl-c: 0,17; --fl-h: 76; } 44% {-fl-1: 0,87; --fl-c: 0,12; --fl-h: 96; } 52% {-fl-1: 0,81; --fl-c: 0,15; --fl-h: 102; } 60% {-fl-l: 0,89; --fl-c: 0,11; --fl-h: 93; } 68% {-fl-1: 0,83; --fl-c: 0,16; --fl-h: 85; } 76% {-fl-1: 0,91; --fl-c: 0,10; --fl-h: 91; } 84% {-fl-1: 0,85; --fl-c: 0,14; --fl-h: 98; } 92 % {--fl-1: 0,80; --fl-c: 0,17; --fl-h: 74; } }
Derefter scopede jeg den animation til SVG, så de delte variabler er tilgængelige for både lamperne og mit overlay:
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] { animation: flamme 3.6s uendelig lineær; isolation: isolere;
/* Byg en flammefarve fra animerede kanaler */ --flamme: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Lampefarve afledt af flamme */ --lampekerne: oklch(fra var(--flamme) calc(l + 0,05) calc(c * 0,70) h);
/* Overlejringsfarve afledt af den samme flamme */ --overlay-tint: oklch(fra var(--flamme) beregnet(l + 0,06) beregnet(c * 0,65) beregnet(h - 10)); } }
Til sidst påførte jeg de afledte farver på de glødende lamper og det overtræk, de påvirker: @media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #mine-lampe-1 > cirkel, .svg-mine[data-animations=on] #mine-lamp-2 > cirkel { fill: var(--lampe-kerne); }
.svg-mine[data-animations=on] #overlay { display: blok; fill: var(--overlay-tint); opacitet: 0,5; } }
Når flammen skifter mod orange, varmes lamperne op, og scenen varmer med dem. Når flammen afkøles, sætter alt sig sammen. Det bedste er, at intet er skrevet manuelt. Hvis jeg ændrer grundfarven eller justerer flammeanimationsområderne, opdateres hele belysningssystemet samtidigt. Du kan se det endelige resultat på min hjemmeside. Genbrug, Genbrug, Revisited Disse Hanna-Barbera-animatorer blev tvunget til at genbruge elementer af nødvendighed, men jeg genbruger farver, fordi det gør mit arbejde mere konsekvent og lettere at vedligeholde. CSS relative farveværdier giver mig mulighed for at:
Definer en enkelt foundation farve, Beskriv hvordan andre farver relaterer til det, Genbrug disse forhold overalt, og Animer systemet ved at ændre én værdi.
Relativ farve gør ikke kun tematikken nemmere. Det tilskynder til en måde at tænke på, hvor farve, ligesom bevægelse, er bevidst - og hvor ændring af en værdi kan transformere en hel scene uden at omskrive værket under det.
