Jeg har nylig fornyet den animerte grafikken på nettstedet mitt med et nytt tema og en gruppe banebrytende karakterer, og praktiserte mange av teknikkene jeg delte i denne serien. Noen av animasjonene mine endrer utseende når noen samhandler med dem eller til forskjellige tider på dagen.
Fargene i grafikken på bloggsidene mine endres fra morgen til kveld hver dag. Så er det snømodusen, som legger til kalde farger og et vintertema, takket være et overleggslag og en blandingsmodus.
Mens jeg jobbet med dette, begynte jeg å lure på om relative CSS-fargeverdier kunne gi meg mer kontroll og samtidig forenkle prosessen. Merk: I denne opplæringen vil jeg fokusere på relative fargeverdier og OKLCH-fargerommet for temagrafikk og animasjoner. Hvis du vil dykke dypt inn i relative farger, har Ahmad Shadeed laget en suveren interaktiv guide. Når det gjelder fargerom, skalaer og OKLCH, skrev vår egen Geoff Graham om dem.
Gjentatt bruk av elementer var nøkkelen. Bakgrunner ble gjenbrukt når det var mulig, med zoom og overlegg som hjalp til med å konstruere nye scener fra det samme kunstverket. Det ble født av nødvendighet, men det oppmuntret også til å tenke i form av serier i stedet for individuelle scener. Problemet med manuell oppdatering av fargepaletter La oss gå rett til utfordringen min. I Toon Titles som denne – basert på Yogi Bear Show-episoden “Lullabye-Bye Bear” fra 1959 – og mitt arbeid generelt, er paletter begrenset til noen få utvalgte farger.
Jeg lager nyanser og nyanser fra det jeg kaller "foundation"-fargen min for å utvide paletten uten å legge til flere nyanser.
I Sketch jobber jeg i HSL-fargerommet, så denne prosessen innebærer å øke eller redusere lyshetsverdien til grunnfargen min. Ærlig talt, det er ikke en vanskelig oppgave - men å velge en annen grunnfarge krever å lage et helt nytt sett med nyanser og nyanser. Å gjøre det manuelt, igjen og igjen, blir fort arbeidskrevende.
Jeg nevnte HSL - H (nyanse), S (metning) og L (lyshet) - fargerommet, men det er bare en av flere måter å beskrive farge på. RGB — R (rød), G (grønn), B (blå) — er sannsynligvis den mest kjente, i det minste i sin Hex-form. Det er også LAB - L (lyshet), A (grønn-rød), B (blå-gul) - og den nyere, men nå bredt støttede LCH - L (lyshet), C (kroma), H (nyanse) - modellen i sin OKLCH-form. Med LCH – spesifikt OKLCH i CSS – kan jeg justere lysstyrken til grunnfargen min.
Eller jeg kan endre fargen. LCH-kroma og HSL-metning beskriver begge intensiteten eller rikdommen til en farge, men de gjør det på forskjellige måter. LCH gir meg et bredere spekter og mer forutsigbar blanding mellom farger.
Jeg kan også endre fargetonen for å lage en palett med farger som deler samme lyshet og fargeverdier. I både HSL og LCH starter fargetonespekteret med rødt, beveger seg gjennom grønt og blått og går tilbake til rødt.
Hvorfor OKLCH endret hvordan jeg tenker på farge Nettleserstøtte for OKLCH-fargerommet er nå utbredt, selv om designverktøy – inkludert Sketch – ikke har fanget opp. Heldigvis burde det ikke stoppe deg fra å bruke OKLCH. Nettlesere vil gjerne konvertere Hex-, HSL-, LAB- og RGB-verdier til OKLCH for deg. Du kan definere en egendefinert CSS-egenskap med en grunnfarge i alle rom, inkludert Hex: /* Grunnfarge */ --fundament: #5accd6;
Eventuelle farger som er avledet fra den, vil automatisk bli konvertert til OKLCH: --foundation-light: oklch(fra var(--foundation) [...]; } --foundation-midt: oklch(fra var(--foundation) [...]; } --foundation-dark: oklch(fra var(--foundation) [...]; }
Relativ farge som et designsystem Tenk på relativ farge som å si: "Ta denne fargen, juster den, så gi meg resultatet." Det er to måter å justere en farge på: absolutte endringer og proporsjonale endringer. De ser like ut i kode, men oppfører seg veldig annerledes når du begynner å bytte foundationfarger. Å forstå den forskjellen er det som kan gjøre bruk av relativ farge til et system. /* Grunnfarge */ --fundament: #5accd6;
For eksempel er lyshetsverdien til min foundationfarge 0,7837, mens en mørkere versjon har en verdi på 0,5837. For å beregne differansen trekker jeg den lavere verdien fra den høyere og bruker resultatet ved å bruke en calc()-funksjon: --foundation-dark: oklch(fra var(--foundation) beregnet (1 - 0,20) c h);
For å oppnå en lysere farge legger jeg til forskjellen i stedet: --Foundation-light: oklch(fra var(--foundation) beregnet (1 + 0,10) c h);
Chromajusteringer følger samme prosess. For å redusere intensiteten til grunnfargen min fra 0,1035 til 0,0035, trekker jeg en verdi fra den andre: oklch(fra var(--foundation) 1 beregnet (c - 0,10) h);
For å lage en palett med nyanser, beregner jeg forskjellen mellom fargetoneverdien til min foundationfarge (200) og min nye nyanse (260): oklch(fra var(--foundation) lc beregnet (h + 60));
Disse beregningene er absolutte. Når jeg trekker fra et fast beløp, sier jeg i praksis: "Trekk alltid så mye." Det samme gjelder når du legger til faste verdier: beregnet(c - 0,10) beregnet(c + 0,10)
Jeg lærte grensene for denne tilnærmingen på den harde måten. Da jeg stolte på å trekke fra faste kromaverdier, kollapset fargene mot grått så snart jeg endret grunnlaget. En palett som fungerte for en farge falt fra hverandre for en annen. Multiplikasjon oppfører seg annerledes. Når jeg multipliserer chroma, sier jeg til nettleseren: "Reduser denne fargens intensitet med en andel." Forholdet mellom farger forblir intakt, selv når grunnlaget endres: beregnet(c * 0,10)
My Move It, Scale It, Rotate It-regler
Flytt letthet (legg til eller trekk fra), Scale chroma (multipliser), Roter fargetone (legg til eller trekk fra grader).
Jeg skalerer chroma fordi jeg vil at intensitetsendringer skal forbli proporsjonale med grunnfargen. Fargeforhold er roterende, så det gir ingen mening å multiplisere fargetonen. Letthet er perseptuell og absolutt - multiplisering av den gir ofte merkelige resultater.
Fra én farge til et helt tema Relativ farge lar meg definere en grunnfarge og generere alle andre farger jeg trenger – fyll, streker, gradientstopp, skygger – fra den. På det tidspunktet slutter farge å være en palett og begynner å være et system. SVG-illustrasjoner har en tendens til å gjenbruke de samme få fargene på tvers av fyll, streker og gradienter. Relativ farge lar deg definere disse forholdene én gang og gjenbruke dem overalt - omtrent som animatører gjenbrukte bakgrunner for å lage nye scener.
Endre grunnfargen én gang, og hver avledede farge oppdateres automatisk, uten å beregne noe for hånd. Utenom animert grafikk kunne jeg bruke samme tilnærming til å definere farger for tilstandene til interaktive elementer som knapper og lenker. Grunnfargen jeg brukte i "Lullabye-Bye Bear" Toon-tittelen er en blå som ser cyan ut. Bakgrunnen er en radiell gradient mellom min foundation og en mørkere versjon.
For å lage alternative versjoner med helt andre stemninger, trenger jeg bare å endre grunnfargen: --fundament: #5accd6; --grad-end: var(--fundament); --grad-start: oklch(fra var(--foundation) beregnet (1 - 0,2357) beregnet (c * 0,833) h);
For å binde disse egendefinerte egenskapene til SVG-gradienten min uten å duplisere fargeverdier, erstattet jeg hardkodede stoppfargeverdier med innebygde stiler:
Deretter trengte jeg å sikre at min Toon Text alltid står i kontrast med hvilken grunnfarge jeg velger. En 180 graders nyanserotasjon produserer en komplementær farge som absolutt dukker opp - men som kan vibrere ubehagelig: .text-light { fyll: oklch(fra var(--foundation) lc beregnet (h + 180)); }
En 90° forskyvning gir en levende sekundærfarge uten å være fullstendig komplementær: .text-light { fyll: oklch(fra var(--foundation) lc beregnet (h - 90)); }
Min gjenskaping av Quick Draw McGraws Toon-tittel "El Kabong" fra 1959 bruker de samme teknikkene, men med en mer variert palett. For eksempel er det en annen radiell gradient mellom grunnfargen og en mørkere nyanse.
Bygningen og treet i bakgrunnen er ganske enkelt forskjellige nyanser av samme grunnfarge. For disse banene trengte jeg to ekstra fyllfarger: .bg-mid { fyll: oklch(fra var(--foundation) beregnet (1 - 0,04) beregnet (c * 0,91) h); }
.bg-dark { fyll: oklch(fra var(--foundation) beregnet (1 - 0,12) beregnet (c * 0,64) h); }
Når fundamentene begynner å bevege seg
Så langt har alt jeg har vist vært statisk. Selv når noen bruker en fargevelger for å endre grunnfargen, skjer denne endringen umiddelbart. Men animert grafikk står sjelden stille - ledetråden ligger i navnet. Så hvis farge er en del av systemet, er det ingen grunn til at den ikke kan animere også.
For å animere grunnfargen må jeg først dele den opp i OKLCH-kanalene- lyshet, farge og fargetone. Men det er et viktig ekstra trinn: Jeg må registrere disse verdiene som egendefinerte egenskaper. Men hva betyr det?
Som standard vet ikke en nettleser om en egendefinert CSS-egenskapsverdi representerer en farge, lengde, tall eller noe helt annet. Det betyr ofte at de ikke kan interpoleres jevnt under animasjon, og hopper fra en verdi til den neste.
Registrering av en tilpasset egenskap forteller nettleseren hvilken type verdi den representerer og hvordan den skal oppføre seg over tid. I dette tilfellet vil jeg at nettleseren skal behandle fargekanalene mine som tall slik at de kan animeres jevnt.
@property --f-l {
syntaks: "
@property --f-c {
syntaks: "
@property --f-h {
syntaks: "
Når de er registrert, oppfører disse seg som innebygd CSS. Nettleseren kan interpolere dem ramme for ramme. Jeg bygger deretter om grunnfargen fra disse kanalene: --fundament: oklch(var(--f-l) var(--f-c) var(--f-h));
Dette gjør at grunnfargen blir animerbar, akkurat som enhver annen numerisk verdi. Her er en enkel "pustende" animasjon som forsiktig skifter letthet over tid: @keyframes puster { 0 %, 100 % { --f-l: 0,36; } 50 % { --f-l: 0,46; } }
.toon-title { animasjon: pust 10s ease-in-out uendelig; }
Fordi annenhver farge i fyll, gradienter og streker er avledet fra --foundation, animerer de alle sammen, og ingenting må oppdateres manuelt. En animert farge, mange effekter I starten av denne prosessen lurte jeg på om relative CSS-fargeverdier kunne tilby flere muligheter samtidig som de gjorde dem enklere å implementere. Jeg har nylig lagt til en ny gullgruvebakgrunn på nettstedets kontaktside, og den første iterasjonen inkluderte oljelamper som lyser og svinger.
Jeg ønsket å utforske hvordan animering av CSS-relative farger kunne gjøre gruvens interiør mer realistisk ved å tone det med farger fra lampene. Jeg ville at de skulle påvirke verden rundt dem, slik ekte lys gjør. Så, i stedet for å animere flere farger, bygde jeg et lite lyssystem som animerer bare én farge.
Min første oppgave var å plassere et overleggslag mellom bakgrunnen og lampene mine:
Jeg brukte blande-blandingsmodus: farge fordi det fargetoner det som er under det samtidig som den underliggende luminansen bevares. Siden jeg bare vil at overlegget skal være synlig når animasjoner er slått på, har jeg valgt overlegget: .svg-mine #overlay { display: ingen; }
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #overlay { display: blokk; opasitet: 0,5; } }
Overlegget var på plass, men ennå ikke koblet til lampene. Jeg trengte en lyskilde. Lampene mine er enkle, og hver av dem inneholder et sirkelelement som jeg har uskarpt med et filter. Filteret gir en veldig myk uskarphet over hele sirkelen.
I stedet for å animere overlegget og lampene separat, animerer jeg et enkelt "flamme"-fargetoken og henter alt annet fra det. Først registrerer jeg tre egendefinerte egenskaper for OKLCH-kanaler:
@property --fl-l {
syntaks: "
Jeg animerte disse kanalene, med vilje dyttet noen få bilder mot oransje slik at flimmeret vises tydelig som ildlys:
@keyframes flame { 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; } }
Så tok jeg den animasjonen til SVG, så de delte variablene er tilgjengelige for både lampene og overlegget mitt:
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] { animasjon: flamme 3.6s uendelig lineær; isolasjon: isolere;
/* Bygg en flammefarge fra animerte kanaler */ --flamme: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Lampefarge avledet fra flamme */ --lampe-kjerne: oklch(fra var(--flamme) calc(l + 0,05) calc(c * 0,70) h);
/* Overleggsfarge avledet fra samme flamme */ --overlay-tint: oklch(fra var(--flame) beregnet(l + 0,06) beregnet(c * 0,65) beregnet(h - 10)); } }
Til slutt brukte jeg de avledede fargene på de glødende lampene og overlegget de påvirker: @media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #mine-lamp-1 > sirkel, .svg-mine[data-animations=on] #mine-lamp-2 > sirkel { fyll: var(--lampe-kjerne); }
.svg-mine[data-animations=on] #overlay { display: blokk; fyll: var(--overlegg-farge); opasitet: 0,5; } }
Når flammen skifter mot oransje, varmes lampene opp, og scenen varmes med dem. Når flammen avkjøles, legger alt seg sammen. Det beste er at ingenting skrives manuelt. Hvis jeg endrer grunnfargen eller justerer flammeanimasjonsområdene, oppdateres hele belysningssystemet samtidig. Du kan se det endelige resultatet på nettsiden min. Gjenbruk, gjenbruk, revisited Disse Hanna-Barbera-animatorene ble tvunget til å gjenbruke elementer av nødvendighet, men jeg gjenbruker farger fordi det gjør arbeidet mitt mer konsistent og lettere å vedlikeholde. CSS relative fargeverdier lar meg:
Definer en enkelt grunnfarge, Beskriv hvordan andre farger forholder seg til det, Gjenbruk disse forholdene overalt, og Animer systemet ved å endre én verdi.
Relativ farge gjør ikke bare tematisering enklere. Det oppmuntrer til en måte å tenke på der farger, som bevegelse, er tilsiktet – og hvor endring av én verdi kan transformere en hel scene uten å omskrive verket under den.
