Värskendasin hiljuti oma veebisaidi animeeritud graafikat uue teema ja teedrajavate tegelaste rühmaga, rakendades praktikas palju selles sarjas jagatud tehnikaid. Mõned minu animatsioonid muudavad välimust, kui keegi nendega suhtleb või erinevatel kellaaegadel.
Minu ajaveebi lehtede ülaosas oleva graafika värvid muutuvad iga päev hommikust õhtuni. Seejärel on olemas lumerežiim, mis lisab ülekattekihi ja segamisrežiimi tõttu jahedaid värve ja talvise teema.
Selle kallal töötades hakkasin mõtlema, kas CSS-i suhtelised värviväärtused võiksid anda mulle rohkem kontrolli ja samal ajal protsessi lihtsustada. Märkus. Selles õpetuses keskendun suhtelistele värviväärtustele ja OKLCH-värviruumile graafika ja animatsioonide jaoks. Kui soovite sukelduda sügavale suhtelistesse värvidesse, koostas Ahmad Shadeed suurepärase interaktiivse juhendi. Mis puudutab värviruume, vahemikke ja OKLCH-d, siis meie oma Geoff Graham kirjutas neist.
Elementide korduv kasutamine oli võtmetähtsusega. Võimaluse korral kasutati taustu uuesti ning suumid ja ülekatted aitasid luua samast kunstiteosest uusi stseene. See sündis vajadusest, kuid julgustas ka mõtlema pigem sarjade kui üksikute stseenide alusel. Probleem värvipalettide käsitsi värskendamisega Läheme otse minu väljakutse juurde. Sellistes Tooni pealkirjades nagu see – põhineb 1959. aasta Yogi Bear Show episoodil “Lullabye-Bye Bear” – ja üldiselt on minu töödes paletid piiratud mõne valitud värviga.
Loon toone ja toone sellest, mida ma nimetan oma "alusvärviks", et laiendada paletti ilma rohkem toone lisamata.
Sketchis töötan ma HSL-i värviruumis, nii et see protsess hõlmab minu alusvärvi heleduse suurendamist või vähendamist. Ausalt öeldes pole see vaevarikas ülesanne, kuid erineva alusvärvi valimine nõuab täiesti uue toonide ja toonide komplekti loomist. Selle käsitsi tegemine ikka ja jälle muutub kiiresti töömahukaks.
Mainisin HSL - H (toon), S (küllastus) ja L (heledus) - värviruumi, kuid see on vaid üks mitmest värvi kirjeldamise viisist. RGB - R (punane), G (roheline), B (sinine) - on ilmselt kõige tuttavam, vähemalt oma Hex kujul. Samuti on olemas LAB - L (heledus), A (roheline-punane), B (sinine-kollane) - ja uuem, kuid nüüd laialdaselt toetatud LCH - L (heledus), C (kromaatsus), H (toon) - mudel selle OKLCH kujul. LCH-ga – täpsemalt OKLCH-ga CSS-is – saan reguleerida oma jumestusvärvi heledust.
Või ma saan selle värvi muuta. LCH chroma ja HSL küllastus kirjeldavad mõlemad värvi intensiivsust või rikkalikkust, kuid nad teevad seda erineval viisil. LCH annab mulle laiema valiku ja ennustatavama värvide segamise.
Samuti saan muuta tooni, et luua värvipalett, millel on samad heleduse ja kroma väärtused. Nii HSL-is kui ka LCH-s algab toonide spekter punasest, liigub läbi rohelise ja sinise ning naaseb punaseks.
Miks OKLCH muutis seda, kuidas ma värvist mõtlen? OKLCH-värviruumi brauseri tugi on nüüd laialt levinud, isegi kui disainitööriistad, sealhulgas Sketch, pole järele jõudnud. Õnneks ei tohiks see takistada teid OKLCH-i kasutamast. Brauserid teisendavad teie jaoks hea meelega Hex-, HSL-, LAB- ja RGB-väärtused OKLCH-i. Saate määratleda CSS-i kohandatud atribuudi alusvärviga mis tahes ruumis, sealhulgas Hex: /* Vundamendi värv */ --vundament: #5accd6;
Kõik sellest tuletatud värvid teisendatakse automaatselt OKLCH-iks: --foundation-light: oklch(var(--foundation) [...]; } --foundation-mid: oklch(var(--foundation) [...]; } --foundation-dark: oklch(from var(--foundation) [...]; }
Suhteline värv kujundussüsteemina Mõelge suhtelisele värvile kui ütlemisele: "Võtke see värv, kohandage seda ja siis andke mulle tulemus." Värvi reguleerimiseks on kaks võimalust: absoluutsed muutused ja proportsionaalsed muutused. Need näevad koodilt välja sarnased, kuid käituvad väga erinevalt, kui alustate alusvärvide vahetamist. Selle erinevuse mõistmine võib muuta suhtelise värvi kasutamise süsteemiks. /* Vundamendi värv */ --vundament: #5accd6;
Näiteks minu alusvärvi heleduse väärtus on 0,7837, tumedamal versioonil aga 0,5837. Erinevuse arvutamiseks lahutan madalama väärtuse suuremast ja rakendan tulemuse funktsiooni calc() abil: --vundament-tume: oklch (alates var(--fond) arvutatud (l - 0,20) c h);
Heledama värvi saavutamiseks lisan selle asemel erinevuse: --vundament-valgus: oklch (alates var(--fond) arvutatud (l + 0,10) c h);
Chromakorrigeerimised järgivad sama protsessi. Vundamendivärvi intensiivsuse vähendamiseks 0,1035-lt 0,0035-le lahutan ühe väärtuse teisest: oklch (alates var(--fond) l arvut.(c - 0,10) h);
Toonide paleti loomiseks arvutan oma alusvärvi (200) ja uue tooni (260) tooni väärtuse erinevuse: oklch (alates var(--fond) lc arvut.(h + 60));
Need arvutused on absoluutsed. Kui lahutan kindla summa, ütlen ma tõhusalt: "Lahutage alati nii palju." Sama kehtib ka fikseeritud väärtuste lisamisel: arvutus (c - 0,10) arvutus (c + 0,10)
Ma õppisin selle lähenemisviisi piire raskel teel. Kui toetusin fikseeritud kromaväärtuste lahutamisele, langesid värvid halli suunas kohe, kui vundamenti vahetasin. Ühe värvi jaoks toiminud palett lagunes teise jaoks. Korrutamine käitub erinevalt. Kui ma korrutan kroma, ütlen brauserile: "Vähendage selle värvi intensiivsust proportsionaalselt." Värvide vaheline suhe jääb puutumatuks isegi vundamendi muutumisel: arvuta (c * 0,10)
Minu liigutamise, skaleerimise, pööramise reeglid
Liiguta kergust (liita või lahuta), Skaala kroma (korrutamine), Tooni pööramine (kraadide liitmine või lahutamine).
Ma skaleerin kroma, kuna tahan, et intensiivsuse muutused jääksid proportsionaalseks põhivärviga. Toonide suhted on pöörlevad, seega pole toonide korrutamisel mõtet. Kergus on tajutav ja absoluutne – selle korrutamine annab sageli veidraid tulemusi.
Ühest värvist terve teemani Suhteline värv võimaldab mul määratleda alusvärvi ja genereerida sellest kõik muud värvid, mida vajan – täidised, jooned, gradiendi peatused, varjud. Sel hetkel lakkab värv olemast palett ja hakkab olema süsteem. SVG-illustratsioonid kasutavad täidiste, joonte ja gradientide puhul sageli samu värve. Suhteline värv võimaldab teil need suhted ühe korra määratleda ja neid kõikjal uuesti kasutada – sarnaselt animaatoritega uute stseenide loomiseks tausta.
Muutke alusvärvi üks kord ja iga tuletatud värv värskendatakse automaatselt, ilma käsitsi midagi ümber arvutamata. Väljaspool animeeritud graafikat saaksin kasutada sama lähenemisviisi interaktiivsete elementide (nt nuppude ja linkide) olekute värvide määratlemiseks. Vundamendivärv, mida kasutasin oma pealkirjas "Lullabye-Bye Bear" Toon Title, on tsüaani välimusega sinine. Taust on radiaalne gradient minu vundamendi ja tumedama versiooni vahel.
Täiesti erineva meeleoluga alternatiivsete versioonide loomiseks pean muutma vaid vundamendi värvi: --vundament: #5accd6; --grad-end: var(--fond); --grad-start: oklch(alates var(--fond) arvutatud (l - 0,2357) arvutatud (c * 0,833) h);
Nende kohandatud atribuutide sidumiseks oma SVG gradiendiga ilma värviväärtusi dubleerimata asendasin kõvakodeeritud stop-värvi väärtused tekstisiseste stiilidega:
Järgmiseks pidin tagama, et minu Toon Text oleks alati kontrastiks valitud alusvärviga. 180-kraadine varjundi pööramine annab täiendava värvi, mis kindlasti hüppab, kuid võib ebamugavalt vibreerida: .text-light { täitke: oklch(var(--fond) lc arvut.(h + 180)); }
90° nihe annab erksa sekundaarse värvi, ilma et see oleks täielikult üksteist täiendav: .text-light { täitke: oklch(var(--fond) lc arvut.(h - 90)); }
Minu taasloomine Quick Draw McGraw 1959. aasta Tooni pealkirjast "El Kabong" kasutab samu tehnikaid, kuid mitmekesisema paletiga. Näiteks vundamendivärvi ja tumedama tooni vahel on veel üks radiaalne gradient.
Taustal olev hoone ja puu on lihtsalt sama vundamendivärvi erinevates toonides. Nende radade jaoks vajasin kahte täiendavat täitevärvi: .bg-mid { täitke: oklch(var(--fond) arvutatud (l - 0,04) arvutatud (c * 0,91) h); }
.bg-dark { täitke: oklch(var(--fond) arvutatud (l - 0,12) arvutatud (c * 0,64) h); }
Kui alused hakkavad liikuma
Siiani on kõik, mida olen näidanud, olnud staatiline. Isegi kui keegi kasutab vundamendi värvi muutmiseks värvivalijat, toimub see muutus koheselt. Kuid animeeritud graafika seisab harva paigal – vihje peitub nimes. Seega, kui värv on osa süsteemist, pole põhjust, miks see ka animeerida ei saaks.
Vundamendivärvi animeerimiseks pean selle esmalt oma OKLCH kanaliteks jagama- kergus, kroom ja toon. Kuid on veel üks oluline samm: pean need väärtused registreerima trükitud kohandatud atribuutidena. Aga mida see tähendab?
Vaikimisi ei tea brauser, kas CSS-i kohandatud atribuudi väärtus tähistab värvi, pikkust, numbrit või midagi muud. See tähendab sageli, et neid ei saa animatsiooni ajal sujuvalt interpoleerida ja ühelt väärtuselt teisele hüpata.
Kohandatud atribuudi registreerimine annab brauserile teada, millist väärtust see esindab ja kuidas see aja jooksul käituma peaks. Sel juhul soovin, et brauser käsitleks minu värvikanaleid numbritena, et neid saaks sujuvalt animeerida.
@omavara --f-l {
süntaks: "
@omavara --f-c {
süntaks: "
@omavara --f-h {
süntaks: "
Pärast registreerimist käituvad need kohandatud atribuudid nagu omapärane CSS. Brauser saab neid kaadri haaval interpoleerida. Seejärel ehitan vundamendi värvi uuesti nendest kanalitest: --fond: oklch(var(--f-l) var(--f-c) var(--f-h));
See muudab vundamendi värvi animeeritavaks, nagu mis tahes muu arvväärtus. Siin on lihtne "hingav" animatsioon, mis aja jooksul õrnalt heledust nihutab: @keyframes hingama { 0%, 100% { --f-l: 0,36; } 50% { --f-l: 0,46; } }
.toon-title { animatsioon: hingake 10s lihtne sisse-välja lõpmatu; }
Kuna kõik muud värvid täidistes, gradientides ja joontes on tuletatud --vundamendist, animeeruvad need kõik koos ja midagi pole vaja käsitsi värskendada. Üks animeeritud värv, palju efekte Selle protsessi alguses mõtlesin, kas CSS-i suhtelised värviväärtused võiksid pakkuda rohkem võimalusi, muutes need ühtlasi lihtsamaks. Lisasin hiljuti oma veebisaidi kontaktide lehele uue kullakaevanduse tausta ja esimene iteratsioon hõlmas õlilampe, mis helendavad ja õõtsuvad.
Tahtsin uurida, kuidas CSS-i suhteliste värvide animeerimine võiks muuta kaevanduse sisemuse realistlikumaks, toonides seda lampide värvidega. Tahtsin, et nad mõjutaksid ümbritsevat maailma nii, nagu seda teeb tõeline valgus. Nii et mitme värvi animeerimise asemel ehitasin väikese valgustussüsteemi, mis animeerib ainult ühte värvi.
Minu esimene ülesanne oli asetada tausta ja lampide vahele kattekiht:
Kasutasin segamis-segamisrežiimi: värvi, kuna see toonib selle all oleva, säilitades samal ajal selle aluseks oleva heleduse. Kuna tahan, et ülekate oleks nähtav ainult siis, kui animatsioonid on sisse lülitatud, lubasin ülekatte: .svg-mine #overlay { kuva: puudub; }
@media (prefers-redduced-motion: no-preference) { .svg-mine[data-animations=on] #overlay { kuva: plokk; läbipaistmatus: 0,5; } }
Ülekate oli paigas, kuid polnud veel lampidega ühendatud. Mul oli vaja valgusallikat. Minu lambid on lihtsad ja igaüks sisaldab ringielementi, mille ma filtriga hägustasin. Filter tekitab kogu ringi ulatuses väga pehme hägususe.
Selle asemel, et animeerida ülekatet ja lampe eraldi, animeerin ühe „leegi“ värvimärgi ja tuletan sellest kõik muu. Esiteks registreerin OKLCH kanalite jaoks kolm trükitud kohandatud atribuuti:
@omavara --fl-l {
süntaks: "
Animeerisin need kanalid, lükates teadlikult paar kaadrit oranži poole, nii et värelus oleks selgelt tulevalgus:
@keyframes leek { 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; } }
Seejärel määrasin selle animatsiooni SVG-sse, nii et jagatud muutujad on saadaval nii lampidele kui ka minu ülekattele:
@media (prefers-redduced-motion: no-preference) { .svg-mine[data-animations=on] { animatsioon: leek 3.6s lõpmatu lineaarne; isolatsioon: isoleerida;
/* Looge animeeritud kanalitest leegivärv */ --leek: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Lambi värv tuletatud leegist */ --lamp-core: oklch(from var(--flame) calc(l + 0.05) calc(c * 0.70) h);
/* Samast leegist tuletatud kattevärv */ --overlay-tint: oklch(var(--leek) arvutatud (l + 0,06) arvutatud (c * 0,65) arvutatud (h - 10)); } }
Lõpuks rakendasin need tuletatud värvid hõõguvatele lampidele ja nende mõjule: @media (prefers-redduced-motion: no-preference) { .svg-mine[data-animations=on] #mine-lamp-1 > ring, .svg-mine[data-animations=on] #mine-lamp-2 > circle { fill: var(--lamp-core); }
.svg-mine[data-animations=on] #overlay { kuva: plokk; fill: var(--overlay-tint); läbipaistmatus: 0,5; } }
Kui leek nihkub oranži poole, siis lambid soojenevad ja stseen soojeneb koos nendega. Kui leek jahtub, settib kõik kokku. Parim osa on see, et midagi ei kirjutata käsitsi. Kui muudan vundamendi värvi või kohandan leegi animatsiooni vahemikke, värskendatakse kogu valgustussüsteemi samaaegselt. Lõpptulemust näete minu kodulehel. Taaskasutamine, taaskasutamine, uuesti läbi vaadatud Need Hanna-Barbera animaatorid olid sunnitud elemente ümber otstarbeks muutma, kuid ma kasutan värve uuesti, kuna see muudab mu töö ühtlasemaks ja hõlpsamini hooldatavaks. CSS-i suhtelised värviväärtused võimaldavad mul:
Määratlege üks alusvärv, Kirjeldage, kuidas teised värvid on sellega seotud, Kasutage neid suhteid kõikjal ja Animeerige süsteem, muutes ühte väärtust.
Suhteline värv ei muuda teemade loomist lihtsamaks. See julgustab mõtteviisi, kus värv, nagu ka liikumine, on tahtlik – ja kus ühe väärtuse muutmine võib muuta tervet stseeni ilma selle all olevat tööd ümber kirjutamata.
