Mi lastatempe refreŝigis la viglajn grafikaĵojn en mia retejo kun nova temo kaj grupo de pioniraj gravuloj, praktikante multajn teknikojn, kiujn mi dividis en ĉi tiu serio. Kelkaj el miaj animacioj ŝanĝas aspekton kiam iu interagas kun ili aŭ je malsamaj tempoj de la tago.
La koloroj en la grafikaĵo sur miaj blogpaĝoj ŝanĝiĝas de mateno ĝis nokto ĉiutage. Poste, estas la neĝa reĝimo, kiu aldonas malvarmajn kolorojn kaj vintran temon, ĝentile de tegmentotavolo kaj miksa reĝimo.
Laborante pri tio, mi komencis demandi ĉu CSS-rilataj kolorvaloroj povus doni al mi pli da kontrolo dum ankaŭ simpligante la procezon. Noto: En ĉi tiu lernilo, mi koncentriĝos pri relativaj kolorvaloroj kaj la OKLCH-kolorspaco por temaj grafikaĵoj kaj kuraĝigoj. Se vi volas plonĝi profunde en relativan koloron, Ahmad Shadeed kreis bonegan interagan gvidilon. Koncerne kolorspacojn, gamojn kaj OKLCH, nia propra Geoff Graham skribis pri ili.
Ripeta uzo de elementoj estis ŝlosilo. Fonoj estis recikligitaj kiam ajn ebla, kun zomoj kaj supermetaĵoj helpantaj konstrui novajn scenojn el la sama arto. Ĝi naskiĝis el neceso, sed ĝi ankaŭ instigis pensi laŭ serioj prefere ol individuaj scenoj. La problemo Kun Mane Ĝisdatigo de Koloraj Paletoj Ni iru rekte al mia defio. En Toon-Titoloj kiel ĉi tiu - bazita sur la 1959-datita Yogi Bear Show epizodo "Lullabye-Bye Bear" - kaj mia laboro ĝenerale, paletroj estas limigitaj al elektitaj kelkaj koloroj.
Mi kreas nuancojn kaj nuancojn el tio, kion mi nomas mia "fundamenta" koloro por pligrandigi la paletron sen aldoni pli da nuancoj.
En Sketch, mi laboras en la HSL-kolorspaco, do ĉi tiu procezo implikas pliigi aŭ malpliigi la malpezan valoron de mia baza koloro. Sincere, ĝi ne estas peniga tasko - sed elekti malsaman bazkoloron postulas krei tute novan aron da nuancoj kaj nuancoj. Fari tion permane, denove kaj denove, rapide fariĝas peniga.
Mi menciis la HSL - H (nuanco), S (saturiĝo) kaj L (lumeco) - kolorspacon, sed tio estas nur unu el pluraj manieroj priskribi koloron. RGB - R (ruĝa), G (verda), B (blua) - verŝajne estas la plej konata, almenaŭ en ĝia Hex-formo. Ekzistas ankaŭ LAB - L (malpezeco), A (verda-ruĝa), B (blua-flava) - kaj la pli nova, sed nun vaste subtenata LCH - L (malpezeco), C (kroma), H (nuanco) - modelo en ĝia OKLCH-formo. Kun LCH — specife OKLCH en CSS — mi povas ĝustigi la lumvaloron de mia bazkoloro.
Aŭ mi povas ŝanĝi ĝian kromadon. LCH-kroma kaj HSL-saturiĝo ambaŭ priskribas la intensecon aŭ riĉecon de koloro, sed ili faras tion laŭ malsamaj manieroj. LCH donas al mi pli larĝan gamon kaj pli antaŭvideblan miksadon inter koloroj.
Mi ankaŭ povas ŝanĝi la nuancon por krei paletron de koloroj, kiuj kunhavas la samajn malpezajn kaj kromajn valorojn. En kaj HSL kaj LCH, la nuancspektro komenciĝas ĉe ruĝa, moviĝas tra verda kaj blua, kaj revenas al ruĝa.
Kial OKLCH Ŝanĝis Kiel Mi Pensas Pri Koloro Retumila subteno por la kolorspaco OKLCH nun estas disvastigita, eĉ se dezajnaj iloj - inkluzive de Sketch - ne atingis. Feliĉe, tio ne devus malhelpi vin uzi OKLCH. Retumiloj feliĉe konvertos valorojn Hex, HSL, LAB kaj RGB en OKLCH por vi. Vi povas difini CSS kutiman posedaĵon kun fundamenta koloro en iu ajn spaco, inkluzive de Hex: /* Bazkoloro */ --fondaĵo: #5accd6;
Ĉiuj koloroj derivitaj de ĝi estos konvertitaj en OKLCH aŭtomate: --fondaĵo-lumo: oklch(de var(--fondaĵo) [...]; } --fondaĵo-mezo: oklch(de var(--fondaĵo) [...]; } --fondaĵo-malluma: oklch(de var(--fondaĵo) [...]; }
Relativa Koloro Kiel Dezajna Sistemo Pensu pri relativa koloro kiel diri: "Prenu ĉi tiun koloron, ĝustigu ĝin, tiam donu al mi la rezulton." Estas du manieroj alĝustigi koloron: absolutaj ŝanĝoj kaj proporciaj ŝanĝoj. Ili aspektas similaj en kodo, sed kondutas tre malsame post kiam vi komencas interŝanĝi fundamentajn kolorojn. Kompreni tiun diferencon estas tio, kio povas turni uzi relativan koloron en sistemon. /* Bazkoloro */ --fondaĵo: #5accd6;
Ekzemple, la malpeza valoro de mia bazkoloro estas 0.7837, dum pli malhela versio havas valoron de 0.5837. Por kalkuli la diferencon, mi subtrahas la pli malaltan valoron de la pli alta kaj aplikas la rezulton uzante calc() funkcion: --fondaĵo-malluma: oklch(de var(--fondaĵo) calc(l - 0,20) c h);
Por atingi pli helan koloron, mi anstataŭe aldonas la diferencon: --fondaĵo-lumo: oklch(de var(--fondaĵo) calc(l + 0,10) c h);
Chromaalĝustigoj sekvas la saman procezon. Por redukti la intensecon de mia baza koloro de 0,1035 al 0,0035, mi subtrahas unu valoron de la alia: oklch(de var(--fondaĵo) l calc(c - 0,10) h);
Por krei paletron de nuancoj, mi kalkulas la diferencon inter la nuancvaloro de mia bazkoloro (200) kaj mia nova nuanco (260): oklch(de var(--fondaĵo) l c calc(h + 60));
Tiuj kalkuloj estas absolutaj. Kiam mi subtrahas fiksan kvanton, mi efike diras: "Ĉiam subtrahas ĉi tion." La sama validas kiam oni aldonas fiksajn valorojn: kalkulo (c - 0,10) kalkulo (c + 0,10)
Mi lernis la limojn de ĉi tiu aliro malfacile. Kiam mi fidis subtrahi fiksajn kromajn valorojn, koloroj kolapsis al grizo tuj kiam mi ŝanĝis la fundamenton. Paletro kiu funkciis por unu koloro disfalis por alia. Multipliko kondutas malsame. Kiam mi multobligas chroma, mi diras al la retumilo: "Malpliigu la intensecon de ĉi tiu koloro je proporcio." La rilato inter koloroj restas sendifekta, eĉ kiam la fundamento ŝanĝiĝas: kalkulo (c * 0,10)
Miaj Reguloj Movu Ĝin, Skalu ĝin, Rotaciu ĝin
Movu malpezecon (aldonu aŭ subtrahi), Skala kromo (obligo), Rotacii nuancon (aldonu aŭ subtrahi gradojn).
Mi skalas kroman ĉar mi volas ke intensecŝanĝoj restu proporciaj al la baza koloro. Nuancrilatoj estas rotaciaj, do multobligi nuancon ne havas sencon. Leĝereco estas percepta kaj absoluta - multobligi ĝin ofte produktas strangajn rezultojn.
De Unu Koloro Al Tuta Temo Relativa koloro permesas al mi difini fundamentan koloron kaj generi ĉiun alian koloron, kiun mi bezonas - plenigaĵoj, strekoj, gradienthaltoj, ombroj - el ĝi. Ĉe tiu punkto, koloro ĉesas esti paletro kaj komencas esti sistemo. SVG-ilustraĵoj tendencas reuzi la samajn malmultajn kolorojn tra plenigaĵoj, strekoj kaj gradientoj. Relativa koloro ebligas vin difini tiujn rilatojn unufoje kaj reuzi ilin ĉie - same kiel vigligistoj reuzis fonojn por krei novajn scenojn.
Ŝanĝu la bazan koloron unufoje, kaj ĉiu derivita koloro ĝisdatiĝas aŭtomate, sen rekalkuli ion mane. Ekster viglaj grafikaĵoj, mi povus uzi ĉi tiun saman aliron por difini kolorojn por la statoj de interagaj elementoj kiel butonoj kaj ligiloj. La bazkoloro, kiun mi uzis en mia Toon Titolo "Lullabye-Bye Bear" estas cejanaspekta bluo. La fono estas radiala gradiento inter mia fundamento kaj pli malhela versio.
Por krei alternativajn versiojn kun tute malsamaj humoroj, mi bezonas nur ŝanĝi la fundamentan koloron: --fondaĵo: #5accd6; --grad-end: var(--fundamento); --grad-start: oklch(de var(--fondaĵo) calc(l - 0,2357) calc(c * 0,833) h);
Por ligi tiujn kutimajn ecojn al mia SVG-gradiento sen duobligi kolorvalorojn, mi anstataŭigis malmole kodigitajn halt-kolorajn valorojn per enliniaj stiloj:
Poste, mi devis certigi, ke mia Toon Teksto ĉiam kontrastas kun kia ajn bazkoloro, kiun mi elektas. 180-grada nuanco-rotacio produktas komplementan koloron, kiu certe aperas - sed povas vibri malkomforte: .teksto-lumo { plenigi: oklch(de var(--fondaĵo) l c calc(h + 180)); }
90° movo produktas vivecan sekundaran koloron sen esti plene komplementa: .teksto-lumo { plenigi: oklch(de var(--fondaĵo) l c calc(h - 90)); }
Mia rekreo de la 1959 Toon Title de Quick Draw McGraw "El Kabong" uzas la samajn teknikojn sed kun pli varia paletro. Ekzemple, estas alia radiala gradiento inter la fundamenta koloro kaj pli malhela ombro.
La konstruaĵo kaj arbo en la fono estas simple malsamaj nuancoj de la sama bazkoloro. Por tiuj vojoj, mi bezonis du pliajn plenigkolorojn: .bg-mezo { plenigi: oklch(de var(--fondaĵo) calc(l - 0,04) calc(c * 0,91) h); }
.bg-malluma { plenigi: oklch(de var(--fondaĵo) calc(l - 0,12) calc(c * 0,64) h); }
Kiam La Fundamentoj Komencas Moviĝi
Ĝis nun ĉio, kion mi montris, estis senmova. Eĉ kiam iu uzas kolor-elektilon por ŝanĝi la fundamentan koloron, tiu ŝanĝo okazas tuj. Sed viglaj grafikaĵoj malofte staras - la indico estas en la nomo. Do, se koloro estas parto de la sistemo, ne ekzistas kialo, ke ĝi ankaŭ ne povas animi.
Por animi la fundamentan koloron, mi unue devas dividi ĝin en ĝiajn OKLCH-kanalojn- malpezeco, kromo kaj nuanco. Sed estas grava kroma paŝo: mi devas registri tiujn valorojn kiel tajpitaj kutimaj propraĵoj. Sed kion tio signifas?
Defaŭlte, retumilo ne scias ĉu CSS-adaptita posedaĵvaloro reprezentas koloron, longon, nombron aŭ ion alian. Tio ofte signifas, ke ili ne povas esti interpolitaj glate dum animacio, kaj salti de unu valoro al la sekva.
Registri kutiman posedaĵon rakontas al la retumilo la tipon de valoro kiun ĝi reprezentas kaj kiel ĝi devus konduti laŭlonge de la tempo. En ĉi tiu kazo, mi volas, ke la retumilo traktu miajn kolorajn kanalojn kiel nombrojn, por ke ili estu glate viglaj.
@posedaĵo --f-l {
sintakso: "
@posedaĵo --f-c {
sintakso: "
@posedaĵo --f-h {
sintakso: "
Post kiam registritaj, ĉi tiuj kutimaj propraĵoj kondutas kiel denaska CSS. La retumilo povas interpoli ilin kadro post kadro. Mi tiam rekonstruas la fundamentan koloron el tiuj kanaloj: --fondaĵo: oklch(var(--f-l) var(--f-c) var(--f-h));
Ĉi tio igas la fundamentan koloron iĝi vigla, same kiel ajna alia nombra valoro. Jen simpla animacio "spiranta", kiu milde ŝanĝas malpezecon laŭlonge de la tempo: @keyframes spiras { 0%, 100% { --f-l: 0,36; } 50% { --f-l: 0,46; } }
.toon-title { animacio: spiri 10s-facilecon-en-el senfinan; }
Ĉar ĉiu alia koloro en plenigaĵoj, gradientoj kaj strekoj devenas de --foundation, ili ĉiuj animas kune, kaj nenio devas esti ĝisdatigita permane. Unu Vigla Koloro, Multaj Efektoj Komence de ĉi tiu procezo, mi scivolis ĉu CSS-rilataj kolorvaloroj povus oferti pli da eblecoj dum ankaŭ faciligante ilin. Mi ĵus aldonis novan orminejan fonon al la kontaktpaĝo de mia retejo, kaj la unua ripeto inkludis oleajn lampojn, kiuj brilas kaj svingas.
Mi volis esplori kiel vigligi CSS-rilatajn kolorojn povus fari la minan internon pli realisma nuancante ĝin per koloroj de la lampoj. Mi volis, ke ili influu la mondon ĉirkaŭ ili, kiel faras reala lumo. Do, anstataŭ vigligi plurajn kolorojn, mi konstruis etan lumsistemon kiu animas nur unu koloron.
Mia unua tasko estis ŝovi tegmentan tavolon inter la fono kaj miaj lampoj: < vojo id = "supermetu" plenigi="var(--overlay-tint)" [...] stilo = "miksaĵo-miksaĵa reĝimo: koloro" />
Mi uzis miksaĵ-miksan reĝimon: koloron ĉar tio nuancas tion, kio estas sub ĝi, konservante la suban lumecon. Ĉar mi volas, ke la supermetaĵo estu videbla nur kiam kuraĝigoj estas ŝaltitaj, mi faris la superkovron enskribiĝi: .svg-mine #overlay { montriĝo: neniu; }
@media (prefers-reduktita-moviĝo: sen-prefero) { .svg-mine[data-animations=on] #overlay { montri: bloko; opakeco: 0,5; } }
La tegmento estis en loko, sed ankoraŭ ne ligita al la lampoj. Mi bezonis lumfonton. Miaj lampoj estas simplaj, kaj ĉiu enhavas cirklan elementon, kiun mi malklarigis per filtrilo. La filtrilo produktas tre mildan malklarecon super la tuta cirklo.
Anstataŭ animi la tegaĵon kaj lampojn aparte, mi animas ununuran "flaman" kolorĵeton kaj derivas ĉion alian el tio. Unue, mi registras tri tajpitajn kutimajn ecojn por OKLCH-kanaloj:
@proprty --fl-l {
sintakso: "
Mi vigligis tiujn kanalojn, intence puŝante kelkajn kadrojn al oranĝo, por ke la flagro klare legeblas kiel fajrolumo:
@keyframes flamo { 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; } }
Tiam mi ampleksis tiun animacion al la SVG, do la komunaj variabloj haveblas kaj al la lampoj kaj al mia superkovraĵo:
@media (prefers-reduktita-moviĝo: sen-prefero) { .svg-mine[data-animations=on] { kuraĝigo: flamo 3.6s senfina lineara; isolation: izoli;
/* Konstruu flaman koloron el viglaj kanaloj */ --flame: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Lampkoloro derivita de flamo */ --lamp-core: oklch(el var(--flame) calc(l + 0.05) calc(c * 0.70) h);
/* Kovru nuancon derivitan de la sama flamo */ --overlay-tint: oklch(de var(--flame) calc(l + 0,06) calc(c * 0,65) calc(h - 10)); } }
Fine, mi aplikis tiujn derivitajn kolorojn al la brilantaj lampoj kaj la tegaĵo kiun ili influas: @media (prefers-reduktita-moviĝo: sen-prefero) { .svg-mine[data-animations=on] #mine-lamp-1 > cirklo, .svg-mine[data-animations=on] #mine-lamp-2 > cirklo { plenigi: var(--lampo-kerno); }
.svg-mine[data-animations=on] #overlay { montri: bloko; plenigi: var(--overlay-tint); opakeco: 0,5; } }
Kiam la flamo ŝanĝiĝas al oranĝo, la lampoj varmiĝas, kaj la sceno varmiĝas kun ili. Kiam la flamo malvarmiĝas, ĉio aranĝas kune. La plej bona parto estas, ke nenio estas skribita permane. Se mi ŝanĝas la fundamentan koloron aŭ ĝustigas la flamajn animaciajn gamojn, la tuta lumsistemo ĝisdatiĝas samtempe. Vi povas vidi la finan rezulton en mia retejo. Reuzi, Reutiligi, Revizitita Tiuj Hanna-Barbera vigligistoj estis devigitaj reutiligi elementojn pro neceso, sed mi reuzas kolorojn ĉar ĝi faras mian laboron pli konsekvenca kaj pli facile konservebla. CSS-rilataj kolorvaloroj permesas al mi:
Difinu ununuran bazkoloron, Priskribu kiel aliaj koloroj rilatas al ĝi, Reuzu tiujn rilatojn ĉie, kaj Vimigu la sistemon ŝanĝante unu valoron.
Relativa koloro ne nur faciligas la temon. Ĝi instigas pensmanieron kie koloro, kiel moviĝo, estas intencita - kaj kie ŝanĝi unu valoron povas transformi tutan scenon sen reverki la verkon sub ĝi.
