Ég hef nýlega endurnýjað teiknimyndagrafíkina á vefsíðunni minni með nýju þema og hópi brautryðjendapersóna og notaði fullt af þeim aðferðum sem ég deildi í þessari seríu. Nokkrar af hreyfimyndum mínum breyta útliti þegar einhver hefur samskipti við þær eða á mismunandi tímum dags.
Litirnir í grafíkinni efst á bloggsíðunum mínum breytast frá morgni til kvölds á hverjum degi. Svo er það snjóstillingin, sem bætir við köldum litum og vetrarlegu þema, með leyfi frá yfirlagi og blöndunarstillingu.
Á meðan ég vann að þessu fór ég að velta því fyrir mér hvort hlutfallsleg litagildi CSS gætu veitt mér meiri stjórn en jafnframt einfaldað ferlið. Athugið: Í þessari kennslu mun ég einbeita mér að hlutfallslegum litagildum og OKLCH litarýminu fyrir þema grafík og hreyfimyndir. Ef þú vilt kafa djúpt í hlutfallslegan lit, bjó Ahmad Shadeed til frábæran gagnvirkan handbók. Hvað varðar litarými, litasvið og OKLCH, þá skrifaði okkar eigin Geoff Graham um þau.
Endurtekin notkun á þáttum var lykilatriði. Bakgrunnur var endurnotaður þegar mögulegt var, með aðdrætti og yfirlögn sem hjálpuðu til við að búa til nýjar senur úr sama listaverkinu. Það varð til af nauðsyn, en það hvatti líka til hugsunar í seríum frekar en einstökum atriðum. Vandamálið með að uppfæra litatöflur handvirkt Förum beint að áskoruninni minni. Í Toon Titles eins og þessum – byggt á Yogi Bear Show þættinum „Lullabye-Bye Bear“ frá 1959 – og verkum mínum almennt, eru litatöflur takmarkaðar við nokkra útvalda liti.
Ég bý til tóna og liti úr því sem ég kalla "grunn" litinn minn til að stækka litatöfluna án þess að bæta við fleiri litum.
Í Sketch vinn ég í HSL litarýminu, þannig að þetta ferli felur í sér að auka eða minnka léttleikagildi grunnlitsins míns. Satt að segja er þetta ekki erfitt verkefni - en að velja annan grunnlit krefst þess að búa til alveg nýtt sett af tónum og blæbrigðum. Að gera það handvirkt, aftur og aftur, verður fljótt erfiðara.
Ég nefndi HSL - H (litbrigði), S (mettun) og L (léttleika) - litarýmið, en það er bara ein af nokkrum leiðum til að lýsa lit. RGB — R (rautt), G (grænt), B (blátt) — er líklega það kunnuglegasta, að minnsta kosti í Hex formi. Það er líka LAB - L (léttleiki), A (grænt-rautt), B (blátt-gult) - og nýrri, en nú er víða studd LCH - L (léttleiki), C (litur), H (litbrigði) - líkanið í OKLCH formi. Með LCH - sérstaklega OKLCH í CSS - get ég stillt léttleika grunnlitsins míns.
Eða ég get breytt litningi þess. LCH litningur og HSL mettun lýsa báðar styrkleika eða auðleika litar, en þau gera það á mismunandi hátt. LCH gefur mér meira úrval og fyrirsjáanlegri blöndun á milli lita.
Ég get líka breytt litnum til að búa til litatöflu sem deila sömu léttleika og litagildum. Í bæði HSL og LCH byrjar litarófið á rauðu, færist í gegnum grænt og blátt og fer aftur í rautt.
Hvers vegna OKLCH breytti því hvernig ég hugsa um lit Vafrastuðningur fyrir OKLCH litarýmið er nú útbreiddur, jafnvel þótt hönnunarverkfæri - þar á meðal Sketch - hafi ekki náð sér á strik. Sem betur fer ætti það ekki að hindra þig í að nota OKLCH. Vafrar munu glaðir breyta Hex, HSL, LAB og RGB gildum í OKLCH fyrir þig. Þú getur skilgreint CSS sérsniðna eiginleika með grunnlit í hvaða rými sem er, þar á meðal Hex: /* Grunnlitur */ --grunnur: #5accd6;
Allir litir sem fengnir eru úr því verða sjálfkrafa breyttir í OKLCH: --foundation-light: oklch(frá var(--foundation) [...]; } --foundation-mid: oklch(frá var(--foundation) [...]; } --foundation-dark: oklch(frá var(--foundation) [...]; }
Hlutfallslegur litur sem hönnunarkerfi Hugsaðu um hlutfallslegan lit sem að segja: "Taktu þennan lit, lagfærðu hann og gefðu mér síðan niðurstöðuna." Það eru tvær leiðir til að stilla lit: algjörar breytingar og hlutfallslegar breytingar. Þeir líta svipað út í kóða, en hegða sér mjög öðruvísi þegar þú byrjar að skipta um grunnlit. Að skilja þann mun er það sem getur breytt því að nota hlutfallslegan lit í kerfi. /* Grunnlitur */ --grunnur: #5accd6;
Til dæmis er ljósgildi grunnlitarins míns 0,7837, en dekkri útgáfa hefur gildið 0,5837. Til að reikna mismuninn dreg ég lægra gildið frá því hærra og beiti niðurstöðunni með því að nota calc() fall: --grunnur-dökkur: oklch(frá var(--foundation) reiknað(l - 0,20) c h);
Til að fá ljósari lit bæti ég við mismuninum í staðinn: --grunnljós: oklch(frá var(--foundation) reiknað (l + 0,10) c h);
Chromaleiðréttingar fylgja sama ferli. Til að minnka styrk grunnlitarins míns úr 0,1035 í 0,0035, dregur ég eitt gildi frá hinu: oklch(frá var(--foundation) 1 reiknað (c - 0,10) h);
Til að búa til litatöflu reikna ég út mismuninn á litagildi grunnlitarins míns (200) og nýja litarins míns (260): oklch(frá var(--foundation) l c reiknað (h + 60));
Þeir útreikningar eru algjörir. Þegar ég dreg fasta upphæð frá, þá er ég í raun að segja: „Dregðu alltaf svona mikið frá. Sama gildir þegar föstum gildum er bætt við: reiknað(c - 0,10) reiknað(c + 0,10)
Ég lærði takmörk þessarar nálgunar á erfiðan hátt. Þegar ég treysti á að draga frá föstum litagildum hrundu litirnir í átt að gráum um leið og ég breytti grunninum. Litatöflu sem virkaði fyrir einn lit féll í sundur fyrir annan. Margföldun hegðar sér öðruvísi. Þegar ég margfalda litning, segi ég við vafrann: „Dregið úr styrkleika þessa litar í hlutfalli.“ Sambandið milli lita helst ósnortið, jafnvel þegar grunnurinn breytist: reiknað(c * 0,10)
Reglur mínar um að færa það, skala það, snúa því
Færa léttleika (leggja saman eða draga frá), Skala litur (margfalda), Snúðu litblæ (bæta við eða draga frá gráðum).
Ég skala litning vegna þess að ég vil að styrkleikabreytingar haldist í réttu hlutfalli við grunnlitinn. Litbrigði eru snúningssambönd, svo það er ekkert vit í því að margfalda lit. Léttleiki er skynjunarlegur og alger - margföldun hans gefur oft undarlegar niðurstöður.
Frá einum lit í heilt þema Hlutfallslegur litur gerir mér kleift að skilgreina grunnlit og mynda alla aðra liti sem ég þarf - fyllingar, strokur, hallastopp, skuggar - úr honum. Á þeim tímapunkti hættir litur að vera litatöflu og byrjar að vera kerfi. SVG myndskreytingar hafa tilhneigingu til að endurnýta sömu fáu litina yfir fyllingar, strokur og halla. Hlutfallslegur litur gerir þér kleift að skilgreina þessi sambönd einu sinni og endurnýta þau alls staðar - líkt og hreyfimyndir endurnotuðu bakgrunn til að búa til nýjar senur.
Breyttu grunnlitnum einu sinni og sérhver afleiddur litur uppfærist sjálfkrafa, án þess að endurreikna neitt með höndunum. Fyrir utan hreyfimyndir gæti ég notað þessa sömu nálgun til að skilgreina liti fyrir ástand gagnvirkra þátta eins og hnappa og tengla. Grunnliturinn sem ég notaði í „Lullabye-Bye Bear“ Titillinn minn er blár útlitsblár. Bakgrunnurinn er geislamyndaður halli á milli grunnsins míns og dekkri útgáfu.
Til að búa til aðrar útgáfur með allt öðruvísi skapi þarf ég aðeins að breyta grunnlitnum: --grunnur: #5accd6; --grad-end: var(--grunnur); --grad-start: oklch(frá var(--foundation) reiknað(l - 0,2357) reiknað(c * 0,833) h);
Til að binda þessa sérsniðnu eiginleika við SVG hallann minn án þess að afrita litagildi, skipti ég út harðkóðaðri stöðvunarlitagildum fyrir innbyggða stíla:
Næst þurfti ég að tryggja að Toon Textinn minn væri alltaf andstæður hvaða grunnlit sem ég vel. 180 gráður litbrigðissnúningur framleiðir aukalit sem vissulega birtist - en getur titrað óþægilega: .text-ljós { fylla: oklch(frá var(--grunnur) l c reiknað (h + 180)); }
90° breyting framleiðir skæran aukalit án þess að vera fyllilega fylling: .text-ljós { fylla: oklch(frá var(--grunnur) l c reiknað (h - 90)); }
Endurgerð mín af Quick Draw McGraw's 1959 Toon Titli „El Kabong“ notar sömu tækni en með fjölbreyttari litatöflu. Til dæmis er annar geislamyndaður halli á milli grunnlitsins og dekkri skugga.
Byggingin og tréð í bakgrunni eru einfaldlega mismunandi litbrigði af sama grunnlitnum. Fyrir þessar leiðir þurfti ég tvo fyllingarliti til viðbótar: .bg-mid { fylla: oklch(frá var(--grunnur) reiknað(l - 0,04) reiknað(c * 0,91) h); }
.bg-dark { fylla: oklch(frá var(--grunnur) reiknað(l - 0,12) reiknað(c * 0,64) h); }
Þegar undirstöðurnar byrja að hreyfast
Hingað til hefur allt sem ég hef sýnt verið kyrrstætt. Jafnvel þegar einhver notar litavali til að breyta grunnlitnum, þá gerist sú breyting samstundis. En hreyfimyndir standa sjaldan kyrr - vísbendingin er í nafninu. Svo ef litur er hluti af kerfinu, þá er engin ástæða fyrir því að hann geti ekki lífgað líka.
Til að lífga grunnlitinn þarf ég fyrst að skipta honum í OKLCH rásirnar- ljósleiki, litur og litblær. En það er mikilvægt aukaskref: Ég þarf að skrá þessi gildi sem vélritaðar sérsniðnar eiginleikar. En hvað þýðir það?
Sjálfgefið er að vafri veit ekki hvort CSS sérsniðið eignargildi táknar lit, lengd, tölu eða eitthvað allt annað. Það þýðir oft að ekki er hægt að skipta þeim inn á sléttan hátt meðan á hreyfimynd stendur og hoppa frá einu gildi til annars.
Að skrá sérsniðna eign segir vafranum hvers konar gildi það táknar og hvernig það ætti að haga sér með tímanum. Í þessu tilviki vil ég að vafrinn meðhöndli litarásirnar mínar sem tölur svo hægt sé að hreyfa þær vel.
@eign --f-l {
setningafræði: "
@eign --f-c {
setningafræði: "
@eign --f-h {
setningafræði: "
Þegar þeir hafa verið skráðir, hegða sér þessar sérsniðnu eiginleikar eins og innfæddur CSS. Vafrinn getur millifært þau ramma fyrir ramma. Ég endurbyggi síðan grunnlitinn úr þessum rásum: --foundation: oklch(var(--f-l) var(--f-c) var(--f-h));
Þetta gerir grunnlitinn lifandi, rétt eins og önnur tölugildi. Hér er einfalt „öndunar“ hreyfimynd sem breytir léttleika varlega með tímanum: @lyklarammar anda { 0%, 100% { --f-l: 0,36; } 50% { --f-l: 0,46; } }
.toon-title { hreyfimynd: andaðu 10s vellíðan-í-út óendanlega; }
Vegna þess að annar hver litur í fyllingum, halla og strokum er fenginn frá --foundation, lífga þeir allir saman og ekkert þarf að uppfæra handvirkt. Einn líflegur litur, mörg áhrif Í upphafi þessa ferlis velti ég því fyrir mér hvort hlutfallsleg litagildi CSS gætu boðið upp á fleiri möguleika á sama tíma og þau gera þau einfaldari í framkvæmd. Ég bætti nýlega nýjum gullnámubakgrunni við tengiliðasíðu vefsíðunnar minnar og fyrsta endurtekningin innihélt olíulampa sem glóa og sveiflast.
Mig langaði að kanna hvernig hreyfimyndir af CSS afstæðum litum gætu gert innviði námunnar raunsærri með því að lita hana með litum frá lömpunum. Ég vildi að þeir hefðu áhrif á heiminn í kringum sig, eins og raunverulegt ljós hefur. Svo, í stað þess að hreyfa marga liti, byggði ég örlítið ljósakerfi sem hreyfir aðeins einn lit.
Fyrsta verkefni mitt var að setja yfirlag á milli bakgrunns og lampa:
Ég notaði mix-blend-mode: litur vegna þess að það litar það sem er fyrir neðan það en varðveitir undirliggjandi birtustig. Þar sem ég vil aðeins að yfirborðið sé sýnilegt þegar kveikt er á hreyfimyndum, gerði ég yfirlagsvalið: .svg-mine #yfirlag { sýna: enginn; }
@media (kýs-minni-hreyfingu: engin-val) { .svg-mine[data-animations=on] #overlay { sýna: blokk; ógagnsæi: 0,5; } }
Yfirlagið var komið á sinn stað en ekki enn tengt við lampana. Mig vantaði ljósgjafa. Lamparnir mínir eru einfaldir og hver og einn inniheldur hringþátt sem ég gerði óskýra með síu. Sían framleiðir mjög mjúka óskýrleika yfir allan hringinn.
Í stað þess að lífga yfirborðið og lampana í sitthvoru lagi, hreyfi ég einn „logi“ litamerki og fæ allt annað úr því. Í fyrsta lagi skrái ég þrjá vélritaða sérsniðna eiginleika fyrir OKLCH rásir:
@eign --fl-l {
setningafræði: "
Ég gerði þessar rásir hreyfimyndir og ýtti vísvitandi nokkrum ramma í átt að appelsínugulum svo flöktið sé greinilega sem eldljós:
@keyframes logi { 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íðan fór ég yfir þá hreyfimynd í SVG, þannig að sameiginlegu breyturnar eru tiltækar fyrir bæði lampana og yfirlagið mitt:
@media (kýs-minni-hreyfingu: engin-val) { .svg-mine[data-animations=on] { fjör: logi 3.6s óendanlega línuleg; einangrun: einangra;
/* Búðu til logalit úr hreyfimyndum */ --logi: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Lampalitur fengin frá loga */ --lampakjarni: oklch(frá var(--logi) calc(l + 0,05) calc(c * 0,70) h);
/* Yfirlagsblær úr sama loga */ --overlay-tint: oklch(frá var(--logi) reiknað(l + 0,06) reiknað(c * 0,65) reiknað(h - 10)); } }
Að lokum notaði ég þessa afleiddu liti á glóandi lampana og yfirborðið sem þeir hafa áhrif á: @media (kýs-minni-hreyfingu: engin-val) { .svg-mine[data-animations=on] #mine-lamp-1 > hringur, .svg-mine[data-animations=on] #mine-lamp-2 > hringur { fylla: var(--lampakjarni); }
.svg-mine[data-animations=on] #overlay { sýna: blokk; fylla: var(--yfirlagslitur); ógagnsæi: 0,5; } }
Þegar loginn færist í átt að appelsínugulu hitna lamparnir og umhverfið hlýnar með þeim. Þegar loginn kólnar, sest allt saman. Það besta er að ekkert er skrifað handvirkt. Ef ég breyti grunnlitnum eða breyti logahreyfingarsviðinu uppfærist allt ljósakerfið samtímis. Hægt er að sjá lokaniðurstöðuna á heimasíðunni minni. Endurnýta, endurnýta, endurskoða Þessir Hanna-Barbera hreyfimyndir neyddust til að endurnýta þætti af neyð, en ég endurnota liti vegna þess að það gerir verk mitt stöðugra og auðveldara í viðhaldi. CSS hlutfallsleg litagildi leyfa mér að:
Skilgreindu einn grunnlit, Lýstu því hvernig aðrir litir tengjast því, Endurnotaðu þessi sambönd alls staðar, og Hreyfi kerfið með því að breyta einu gildi.
Hlutfallslegur litur gerir þema ekki bara auðveldara. Það hvetur til hugsunarháttar þar sem litur, eins og hreyfing, er viljandi - og þar sem breyting á einu gildi getur umbreytt heilli senu án þess að endurskrifa verkið undir því.
