Ik heb onlangs de geanimeerde afbeeldingen op mijn website vernieuwd met een nieuw thema en een groep baanbrekende personages, waarbij ik veel van de technieken die ik in deze serie heb gedeeld in de praktijk heb gebracht. Een paar van mijn animaties veranderen van uiterlijk wanneer iemand ermee communiceert of op verschillende tijdstippen van de dag.
De kleuren in de afbeelding bovenop mijn blogpagina's veranderen elke dag van 's morgens tot' s avonds. Dan is er de sneeuwmodus, die koude kleuren en een winters thema toevoegt, dankzij een overlay-laag en een overvloeimodus.
Terwijl ik hieraan werkte, begon ik me af te vragen of de relatieve kleurwaarden van CSS mij meer controle zouden kunnen geven en tegelijkertijd het proces zouden kunnen vereenvoudigen. Opmerking: in deze zelfstudie concentreer ik me op relatieve kleurwaarden en de OKLCH-kleurruimte voor het thema van afbeeldingen en animaties. Als je diep in de relatieve kleur wilt duiken, heeft Ahmad Shadeed een fantastische interactieve gids gemaakt. Wat kleurruimten, kleurengamma's en OKLCH betreft, schreef onze eigen Geoff Graham erover.
Herhaald gebruik van elementen was de sleutel. Achtergronden werden waar mogelijk hergebruikt, waarbij zoomlenzen en overlays hielpen bij het construeren van nieuwe scènes uit hetzelfde kunstwerk. Het werd geboren uit noodzaak, maar stimuleerde ook het denken in termen van series in plaats van individuele scènes. Het probleem met het handmatig bijwerken van kleurenpaletten Laten we meteen naar mijn uitdaging gaan. In Toon Titles zoals deze – gebaseerd op de Yogi Bear Show-aflevering “Lullabye-Bye Bear” uit 1959 – en mijn werk in het algemeen, zijn paletten beperkt tot een select aantal kleuren.
Ik creëer tinten en tinten van wat ik mijn ‘foundation’-kleur noem om het palet uit te breiden zonder meer tinten toe te voegen.
In Sketch werk ik in de HSL-kleurruimte, dus dit proces omvat het verhogen of verlagen van de lichtheidswaarde van mijn foundationkleur. Eerlijk gezegd is het geen lastige taak, maar als je een andere foundationkleur kiest, moet je een geheel nieuwe reeks tinten en tinten creëren. Dat steeds weer handmatig doen, wordt al snel omslachtig.
Ik noemde de HSL – H (tint), S (verzadiging) en L (lichtheid) – kleurruimte, maar dat is slechts een van de vele manieren om kleur te beschrijven. RGB – R (rood), G (groen), B (blauw) – is waarschijnlijk het meest bekend, althans in de Hex-vorm. Er is ook LAB – L (lichtheid), A (groen-rood), B (blauw-geel) – en het nieuwere, maar nu breed ondersteunde LCH – L (lichtheid), C (chroma), H (tint) – model in zijn OKLCH-vorm. Met LCH – specifiek OKLCH in CSS – kan ik de lichtheidswaarde van mijn foundationkleur aanpassen.
Of ik kan de chroma veranderen. LCH-chroma en HSL-verzadiging beschrijven beide de intensiteit of rijkdom van een kleur, maar doen dit op verschillende manieren. LCH geeft me een groter bereik en een voorspelbaardere overvloeiing tussen kleuren.
Ik kan ook de tint veranderen om een palet van kleuren te creëren die dezelfde lichtheid en chromawaarden delen. In zowel de HSL als de LCH begint het kleurspectrum bij rood, loopt door groen en blauw en keert terug naar rood.
Waarom OKLCH mijn manier van denken over kleur veranderde Browserondersteuning voor de OKLCH-kleurruimte is nu wijdverspreid, ook al hebben ontwerptools (waaronder Sketch) hun achterstand niet ingehaald. Gelukkig zou dat u er niet van moeten weerhouden OKLCH te gebruiken. Browsers converteren Hex-, HSL-, LAB- en RGB-waarden graag voor u naar OKLCH. U kunt een aangepaste CSS-eigenschap definiëren met een basiskleur in elke ruimte, inclusief Hex: /* Foundationkleur */ --stichting: #5accd6;
Alle daarvan afgeleide kleuren worden automatisch naar OKLCH omgezet: --fundering-licht: oklch(van var(--foundation) [...]; } --foundation-mid: oklch(van var(--foundation) [...]; } --fundering-donker: oklch(van var(--foundation) [...]; }
Relatieve kleur als ontwerpsysteem Beschouw relatieve kleur als volgt: “Neem deze kleur, pas hem aan en geef mij dan het resultaat.” Er zijn twee manieren om een kleur aan te passen: absolute veranderingen en proportionele veranderingen. Ze zien er qua code hetzelfde uit, maar gedragen zich heel anders als je eenmaal begint met het verwisselen van foundationkleuren. Door dat verschil te begrijpen, kan het gebruik van relatieve kleur een systeem worden. /* Foundationkleur */ --stichting: #5accd6;
De lichtheidswaarde van mijn foundationkleur is bijvoorbeeld 0,7837, terwijl een donkerdere versie een waarde heeft van 0,5837. Om het verschil te berekenen, trek ik de lagere waarde af van de hogere en pas ik het resultaat toe met behulp van een calc()-functie: --fundering-donker: oklch(van var(--stichting) bereken(l - 0,20) ch);
Om een lichtere kleur te bereiken, voeg ik in plaats daarvan het verschil toe: --funderingslicht: oklch(van var(--stichting) bereken(l + 0,10) ch);
Chromaaanpassingen volgen hetzelfde proces. Om de intensiteit van mijn foundationkleur te verminderen van 0,1035 naar 0,0035, trek ik de ene waarde van de andere af: oklch(van var(--stichting) 1 bereken(c - 0,10) h);
Om een kleurenpalet te creëren, bereken ik het verschil tussen de tintwaarde van mijn foundationkleur (200) en mijn nieuwe tint (260): oklch(van var(--stichting) l c bereken(h + 60));
Die berekeningen zijn absoluut. Als ik een vast bedrag aftrek, zeg ik feitelijk: “Trek altijd zoveel af.” Hetzelfde geldt voor het toevoegen van vaste waarden: bereken(c - 0,10) bereken(c + 0,10)
Ik heb de grenzen van deze aanpak op de harde manier geleerd. Toen ik vertrouwde op het aftrekken van vaste chromawaarden, zakten de kleuren in de richting van grijs zodra ik de basis veranderde. Een palet dat voor de ene kleur werkte, viel uiteen voor een andere. Vermenigvuldiging gedraagt zich anders. Wanneer ik chroma vermenigvuldig, zeg ik tegen de browser: "Verminder de intensiteit van deze kleur met een percentage." De relatie tussen kleuren blijft intact, zelfs als de ondergrond verandert: berekening(c * 0,10)
Mijn Move It, Scale It, Rotate It-regels
Lichtheid verplaatsen (optellen of aftrekken), Schaalchroma (vermenigvuldigen), Tint roteren (graden optellen of aftrekken).
Ik schaal de chroma omdat ik wil dat de intensiteitsveranderingen evenredig blijven aan de basiskleur. Tintrelaties zijn roterend, dus het vermenigvuldigen van tint heeft geen zin. Lichtheid is perceptueel en absoluut; het vermenigvuldigen ervan levert vaak vreemde resultaten op.
Van één kleur tot een heel thema Met relatieve kleur kan ik een basiskleur definiëren en daaruit elke andere kleur genereren die ik nodig heb (vullingen, lijnen, verloopstops, schaduwen). Op dat moment is kleur niet langer een palet, maar een systeem. SVG-illustraties hebben de neiging dezelfde paar kleuren te hergebruiken voor vullingen, lijnen en verlopen. Met relatieve kleuren kun je die relaties één keer definiëren en ze overal opnieuw gebruiken, net zoals animators achtergronden hergebruikten om nieuwe scènes te creëren.
Verander de basiskleur één keer en elke afgeleide kleur wordt automatisch bijgewerkt, zonder dat u iets handmatig hoeft te herberekenen. Buiten geanimeerde afbeeldingen zou ik dezelfde aanpak kunnen gebruiken om kleuren te definiëren voor de status van interactieve elementen zoals knoppen en links. De basiskleur die ik gebruikte in mijn "Lullabye-Bye Bear" Toon-titel is cyaanachtig blauw. De achtergrond is een radiaal verloop tussen mijn foundation en een donkerdere versie.
Om alternatieve versies met totaal verschillende stemmingen te creëren, hoef ik alleen de kleur van de basis te veranderen: --stichting: #5accd6; --grad-end: var(--foundation); --grad-start: oklch(van var(--stichting) berekening(l - 0,2357) berekening(c * 0,833) h);
Om deze aangepaste eigenschappen aan mijn SVG-verloop te binden zonder kleurwaarden te dupliceren, heb ik hardgecodeerde stopkleurwaarden vervangen door inline stijlen:
Vervolgens moest ik ervoor zorgen dat mijn Toon Text altijd contrasteert met de foundationkleur die ik kies. Een tintrotatie van 180 graden produceert een complementaire kleur die zeker opvalt, maar ongemakkelijk kan trillen: .tekstlicht { vullen: oklch(van var(--fundering) l c berekening(h + 180)); }
Een verschuiving van 90° produceert een levendige secundaire kleur zonder volledig complementair te zijn: .tekstlicht { vullen: oklch(van var(--fundering) lc berekening(h - 90)); }
Mijn recreatie van Quick Draw McGraw's Toon Title uit 1959 "El Kabong" gebruikt dezelfde technieken, maar met een gevarieerder palet. Er is bijvoorbeeld nog een radiaal verloop tussen de basiskleur en een donkerdere tint.
Het gebouw en de boom op de achtergrond zijn eenvoudigweg verschillende tinten van dezelfde basiskleur. Voor die paden had ik twee extra vulkleuren nodig: .bg-mid { vullen: oklch(van var(--fundering) bereken(l - 0,04) bereken(c * 0,91) h); }
.bg-donker { vullen: oklch(van var(--fundering) bereken(l - 0,12) bereken(c * 0,64) h); }
Wanneer de fundamenten beginnen te bewegen
Tot nu toe is alles wat ik heb laten zien statisch. Zelfs als iemand een kleurenkiezer gebruikt om de kleur van de foundation te veranderen, gebeurt die verandering onmiddellijk. Maar geanimeerde graphics staan zelden stil: de aanwijzing zit in de naam. Dus als kleur deel uitmaakt van het systeem, is er geen reden waarom het ook niet kan animeren.
Om de basiskleur te animeren, moet ik deze eerst opsplitsen in de OKLCH-kanalen- lichtheid, chroma en tint. Maar er is een belangrijke extra stap: ik moet die waarden registreren als getypte aangepaste eigenschappen. Maar wat betekent dat?
Standaard weet een browser niet of een aangepaste CSS-eigenschapswaarde een kleur, lengte, getal of iets heel anders vertegenwoordigt. Dat betekent vaak dat ze tijdens animatie niet soepel kunnen worden geïnterpoleerd en van de ene waarde naar de volgende kunnen springen.
Door een aangepaste eigenschap te registreren, vertelt de browser welk type waarde deze vertegenwoordigt en hoe deze zich in de loop van de tijd moet gedragen. In dit geval wil ik dat de browser mijn kleurkanalen als getallen behandelt, zodat ze soepel kunnen worden geanimeerd.
@property --f-l {
syntaxis: "
@property --f-c {
syntaxis: "
@eigendom --f-h {
syntaxis: "
Eenmaal geregistreerd gedragen deze aangepaste eigenschappen zich als native CSS. De browser kan ze frame voor frame interpoleren. Vervolgens bouw ik de basiskleur opnieuw op uit die kanalen: --basis: oklch(var(--f-l) var(--f-c) var(--f-h));
Hierdoor wordt de basiskleur animatiebaar, net als elke andere numerieke waarde. Hier is een eenvoudige ‘ademende’ animatie die de lichtheid in de loop van de tijd zachtjes verandert: @keyframes ademen { 0%, 100% { --f-l: 0,36; } 50% { --f-l: 0,46; } }
.toon-titel { animatie: adem 10s gemak-in-uit oneindig; }
Omdat elke andere kleur in vullingen, verlopen en lijnen is afgeleid van --foundation, animeren ze allemaal samen en hoeft niets handmatig te worden bijgewerkt. Eén geanimeerde kleur, veel effecten Aan het begin van dit proces vroeg ik me af of relatieve kleurwaarden van CSS meer mogelijkheden zouden kunnen bieden en ze tegelijkertijd eenvoudiger te implementeren zouden maken. Ik heb onlangs een nieuwe goudmijnachtergrond toegevoegd aan de contactpagina van mijn website, en de eerste versie bevatte olielampen die gloeien en zwaaien.
Ik wilde onderzoeken hoe het animeren van CSS-relatieve kleuren het mijninterieur realistischer kon maken door het te kleuren met kleuren van de lampen. Ik wilde dat ze de wereld om hen heen zouden beïnvloeden, zoals echt licht dat doet. Dus in plaats van meerdere kleuren te animeren, heb ik een klein verlichtingssysteem gebouwd dat slechts één kleur animeert.
Mijn eerste taak was om een overlay-laag tussen de achtergrond en mijn lampen te plaatsen:
Ik heb de mix-blend-modus gebruikt: kleur omdat dat de onderliggende helderheid kleurt, terwijl de onderliggende helderheid behouden blijft. Omdat ik alleen wil dat de overlay zichtbaar is als animaties zijn ingeschakeld, heb ik de overlay opt-in gemaakt: .svg-mijn #overlay { weergave: geen; }
@media (geeft de voorkeur aan verminderde beweging: geen voorkeur) { .svg-mine[data-animations=on] #overlay { weergave: blok; dekking: 0,5; } }
De overlay was aanwezig, maar nog niet aangesloten op de lampen. Ik had een lichtbron nodig. Mijn lampen zijn eenvoudig en bevatten allemaal een cirkelelement dat ik met een filter heb vervaagd. Het filter produceert een zeer zachte vervaging over de hele cirkel.
In plaats van de overlay en de lampen afzonderlijk te animeren, animeer ik een enkel “vlam”-kleurtoken en leid daar al het andere uit af. Eerst registreer ik drie getypte aangepaste eigenschappen voor OKLCH-kanalen:
@property --fl-l {
syntaxis: "
Ik heb die kanalen geanimeerd, waarbij ik opzettelijk een paar frames naar oranje heb geduwd, zodat de flikkering duidelijk als vuurlicht leest:
@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-u: 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; } }
Vervolgens heb ik die animatie naar de SVG verplaatst, zodat de gedeelde variabelen beschikbaar zijn voor zowel de lampen als mijn overlay:
@media (geeft de voorkeur aan verminderde beweging: geen voorkeur) { .svg-mine[data-animaties=aan] { animatie: vlam 3,6s oneindig lineair; isolatie: isoleren;
/* Bouw een vlamkleur uit geanimeerde kanalen */ --vlam: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Lampkleur afgeleid van vlam */ --lampkern: oklch(van var(--vlam) calc(l + 0,05) calc(c * 0,70) h);
/* Overlay-tint afgeleid van dezelfde vlam */ --overlay-tint: oklch(van var(--vlam) bereken(l + 0,06) bereken(c * 0,65) bereken(h - 10)); } }
Ten slotte heb ik die afgeleide kleuren toegepast op de gloeiende lampen en de overlay die ze beïnvloeden: @media (geeft de voorkeur aan verminderde beweging: geen voorkeur) { .svg-mine[data-animations=on] #mine-lamp-1 > cirkel, .svg-mine[data-animations=on] #mine-lamp-2 > cirkel { vullen: var(--lamp-kern); }
.svg-mine[data-animations=on] #overlay { weergave: blok; fill: var(--overlay-tint); dekking: 0,5; } }
Wanneer de vlam naar oranje verschuift, worden de lampen warm en warmt het tafereel mee op. Wanneer de vlam afkoelt, komt alles samen. Het beste is dat er niets handmatig wordt geschreven. Als ik de basiskleur verander of de vlamanimatiebereiken aanpas, wordt het hele verlichtingssysteem tegelijkertijd bijgewerkt. Het eindresultaat kun je zien op mijn website. Hergebruik, hergebruik, opnieuw bezocht Die Hanna-Barbera-animators werden uit noodzaak gedwongen elementen opnieuw te gebruiken, maar ik hergebruik kleuren omdat het mijn werk consistenter en gemakkelijker te onderhouden maakt. Met relatieve CSS-kleurwaarden kan ik het volgende doen:
Definieer één enkele basiskleur, Beschrijf hoe andere kleuren zich ermee verhouden, Hergebruik die relaties overal, en Animeer het systeem door één waarde te wijzigen.
Relatieve kleur maakt thema’s niet alleen eenvoudiger. Het stimuleert een manier van denken waarbij kleur, net als beweging, opzettelijk is – en waarbij het veranderen van één waarde een hele scène kan transformeren zonder het werk eronder te herschrijven.
