Ek het onlangs die geanimeerde grafika op my webwerf verfris met 'n nuwe tema en 'n groep baanbrekerskarakters, wat baie van die tegnieke wat ek in hierdie reeks gedeel het, in die praktyk toegepas het. 'n Paar van my animasies verander voorkoms wanneer iemand met hulle interaksie het of op verskillende tye van die dag.
Die kleure in die grafika bo-op my blogbladsye verander elke dag van oggend tot aand. Dan is daar die sneeumodus, wat koue kleure en 'n winterse tema byvoeg, met vergunning van 'n oorleglaag en 'n mengmodus.
Terwyl ek hieraan gewerk het, het ek begin wonder of CSS relatiewe kleurwaardes my meer beheer kan gee terwyl dit ook die proses vereenvoudig. Let wel: In hierdie tutoriaal sal ek fokus op relatiewe kleurwaardes en die OKLCH-kleurruimte vir temagrafika en animasies. As jy diep in relatiewe kleur wil duik, het Ahmad Shadeed 'n uitstekende interaktiewe gids geskep. Wat kleurruimtes, spektrums en OKLCH betref, het ons eie Geoff Graham daaroor geskryf.
Herhaalde gebruik van elemente was die sleutel. Agtergronde is waar moontlik hergebruik, met inzoem en oorleg wat gehelp het om nuwe tonele uit dieselfde kunswerk te bou. Dit is uit nood gebore, maar dit het ook die denke in terme van reekse eerder as individuele tonele aangemoedig. Die probleem met die handmatige opdatering van kleurpalette Kom ons gaan reguit na my uitdaging. In Toon-titels soos hierdie een - gebaseer op die 1959 Yogi Bear Show-episode "Lullabye-Bye Bear" - en my werk oor die algemeen, is palette beperk tot 'n paar uitgesoekte kleure.
Ek skep skakerings en tinte van wat ek my "fondament"-kleur noem om die palet uit te brei sonder om meer skakerings by te voeg.
In Sketch werk ek in die HSL-kleurruimte, so hierdie proses behels die verhoging of vermindering van die ligtheidswaarde van my onderlaagkleur. Eerlik gesê, dit is nie 'n moeilike taak nie - maar om 'n ander fondamentkleur te kies, vereis die skep van 'n hele nuwe stel skakerings en tinte. Om dit met die hand te doen, weer en weer, word vinnig moeisaam.
Ek het die HSL - H (kleur), S (versadiging) en L (ligheid) - kleurruimte genoem, maar dit is net een van verskeie maniere om kleur te beskryf. RGB — R (rooi), G (groen), B (blou) — is waarskynlik die bekendste, ten minste in sy Hex-vorm. Daar is ook LAB - L (ligheid), A (groen-rooi), B (blou-geel) - en die nuwer, maar nou wyd ondersteunde LCH - L (ligheid), C (chroma), H (kleur) - model in sy OKLCH-vorm. Met LCH - spesifiek OKLCH in CSS - kan ek die ligte waarde van my onderlaagkleur aanpas.
Of ek kan sy chroma verander. LCH-chroma en HSL-versadiging beskryf albei die intensiteit of rykheid van 'n kleur, maar hulle doen dit op verskillende maniere. LCH gee my 'n groter verskeidenheid en meer voorspelbare vermenging tussen kleure.
Ek kan ook die skakering verander om 'n palet van kleure te skep wat dieselfde ligheid en chromawaardes deel. In beide HSL en LCH begin die kleurspektrum by rooi, beweeg deur groen en blou, en keer terug na rooi.
Waarom OKLCH verander het hoe ek oor kleur dink Blaaierondersteuning vir die OKLCH-kleurruimte is nou wydverspreid, selfs al het ontwerpgereedskap – insluitend Sketch – nie ingehaal nie. Gelukkig moet dit jou nie keer om OKLCH te gebruik nie. Blaaiers sal graag vir jou Hex-, HSL-, LAB- en RGB-waardes omskakel na OKLCH. U kan 'n CSS-pasgemaakte eiendom met 'n fondamentkleur in enige spasie definieer, insluitend Hex: /* Grondslagkleur */ --fondament: #5accd6;
Enige kleure wat daaruit afgelei word, sal outomaties in OKLCH omgeskakel word: --fondamentlig: oklch(van var(--stigting) [...]; } --stigting-middel: oklch(van var(--stigting) [...]; } --fondasie-donker: oklch(van var(--stigting) [...]; }
Relatiewe kleur as 'n ontwerpstelsel Dink aan relatiewe kleur as om te sê: "Neem hierdie kleur, pas dit aan, gee my dan die resultaat." Daar is twee maniere om 'n kleur aan te pas: absolute veranderinge en proporsionele veranderinge. Hulle lyk soortgelyk in kode, maar tree baie anders op sodra jy begin om onderlaagkleure te ruil. Om daardie verskil te verstaan, is wat die gebruik van relatiewe kleur in 'n sisteem kan verander. /* Grondslagkleur */ --fondament: #5accd6;
Byvoorbeeld, die ligte waarde van my onderlaagkleur is 0,7837, terwyl 'n donkerder weergawe 'n waarde van 0,5837 het. Om die verskil te bereken, trek ek die laer waarde van die hoër een af en pas die resultaat toe met behulp van 'n calc() funksie: --fondament-donker: oklch(van var(--stigting) bereken(l - 0,20) c h);
Om 'n ligter kleur te verkry, voeg ek eerder die verskil by: --fondasie-lig: oklch(van var(--stigting) bereken (l + 0.10) c h);
Chromaaanpassings volg dieselfde proses. Om die intensiteit van my onderlaagkleur van 0,1035 tot 0,0035 te verminder, trek ek een waarde van die ander af: oklch(van var(--stigting) l bereken (c - 0,10) h);
Om 'n palet van skakerings te skep, bereken ek die verskil tussen die tintwaarde van my onderlaagkleur (200) en my nuwe tint (260): oklch(van var(--stigting) l c bereken (h + 60));
Daardie berekeninge is absoluut. Wanneer ek 'n vaste bedrag aftrek, sê ek effektief: "Trek altyd soveel af." Dieselfde geld wanneer vaste waardes bygevoeg word: bereken(c - 0,10) bereken(c + 0,10)
Ek het die grense van hierdie benadering op die harde manier geleer. Toe ek staatgemaak het op die aftrek van vaste chroma-waardes, het kleure na grys ineengestort sodra ek die fondament verander het. ’n Palet wat vir een kleur gewerk het, het vir ’n ander uitmekaar geval. Vermenigvuldiging tree anders op. Wanneer ek chroma vermenigvuldig, sê ek vir die blaaier: "Verminder hierdie kleur se intensiteit met 'n verhouding." Die verhouding tussen kleure bly ongeskonde, selfs wanneer die fondament verander: bereken(c * 0,10)
My skuif dit, skaal dit, draai dit reëls
Beweeg ligtheid (optel of aftrek), Skaal chroma (vermenigvuldig), Draai tint (tel grade by of trek af).
Ek skaal chroma omdat ek wil hê dat intensiteitsveranderinge eweredig aan die basiskleur moet bly. Kleurkleurverwantskappe is roterend, dus maak die vermenigvuldiging van kleur geen sin nie. Ligheid is perseptueel en absoluut - vermenigvuldiging lewer dikwels vreemde resultate.
Van Een Kleur Tot 'n Hele Tema Relatiewe kleur laat my toe om 'n fondamentkleur te definieer en elke ander kleur wat ek nodig het - vulsels, strepe, gradiëntstoppe, skaduwees - daaruit te genereer. Op daardie stadium hou kleur op om 'n palet te wees en begin dit 'n sisteem te wees. SVG-illustrasies is geneig om dieselfde paar kleure oor vulsels, strepe en gradiënte te hergebruik. Met relatiewe kleur kan jy daardie verhoudings een keer definieer en dit oral hergebruik - net soos animators agtergronde hergebruik het om nuwe tonele te skep.
Verander die fondamentkleur een keer, en elke afgeleide kleur word outomaties opgedateer, sonder om iets met die hand te herbereken. Buiten geanimeerde grafika kan ek dieselfde benadering gebruik om kleure te definieer vir die toestande van interaktiewe elemente soos knoppies en skakels. Die onderlaagkleur wat ek in my "Lullabye-Bye Bear" Toon-titel gebruik het, is 'n siaan-blou. Die agtergrond is 'n radiale gradiënt tussen my onderlaag en 'n donkerder weergawe.
Om alternatiewe weergawes met heeltemal ander buie te skep, hoef ek net die onderlaagkleur te verander: --fondament: #5accd6; --graad-einde: var(--stigting); --grad-begin: oklch (van var (--stigting) bereken(l - 0,2357) bereken(c * 0,833) h);
Om daardie pasgemaakte eienskappe aan my SVG-gradiënt te bind sonder om kleurwaardes te dupliseer, het ek hardgekodeerde stopkleurwaardes vervang met inlynstyle:
Vervolgens moes ek verseker dat my Toon Text altyd kontrasteer met watter onderlaagkleur ek ook al kies. 'n 180 grade-tintrotasie produseer 'n komplementêre kleur wat beslis opduik - maar kan ongemaklik vibreer: .text-light { vul: oklch (van var (--stigting) l c bereken (h + 180)); }
'n Verskuiwing van 90° produseer 'n lewendige sekondêre kleur sonder om volledig aanvullend te wees: .text-light { vul: oklch (van var (--stigting) l c bereken (h - 90)); }
My herskepping van Quick Draw McGraw se 1959 Toon Titel "El Kabong" gebruik dieselfde tegnieke maar met 'n meer gevarieerde palet. Byvoorbeeld, daar is nog 'n radiale gradiënt tussen die fondamentkleur en 'n donkerder skakering.
Die gebou en boom in die agtergrond is eenvoudig verskillende skakerings van dieselfde fondamentkleur. Vir daardie paaie het ek twee bykomende vulkleure nodig: .bg-mid { vul: oklch (van var (--stigting) bereken(l - 0,04) bereken(c * 0,91) h); }
.bg-dark { vul: oklch (van var (--stigting) bereken(l - 0.12) bereken(c * 0.64) h); }
Wanneer die fondamente begin beweeg
Tot dusver was alles wat ek gewys het staties. Selfs wanneer iemand 'n kleurkieser gebruik om die fondamentkleur te verander, vind daardie verandering onmiddellik plaas. Maar geanimeerde grafika staan selde stil - die leidraad is in die naam. Dus, as kleur deel van die stelsel is, is daar geen rede dat dit ook nie kan animeer nie.
Om die fondamentkleur te animeer, moet ek dit eers in sy OKLCH-kanale verdeel- ligheid, chroma en tint. Maar daar is 'n belangrike ekstra stap: ek moet daardie waardes as getikte pasgemaakte eienskappe registreer. Maar wat beteken dit?
By verstek weet 'n blaaier nie of 'n CSS-gepasmaakte eienskapwaarde 'n kleur, lengte, getal of iets heeltemal anders verteenwoordig nie. Dit beteken dikwels dat hulle nie glad tydens animasie geïnterpoleer kan word nie, en van een waarde na die volgende kan spring.
Deur 'n pasgemaakte eiendom te registreer, vertel die blaaier die tipe waarde wat dit verteenwoordig en hoe dit oor tyd moet optree. In hierdie geval wil ek hê dat die blaaier my kleurkanale as nommers moet behandel sodat hulle glad geanimeer kan word.
@property --f-l {
sintaksis: "
@property --f-c {
sintaksis: "
@property --f-h {
sintaksis: "
Sodra dit geregistreer is, gedra hierdie pasgemaakte eienskappe soos inheemse CSS. Die blaaier kan hulle raam-vir-raam interpoleer. Ek herbou dan die fondamentkleur vanaf daardie kanale: --fondament: oklch(var(--f-l) var(--f-c) var(--f-h));
Dit maak dat die fondamentkleur animeerbaar word, net soos enige ander numeriese waarde. Hier is 'n eenvoudige "asemhaling"-animasie wat liggies met verloop van tyd saggies verskuif: @keyframes asemhaal { 0%, 100% { --f-l: 0,36; } 50% { --f-l: 0,46; } }
.toon-title { animasie: asem 10s gemak-in-uit oneindig; }
Omdat elke ander kleur in vullings, gradiënte en beroertes van --foundation afgelei is, animeer hulle almal saam, en niks hoef handmatig opgedateer te word nie. Een geanimeerde kleur, baie effekte Aan die begin van hierdie proses het ek gewonder of CSS relatiewe kleurwaardes meer moontlikhede kan bied terwyl dit ook makliker is om te implementeer. Ek het onlangs 'n nuwe goudmyn-agtergrond by my webwerf se kontakbladsy gevoeg, en die eerste herhaling het olielampe ingesluit wat gloei en swaai.
Ek wou verken hoe die animasie van relatiewe CSS-kleure die myn-interieur meer realisties kan maak deur dit met kleure van die lampe te kleur. Ek wou hê hulle moet die wêreld om hulle beïnvloed, soos regte lig dit doen. Dus, eerder as om veelvuldige kleure te animeer, het ek 'n klein beligtingstelsel gebou wat net een kleur animeer.
My eerste taak was om 'n oorleglaag tussen die agtergrond en my lampe te plaas:
Ek het meng-meng-modus gebruik: kleur, want dit kleur wat daaronder is, terwyl die onderliggende helderheid behoue bly. Aangesien ek net wil hê dat die oorleg sigbaar moet wees wanneer animasies aangeskakel is, het ek die oorleg-intekening gemaak: .svg-myn #overlay { vertoon: geen; }
@media (verkies-verminderde-beweging: geen-voorkeur) { .svg-myn[data-animations=aan] #overlay { vertoon: blok; ondeursigtigheid: 0,5; } }
Die oortreksel was in plek, maar nog nie aan die lampe gekoppel nie. Ek het 'n ligbron nodig gehad. My lampe is eenvoudig, en elkeen bevat 'n sirkelelement wat ek met 'n filter vervaag het. Die filter produseer 'n baie sagte vervaag oor die hele sirkel.
In plaas daarvan om die oorleg en lampe afsonderlik te animeer, animeer ek 'n enkele "vlam"-kleurteken en lei alles anders daaruit af. Eerstens registreer ek drie getikte pasgemaakte eienskappe vir OKLCH-kanale:
@property --fl-l {
sintaksis: "
Ek het daardie kanale geanimeer en doelbewus 'n paar rame na oranje gedruk sodat die flikkering duidelik soos vuurlig lees:
@keyframes vlam { 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; } }
Toe het ek daardie animasie na die SVG geskop, sodat die gedeelde veranderlikes beskikbaar is vir beide die lampe en my oorleg:
@media (verkies-verminderde-beweging: geen-voorkeur) { .svg-myn[data-animations=aan] { animasie: vlam 3.6s oneindig lineêr; isolasie: isoleer;
/* Bou 'n vlamkleur uit geanimeerde kanale */ --vlam: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Lampkleur afgelei van vlam */ --lampkern: oklch(van var(--vlam) calc(l + 0.05) calc(c * 0.70) h);
/* Oorlegtint afkomstig van dieselfde vlam */ --overlay-tint: oklch(van var(--vlam) bereken(l + 0.06) bereken(c * 0.65) bereken(h - 10)); } }
Uiteindelik het ek daardie afgeleide kleure aangebring op die gloeiende lampe en die oorleg wat hulle beïnvloed: @media (verkies-verminderde-beweging: geen-voorkeur) { .svg-myn[data-animations=aan] #myn-lamp-1 > sirkel, .svg-myn[data-animasies=aan] #mynlamp-2 > sirkel { vul: var(--lampkern); }
.svg-myn[data-animations=aan] #overlay { vertoon: blok; vul: var (--oorleg-tint); ondeursigtigheid: 0,5; } }
Wanneer die vlam na oranje verskuif, word die lampe warm, en die toneel word saam met hulle warm. Wanneer die vlam afkoel, sit alles saam. Die beste deel is dat niks met die hand geskryf word nie. As ek die fondamentkleur verander of die vlamanimasiereekse aanpas, werk die hele beligtingstelsel gelyktydig op. U kan die finale uitslag op my webwerf sien. Hergebruik, Hergebruik, Herbesoek Daardie Hanna-Barbera-animeerders was gedwing om elemente uit nood te hergebruik, maar ek hergebruik kleure omdat dit my werk meer konsekwent en makliker maak om te onderhou. CSS relatiewe kleurwaardes laat my toe om:
Definieer 'n enkele fondamentkleur, Beskryf hoe ander kleure daarmee verband hou, Hergebruik daardie verhoudings oral, en Animeer die stelsel deur een waarde te verander.
Relatiewe kleur maak temas nie net makliker nie. Dit moedig 'n manier van dink aan waar kleur, soos beweging, doelbewus is - en waar die verandering van een waarde 'n hele toneel kan transformeer sonder om die werk daaronder te herskryf.
