Dan l-aħħar aggornajt il-grafika animata fuq il-websajt tiegħi b'tema ġdida u grupp ta 'karattri pijunieri, billi poġġi fil-prattika ħafna mit-tekniki li qsamt f'din is-serje. Ftit mill-animazzjonijiet tiegħi jbiddlu d-dehra meta xi ħadd jinteraġixxi magħhom jew f'ħinijiet differenti tal-ġurnata.
Il-kuluri fil-grafika fuq il-paġni tal-blog tiegħi jinbidlu minn filgħodu sal-lejl kuljum. Imbagħad, hemm il-modalità tas-silġ, li żżid kuluri kesħin u tema tax-xitwa, korteżija ta 'saff ta' overlay u mod ta 'taħlit.
Waqt li naħdem fuq dan, bdejt nistaqsi jekk il-valuri relattivi tal-kulur tas-CSS jistgħux jagħtuni aktar kontroll filwaqt li jissimplifikaw ukoll il-proċess. Nota: F'dan it-tutorja, ser niffoka fuq valuri relattivi tal-kulur u l-ispazju tal-kulur OKLCH għall-grafika u animazzjonijiet tat-temi. Jekk trid tgħaddas fil-fond f'kulur relattiv, Ahmad Shadeed ħoloq gwida interattiva mill-aqwa. Fir-rigward tal-ispazji tal-kulur, il-gamuts, u l-OKLCH, Geoff Graham tagħna stess kiteb dwarhom.
L-użu ripetut tal-elementi kien essenzjali. L-isfond reġgħu ntużaw kull meta kien possibbli, b'zooms u overlays jgħinu biex jinbnew xeni ġodda mill-istess xogħol artistiku. Twieldet minn neċessità, iżda ħeġġet ukoll il-ħsieb f'termini ta 'serje aktar milli xeni individwali. Il-problema bl-Aġġornament manwali tal-Paletti tal-Kulur Ejja mmorru dritt għall-isfida tiegħi. F'Titoli Toon bħal dan - ibbażat fuq l-episodju tal-1959 Yogi Bear Show "Lullabye-Bye Bear" - u x-xogħol tiegħi ġeneralment, il-paletti huma limitati għal ftit kuluri magħżula.
Noħloq sfumaturi u sfumaturi minn dak li nsejjaħ il-kulur tiegħi "pedament" biex tespandi l-paletta mingħajr ma nżid aktar lwien.
Fi Sketch, naħdem fl-ispazju tal-kulur HSL, għalhekk dan il-proċess jinvolvi li żżid jew tnaqqas il-valur tad-dawl tal-kulur tal-fondazzjoni tiegħi. Onestament, mhuwiex kompitu diffiċli - iżda l-għażla ta 'kulur ta' fondazzjoni differenti teħtieġ il-ħolqien ta 'sett ġdid sħiħ ta' sfumaturi u sfumaturi. Li tagħmel dan manwalment, għal darb'oħra u għal darb'oħra, malajr isir impenjattiv.
Semmejt l-HSL - H (lewn), S (saturazzjoni), u L (ħeffa) - spazju tal-kulur, iżda dan huwa biss wieħed minn diversi modi kif tiddeskrivi l-kulur. RGB - R (aħmar), G (aħdar), B (blu) - huwa probabbilment l-aktar familjari, għall-inqas fil-forma Hex tiegħu. Hemm ukoll LAB - L (ħeffa), A (aħdar-aħmar), B (blu-isfar) - u l-mudell l-aktar ġdid, iżda issa appoġġjat b'mod wiesa 'LCH - L (ħeffa), C (kroma), H (lewn) - fil-forma OKLCH tiegħu. B'LCH — speċifikament OKLCH f'CSS — nista' naġġusta l-valur tad-dawl tal-kulur tal-pedament tiegħi.
Jew nista' nbiddel il-kroma tiegħu. LCH chroma u HSL saturazzjoni t-tnejn jiddeskrivu l-intensità jew ir-rikkezza ta 'kulur, iżda jagħmlu dan b'modi differenti. LCH jagħtini firxa usa 'u taħlit aktar prevedibbli bejn il-kuluri.
Nista' wkoll nibdel il-lewn biex noħloq paletta ta' kuluri li jaqsmu l-istess valuri ta' ħeffa u chroma. Kemm fl-HSL kif ukoll fl-LCH, l-ispettru tal-lewn jibda bl-aħmar, jiċċaqlaq minn aħdar u blu, u jerġa 'lura għall-aħmar.
Għaliex OKLCH Inbidel Kif Naħseb dwar il-Kulur L-appoġġ tal-browser għall-ispazju tal-kulur OKLCH issa huwa mifrux, anke jekk l-għodod tad-disinn - inkluż Sketch - ma laħqux. Fortunatament, dan m'għandux iwaqqafk milli tuża OKLCH. Il-browsers ser jikkonvertu l-valuri Hex, HSL, LAB, u RGB bil-ferħ f'OKLCH għalik. Tista' tiddefinixxi proprjetà tad-dwana CSS b'kulur tal-pedament fi kwalunkwe spazju, inkluż Hex: /* Kulur tal-pedament */ --fondazzjoni: #5accd6;
Kwalunkwe kuluri derivati minnu jiġu konvertiti f'OKLCH awtomatikament: --fondazzjoni-dawl: oklch(minn var(--fondazzjoni) [...]; } --fondazzjoni-mid: oklch(minn var(--fondazzjoni) [...]; } --fondazzjoni-dlam: oklch(minn var(--fondazzjoni) [...]; }
Kulur Relattiv Bħala Sistema tad-Disinn Aħseb dwar il-kulur relattiv bħala li tgħid: “Ħu dan il-kulur, ikkontrollah, imbagħad agħtini r-riżultat.” Hemm żewġ modi kif taġġusta kulur: bidliet assoluti u bidliet proporzjonali. Jidhru simili fil-kodiċi, iżda jġibu ruħhom b'mod differenti ħafna ladarba tibda tbiddel il-kuluri tal-pedament. Il-fehim ta 'dik id-differenza huwa dak li jista' jdawwar l-użu ta 'kulur relattiv f'sistema. /* Kulur tal-pedament */ --fondazzjoni: #5accd6;
Pereżempju, il-valur tad-dawl tal-kulur tal-fondazzjoni tiegħi huwa 0.7837, filwaqt li verżjoni aktar skura għandha valur ta '0.5837. Biex nikkalkula d-differenza, naqqas il-valur aktar baxx minn dak ogħla u napplika r-riżultat billi tuża funzjoni calc(): --fondazzjoni-dlam: oklch(minn var(--fondazzjoni) calc(l - 0.20) c h);
Biex tikseb kulur eħfef, inżid id-differenza minflok: --Fondazzjoni-dawl: oklch(minn var(--fondazzjoni) calc(l + 0.10) c h);
Kromaaġġustamenti jsegwu l-istess proċess. Biex tnaqqas l-intensità tal-kulur tal-pedament tiegħi minn 0.1035 għal 0.0035, naqqas valur wieħed mill-ieħor: oklch(minn var(--fondazzjoni) l calc(c - 0.10) h);
Biex noħloq paletta ta’ lwien, nikkalkula d-differenza bejn il-valur tal-lewn tal-kulur tal-fondazzjoni tiegħi (200) u l-lewn il-ġdid tiegħi (260): oklch(minn var(--fondazzjoni) l c calc(h + 60));
Dawk il-kalkoli huma assoluti. Meta naqqas ammont fiss, effettivament qed ngħid, "Dejjem naqqas dan." L-istess japplika meta żżid valuri fissi: calc(c - 0.10) calc(c + 0.10)
Tgħallimt il-limiti ta’ dan l-approċċ bl-iebsa. Meta kont kont innaqqas il-valuri tal-kroma fissi, il-kuluri waqgħu lejn il-griż hekk kif biddilt il-pedament. Paletta li ħadmet għal kulur waqgħet f'biċċiet għal ieħor. Multiplikazzjoni jaġixxi b'mod differenti. Meta mmultiplika l-kroma, qed ngħid lill-browser: "Naqqas l-intensità ta' dan il-kulur bi proporzjon." Ir-relazzjoni bejn il-kuluri tibqa' intatta, anke meta l-pedament jinbidel: calc(c * 0.10)
Tiegħi Nimxu, Skala, Dawwar Regoli
Ċaqlaq ħeffa (żid jew naqqas), Skala kroma (immultiplika), Dawwar lewn (żid jew naqqas il-gradi).
Niskala chroma għax irrid li l-bidliet fl-intensità jibqgħu proporzjonali mal-kulur bażi. Ir-relazzjonijiet tal-lewn huma rotazzjonali, għalhekk il-multiplikazzjoni tal-lewn ma tagħmilx sens. Il-ħeffa hija perċettiv u assoluta - il-multiplikazzjoni ta 'spiss tipproduċi riżultati fard.
Minn Kulur Wieħed Għal Tema Sħiħa Kulur relattiv jippermettili niddefinixxi kulur tal-pedament u niġġenera kull kulur ieħor li għandi bżonn - mili, puplesiji, waqfiet tal-gradjent, dellijiet - minnu. F'dak il-punt, il-kulur ma jibqax paletta u jibda jkun sistema. L-illustrazzjonijiet SVG għandhom tendenza li jerġgħu jużaw l-istess ftit kuluri fil-mili, il-puplesiji u l-gradjenti. Kulur relattiv iħallik tiddefinixxi dawk ir-relazzjonijiet darba u terġa' tużahom kullimkien - bħall-animaturi li użaw mill-ġdid sfondi biex joħolqu xeni ġodda.
Ibdel il-kulur tal-pedament darba, u kull kulur derivat jaġġorna awtomatikament, mingħajr ma tikkalkula mill-ġdid xejn bl-idejn. Barra minn grafika animata, stajt nuża dan l-istess approċċ biex niddefinixxi l-kuluri għall-istati ta 'elementi interattivi bħal buttuni u links. Il-kulur tal-pedament li użajt fit-Titolu Toon tiegħi "Lullabye-Bye Bear" huwa blu li jidher ċjan. L-isfond huwa gradjent radjali bejn il-pedament tiegħi u verżjoni aktar skura.
Biex noħolqu verżjonijiet alternattivi b'burdata kompletament differenti, għandi bżonn biss li nbiddel il-kulur tal-pedament: --fondazzjoni: #5accd6; --grad-end: var(--fondazzjoni); --grad-start: oklch(minn var(--fondazzjoni) calc(l - 0.2357) calc(c * 0.833) h);
Biex torbot dawk il-proprjetajiet tad-dwana mal-gradjent SVG tiegħi mingħajr ma nidduplika l-valuri tal-kulur, biddel il-valuri ta' stop-color kodifikati b'mod iebes bi stili inline:
Sussegwentement, kelli niżgura li t-Toon Test tiegħi dejjem jikkuntrasta ma' kwalunkwe kulur tal-pedament li nagħżel. Rotazzjoni ta’ lewn ta’ 180 grad tipproduċi kulur komplementari li ċertament jitfaċċa — iżda jista’ jivvibra b’mod skomdu: .test-dawl { imla: oklch (minn var(--fondazzjoni) l c calc(h + 180)); }
Ċaqliq ta' 90° jipproduċi kulur sekondarju ħaj mingħajr ma jkun komplementari għal kollox: .test-dawl { imla: oklch (minn var(--fondazzjoni) l c calc(h - 90)); }
Ir-rikreazzjoni tiegħi tat-Titolu Toon tal-1959 ta 'Quick Draw McGraw "El Kabong" tuża l-istess tekniki iżda b'paletta aktar varjata. Pereżempju, hemm gradjent radjali ieħor bejn il-kulur tal-pedament u dell aktar skur.
Il-bini u s-siġra fl-isfond huma sempliċement sfumaturi differenti tal-istess kulur tal-pedament. Għal dawk il-mogħdijiet, kelli bżonn żewġ kuluri ta' mili addizzjonali: .bg-mid { imla: oklch (minn var(--fondazzjoni) calc(l - 0.04) calc(c * 0.91) h); }
.bg-dlam { imla: oklch (minn var(--fondazzjoni) calc(l - 0.12) calc(c * 0.64) h); }
Meta Il-Fondazzjonijiet Jibdew Jiċċaqilqu
S'issa, dak kollu li wrejt kien statiku. Anke meta xi ħadd juża picker tal-kulur biex ibiddel il-kulur tal-pedament, dik il-bidla sseħħ istantanjament. Iżda l-grafika animata rari toqgħod wieqfa - il-ħjiel jinsab fl-isem. Għalhekk, jekk il-kulur huwa parti mis-sistema, m'hemm l-ebda raġuni li ma jistax janima wkoll.
Biex janima l-kulur tal-pedament, l-ewwel għandi bżonn naqsamha fil-kanali OKLCH tagħha— ħeffa, kroma, u lewn. Iżda hemm pass żejjed importanti: għandi bżonn nirreġistra dawk il-valuri bħala proprjetajiet personalizzati ttajpjati. Imma dan xi jfisser?
B'mod awtomatiku, browser ma jafx jekk valur ta' proprjetà personalizzat CSS jirrappreżentax kulur, tul, numru, jew xi ħaġa oħra kompletament. Dan spiss ifisser li ma jistgħux jiġu interpolati bla xkiel waqt l-animazzjoni, u jaqbżu minn valur għall-ieħor.
Ir-reġistrazzjoni ta’ proprjetà tad-dwana tgħid lill-browser it-tip ta’ valur li jirrappreżenta u kif għandu jġib ruħu maż-żmien. F'dan il-każ, nixtieq li l-browser jittratta l-kanali tal-kulur tiegħi bħala numri sabiex ikunu jistgħu jiġu animati bla xkiel.
@propjetà --f-l {
sintassi: "
@propjetà --f-c {
sintassi: "
@propjetà --f-h {
sintassi: "
Ladarba jkunu rreġistrati, dawn il-proprjetajiet tad-dwana jġibu ruħhom bħal CSS nattiv. Il-browser jista’ jinterpolahom qafas b’qafas. Imbagħad nibni mill-ġdid il-kulur tal-pedament minn dawk il-kanali: --fondazzjoni: oklch(var(--f-l) var(--f-c) var(--f-h));
Dan jagħmel il-kulur tal-pedament isir animabbli, bħal kull valur numeriku ieħor. Hawnhekk hawn animazzjoni sempliċi ta' "nifs" li b'ġentilezza tbiddel il-ħeffa maż-żmien: @keyframes tieħu n-nifs { 0%, 100% { --f-l: 0.36; } 50% { --f-l: 0.46; } }
.toon-title { animazzjoni: nifs 10s ease-in-out infinita; }
Minħabba li kull kulur ieħor fil-mili, gradjenti, u puplesiji huwa derivat minn --foundation, dawn kollha janimaw flimkien, u xejn ma jeħtieġ li jiġi aġġornat manwalment. Kulur Wieħed Animat, Effetti Ħafna Fil-bidu ta 'dan il-proċess, staqsejt jekk il-valuri relattivi tal-kulur CSS jistgħux joffru aktar possibbiltajiet filwaqt li jagħmluhom aktar sempliċi biex jiġu implimentati. Dan l-aħħar żidt sfond ġdid ta 'minjiera tad-deheb fil-paġna ta' kuntatt tal-websajt tiegħi, u l-ewwel iterazzjoni kienet tinkludi lampi taż-żejt li jiddu u jitbandal.
Xtaqt nesplora kif l-animazzjoni tal-kuluri relattivi tas-CSS tista 'tagħmel l-intern tal-minjiera aktar realistiku billi tilwiha b'kuluri mill-lampi. Ridt li jaffettwaw id-dinja ta 'madwarhom, il-mod kif jagħmel id-dawl reali. Għalhekk, aktar milli janima kuluri multipli, bnejt sistema ta’ dawl ċkejkna li tanima kulur wieħed biss.
L-ewwel kompitu tiegħi kien li nagħmel saff overlay bejn l-isfond u l-lampi tiegħi:
Jiena użajt mix-blend-mode: kulur għax dak tilwien dak li hemm taħtu filwaqt li ppreserva l-luminanza sottostanti. Peress li rrid li l-overlay tkun viżibbli biss meta l-animazzjonijiet ikunu mixgħula, għamilt l-opt-in tal-overlay: .svg-mine #overlay { wiri: xejn; }
@media (jippreferi-mozzjoni mnaqqsa: ebda preferenza) { .svg-mine[data-animations=on] #overlay { wiri: blokk; opaċità: 0.5; } }
Is-superviżjoni kienet f'postha, iżda kienet għadha mhix imqabbda mal-lampi. Jien kelli bżonn sors tad-dawl. Il-lampi tiegħi huma sempliċi, u kull wieħed fih element ċirku li jien imċajpra b'filtru. Il-filtru jipproduċi ċċajpar artab ħafna fuq iċ-ċirku kollu.
Minflok ma nimima l-overlay u l-lampi separatament, jien janima token wieħed tal-kulur "fjamma" u nikseb kull ħaġa oħra minn dak. L-ewwel, nirreġistra tliet proprjetajiet personalizzati ittajpjati għall-kanali OKLCH:
@propjetà --fl-l {
sintassi: "
Animajt dawk il-kanali, deliberatament nimbotta ftit frejms lejn oranġjo sabiex it-teptip jaqra b'mod ċar bħala dawl tan-nar:
@keyframes fjamma { 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; } }
Imbagħad skoprejt dik l-animazzjoni għall-SVG, għalhekk il-varjabbli kondiviżi huma disponibbli kemm għall-lampi kif ukoll għall-overlay tiegħi:
@media (jippreferi-mozzjoni mnaqqsa: ebda preferenza) { .svg-mine[data-animations=on] { animazzjoni: fjamma 3.6s infinita lineari; iżolament: iżolat;
/* Ibni kulur tal-fjamma minn kanali animati */ --fjamma: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Kulur tal-bozza derivat mill-fjamma */ --lamp-core: oklch(from var(--flame) calc(l + 0.05) calc(c * 0.70) h);
/* Lewn overlay derivat mill-istess fjamma */ --overlay-tint: oklch (minn var (--fjamma) calc(l + 0.06) calc(c * 0.65) calc(h - 10)); } }
Fl-aħħarnett, applikajt dawk il-kuluri derivati mal-lampi li jleqqu u l-overlay li jaffettwaw: @media (jippreferi-mozzjoni mnaqqsa: ebda preferenza) { .svg-mine[data-animations=on] #mine-lamp-1 > ċirku, .svg-mine[data-animations=on] #mine-lamp-2 > ċirku { imla: var(--lampa-qalba); }
.svg-mine[data-animations=on] #overlay { wiri: blokk; imla: var(--overlay-lewn); opaċità: 0.5; } }
Meta l-fjamma tiċċaqlaq lejn oranġjo, il-lampi jisħnu, u x-xena tissaħħan magħhom. Meta l-fjamma tiksaħ, kollox joqgħod flimkien. L-aħjar parti hija li xejn ma huwa miktub manwalment. Jekk nibdel il-kulur tal-pedament jew tweak il-firxiet tal-animazzjoni tal-fjamma, is-sistema tad-dawl kollha taġġorna simultanjament. Tista' tara r-riżultat finali fuq il-websajt tiegħi. Użu mill-ġdid, Repurpose, Rivedut Dawk l-animaturi ta’ Hanna-Barbera kienu sfurzati li jerġgħu jużaw l-elementi minħabba neċessità, imma jien nerġa’ nuża l-kuluri għax jagħmel ix-xogħol tiegħi aktar konsistenti u aktar faċli biex jinżamm. Il-valuri relattivi tal-kulur CSS jippermettuni:
Iddefinixxi kulur pedament wieħed, Iddeskrivi kif kuluri oħra jirrelataw magħha, Uża mill-ġdid dawk ir-relazzjonijiet kullimkien, u Anima s-sistema billi tbiddel valur wieħed.
Il-kulur relattiv ma jagħmilx biss it-tema aktar faċli. Jinkoraġġixxi mod ta’ ħsieb fejn il-kulur, bħall-moviment, huwa intenzjonat — u fejn il-bdil ta’ valur wieħed jista’ jittrasforma xena sħiħa mingħajr ma terġa’ tikteb ix-xogħol taħtha.
