Nuper in meo loco graphicas animatas refecit cum novo themate et coetui characterum pionentium, in usu copiarum artium, quas in hac serie communicavi. Paucae meae animationes apparentiam mutant cum aliquis cum illis vel diversis temporibus intercedit.
Colores in graphicis in summis paginis meis blogis a mane usque ad noctem cotidie mutantur. Tunc modus nivis est, qui frigidas colores et thema hyemale addit, comitas in strato operimento et modo mixtionis.
Dum in hoc laboro, incepi mirari utrum CSS valorum color relativus plus mihi potestatem dare posset, cum processum etiam simpliciorem redderet. Nota: In hoc paedagogo, in valoribus relativis coloratis et in spatium colorum OKLCH versarim pro illis graphics et animationibus. Si vis in relativum colorem profunde intendere, Ahmad Shaded eximium interactivum ducem creavit. De colorum spatiis, gamutibus, et OKLCH, de iis scripsit noster Geoff Grahamus.
Repetita elementorum usus clavis. Locorum locorum quoties fieri potest, cum zoomis et obductis adiuvandis novas scenas ex eadem arte fabricare. Necessitate nata est, sed etiam in serie potius quam in singulis scaenarum cogitationem cohortatus est. Difficultas Manually adaequationis Color Palettes Recta ad meam provocationem accedamus. In titulis Toon hoc placet — innixa anno 1959 Yogi Ursi episodii "Lullabye-Bye Bear" - et opus meum generatim, palettes paucis coloribus decumis circumscribuntur.
Manes et colores condo ex illis quae meum "fundamentum" voco colorem ad palette dilatandum, non addito plus colore.
In Sketch, in spatio colori HSL laboro, ut processus hic crescat aut decrescat levitatem pretii fundamenti mei coloris. Honeste arduum non est opus — sed eligens aliud fundamentum color requirit totum novum umbrarum et colorum statutum creare. Faciens quod manuale, etiam atque etiam, cito fit laboriosus.
HSL — H (hue), S (saturation), et L (levitatem) — spatium colorum commemoravi, sed solum unum ex pluribus modis colorem describere. RGB — R (rubrum), G (viridis), B (hyacinthinum) — verisimiliter notissimum est, saltem in forma Hex. Est etiam LAB — L (levis), A (viridi-rubrum), B (blue-flavi) — et recentior, sed nunc late LCH — L (levitatem), C (chroma), H (hue) — exemplar in forma OKLCH. Cum LCH — specie OKLCH in CSS — levitatem pretii mei fundamenta coloris accommodare possum.
Aut chroma eius mutare possum. LCH chroma et HSL satietatem tum describunt intensionem vel pinguedinem coloris, sed diversimode id faciunt. LCH latius me dat et praevidens mixtionem inter colores.
Colorum palette colorum qui eandem levitatem et chroma valores participant, mutare possum. In utroque HSL et LCH, spectrum color ruber incipit, per viridem et caeruleum movetur, et ad rubrum redit.
Cur OKLCH mutavit quomodo cogito de Colore Navigaris subsidium pro OKLCH colori spatio nunc late diffunditur, etsi instrumenta consiliorum inclusa Sketch — non comprehenderunt. Fortunate, id te prohibere OKLCH non debet. Navigantes feliciter Hex, HSL, LAB, RGB valores in OKLCH pro vobis convertent. CSS proprietas consuetudinis definire potes cum colore fundamento in quovis spatio, inter Hex: /* Foundation color */ --fundation: #5accd6;
Colores quivis ex eo derivati in OKLCH convertentur automatice; --fundation-light: oklch(e var(-fundation) […]; --fundation-mid: oklch(e var(-fundation) […]; --fundation-dark: oklch(e var(-fundation) [...];}
Relativum Colorem sicut A Design System Cogita de colore relativo dicens: "Accipe hunc colorem, vele illum, da mihi exitum." Dupliciter accommodare colorem: mutationes absolutae et mutationes proportionales. Similes in codice spectant, sed longe aliter se habent, cum colores fundamenta permutando incipis. Intelligentes differentiam illam esse quae colorem relativum in systema vertere potest. /* Foundation color */ --fundation: #5accd6;
Exempli gratia, levitas pretii fundamenti mei color est 0,7837, cum versio obscurior valorem 0.5837 habet. Ad differentiam computandum, valorem inferiorem a superiore subtraho, et proventum utens functione calc() applicabo; —-fundamentum-obscurum; oklch(e var(- fundationis) calc(l - 0.20) c h);
Ut color levius fiat, differentiam loco addo; ——fundatio-lucis; oklch(e var(- fundationis) calc(l + 0.10) c h);
Chromaadaptationes eundem processum sequuntur. Ad intensionem fundamenti mei coloris ab 0,1035 ad 0.0035 reducere, valorem unum ab altero subtrahe; oklch(e var(- fundationis) l calc(c - 0.10) h);
Ad coloratum palette creo, differentiam inter colorem valorem fundamenti mei (200) et novum colorem meum (CCLX) computamus; oklch(e var(- fundationis) l c calc(h + 60));
Illae calculi absolutae sunt. Cum certum subtraho, efficaciter dico, "hoc semper detrahe". Eadem ratio est cum addendo valores fixos; calc(c - 0.10) calc(c + 0.10)
aditus duros limites didici. Cum subtrahendo valores chromatis fixi fisus sum, colores versus griseos corruerunt quam primum fundamentum mutavi. Palette operantis unius coloris distabant in alium. Multiplicatio aliter se habet. Cum chroma multiplico, navigatorem dico: "Reduc huius coloris intensio proportione". Necessitudo colorum integra manet, etiam cum fundamentum mutatur; calc(c* 0.10)
My Move It, Scale It, Rotate It Rules
Movere levitatem (addere vel minuere); Scale chroma (multiplicate); Rotate hue (gradus addendi vel subtrahendi).
Chroma ascendo quod intensionem mutationes in basi colori proportionales manere volo. Huo relationes sunt gyrationes, unde multiplicatio sensus nihil facit. Levitas est sensibilis et absoluta — multiplicata saepe eventus impares.
Ab uno colore Toti Theme Color relativus permittit ut colorem fundamentum definiam et quemlibet alium colorem quem necesse habeo generare — implet, ictus, gradientes terminationes, umbrae — inde. In illo puncto, color palette desinit esse et incipit esse ratio. SVG exempla tendunt ad reuse eosdem colores paucos per repletos, ictus et gradus. Color relativus permittit vos relationes illas semel definire et eas ubique reuse — multa similia animantium subiectorum palimpsesta ad novas scenas creandas.
Color fundamentum semel mutatur, et omnis color derivatus sponte sua efficit, sine ulla manu recalculando. Extra graphicos animatos, eodem accessu colores definire potui pro statu elementorum interactivorum sicut globuli et nexus. Color fundamentum quo usus sum in "Lullabye-Bye Ursus" Toon Titulus est cyan-aspiciens caeruleum. Color est clivus radialis inter fundamentum meum et versionem obscuriorem.
Ut versiones alternas cum omnino diversis modis creandi, tantum opus est ut fundamentum coloris mutent; --fundation: #5accd6; --grad-end: var. --grad-initium: oklch(e var(-fundamentum) calc(l - 0.2357) calc(c * 0.833) h);
Ad ligaturas illas consuetudines possessiones meas SVG gradientes sine valoribus coloratis duplicatis, substitui valores duros-coded-colores cum stylis inlineis:
Deinde opus est ut meus Toon Textus semper opponat cum quocunque colore eligo. A 180deg hue gyratio colorem additivum efficit certe popsinum — sed moleste volvebatur; .text-lucis { imple: oklch (e var(- fundationis) l c calc(h + 180)); }
Subcinctus a 90° vividum colorem secun- dum efficit quin plene compleatur; .text-lucis { imple: oklch (e var(- fundationis) l c calc(h - 90)); }
Mea recreatio de Quick Draw McGraw 1959 Toon Title "El Kabong" iisdem technicis utitur sed palette magis varia. Exempli gratia, est alius gradiens radialis inter colorem fundamentum et umbram obscuriorem.
Aedificium et arbor in curriculo simpliciter sunt diversae umbrae eiusdem fundamenti coloris. Ad ea viarum opus duo additi colores implent; .bg-medium { imple: oklch (e var(- fundationis) calc(l - 0.04) calc(c * 0.91) h); }
.bg-dark { imple: oklch (e var(- fundationis) calc(l - 0.12) calc(c * 0.64) h); }
Cum fundamenta Satus movere Hactenus omnia quae ostendi static sunt. Etiam cum quis color utitur ad colorem mutandum fundamentum coloris, hoc statim fit mutatio. Sed raro stant animata graphics — sensus in nomine est. Si color est pars systematis, nulla ratio etiam animare non potest. Colorem fundamentum animare, primum necesse est eam in canales suos OKLCH dividere— levitatem, chroma, colorem. Sed magni momenti est extra gradum: necesse est bona illa uti proprietatibus typicis consuetudinum subcriptio. Sed quid est hoc? Ex defectu, navigatrum non scit an valorem proprietatis CSS consuetudinis colorem, longitudinem, numerum vel aliquid aliud ex toto repraesentat. Saepe media in animatione leniter interpolari non possunt, et ab uno ad alterum valorem saliunt. Consuetudo proprietas adnotans narrat pasco rationem pretii quam significat et quomodo se gerere debet per tempus. In hoc casu, navigatrum volo tractare vias meas colorum sicut numeros, ut possint aequaliter animari. @-f-l{. syntaxin: "numerus>"; hereditat: verum; initiali-value: 0.40; }
@-f-c{ syntaxin: "numerus>"; hereditat: verum; initialis-value: 0.11; }
@-f-h {. syntaxin: "numerus>"; hereditat: verum; initial-value: 305; }
Postquam relatus est, hae consuetudines possessiones quasi indigenas CSS. Navigabulum retexere potest. Ego igitur colorem fundamenti ab illis canalibus aedifico; --fundation: oklch(var(--f-l) var(--f-c) var(--f-h));
Inde color fundamenti factus est animabilis, sicut quaelibet alia valor numericus. Simplex animatio "spiritus" hic est quae per tempus levitatem leniter transfert: @keyframes respirare { 0%, 100% { --f-l: 0.36; } 50% { --f-l: 0.46; } }
.toon-title { animation: respira 10s otium in infinitum; }
Quia omnis alius color in repletis, gradientibus et ictibus a fundamento derivatur, omnia simul animata sunt, nihilque manually renovandum est. Unus color animatus, effectus multi In initio huius processus miratus sum utrum CSS valores relativi colori plura possibilitates offerre possent, cum etiam simpliciores ad efficiendum eas efficerent. Nuper novum curriculum aureum addidi in pagina notorum website meo, et prima iteratio inclusa lampadibus oleis, quae rutilant et iactant.
Volui explorare quomodo colores relativos animantes CSS possint meum interiorem veriorem reddere, tinctis coloribus e lampadibus. Eos circum afficere volui, via vera lux. Itaque, quam plures colores animans, parvam ratiocinandi rationem aedificavi quae unum colorem solum animat.
Primum mihi negotium fuit stratum deauratum inter curriculum et lucernas;
Mixtura-modus usus sum: color, quia ille quid sub eo tinguit, luminance subjecta servans. Tantum volo ut visibilis vestis cum animationes in se convertantur, ego operimentum feci in opt-in; .svg-meum #overlay { display: none; }
@media (mavult-reduci-motum: non-praeferre) { .svg-mine[data-animations=on] #overlay { display: block; opacitas: 0.5; } }
Vestis loco erat, nondum lucernis connexa. Mihi opus est fonte lucis. Lampades meae simplices sunt, et unumquodque elementum continet circuli quod spargam suffusam. Colum valde mollissimum LABES per totum circulum producit.
Loco ut singulas lucernis deaurabis animans, unum flammae coloris indicium animans et omnia ex eo sumo. Primum, tria genera proprietatum pro canalibus OKLCH consuetudinis subcriptio: @-fl-l {. syntaxin: "numerus>"; hereditat: verum; initialis-pretii: 0.86; } @-fl-c{ syntaxin: "numerus>"; hereditat: verum; initialis-value: 0.12; } @-fl-h {. syntaxin: "numerus>"; hereditat: verum; initiali-value: 95; }
Illos canales animavi, paucas tabulas versus aurantiacas de industria impellendo sic micantes ut lumen luculenter legit;
flamma {@keyframes 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; } }
Tunc posui illam animationem ad SVG, ut variabiles communes praesto sint tam lucernis quam meis operimentis:
@media (mavult-reduci-motum: non-praeferre) { .svg-mine[data-animations=on] { animatio: flamma 3.6s infinita linearis; solitudo: isolate;
/ * Color flammae aedifica ex canalibus animatis */ --flame: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/ * Lucerna color e flamma */ --lamp-core: oklch(e var(--flamm) calc(l + 0.05) calc(c * 0.70) h);
/* Deauratio coloris ex eadem flamma derivata. --overlay-tint: oklch(e var(-flama) calc(l + 0.06) calc(c*0.65) calc(h - 10)); } }
Denique derivatos colores apposui lampadibus ardentibus et operies afficiunt; @media (mavult-reduci-motum: non-praeferre) { .svg-mine[data-animations=on] #me-lucerna-1 > circulus, .svg-mine[data-animations=on] #me-lucerna-2 > circulus { fill: var(-lamp-core); }
.svg-mine[data-animations=on] #overlay { display: block; fill: var(--o-a-tint); opacitas: 0.5; } }
Cum flamma ad aureum recurrit, lampades calefaciunt, scena cum illis calefacit. Cum refrigerat flamma, coit omnia simul. Optima pars est, qua nihil est manuale scriptum. Si fundamentum colorem muto vel flammam animationem vel tweak vagatur, totum systema accendendi simul renovat. Extremum exitum in mea website videre potes. Reuse, Repurpose, Revisited Illi animatores Hanna-Barbera elementa ex necessitate rependere coacti sunt, sed colores reuse quia opus meum magis constantius ac facilius conservare facit. CSS valor relativus color me patitur:
Fundamentum unum definire colorem; Quomodo alii colores referunt; Reuse relationes illae ubique, et Animae ratio mutando unum valorem.
Color relativus non modo faciliorem reddit. Modum cogitandi fovet ubi color, sicut motus, intentionalis est — et ubi mutabilis unus valor totam scaenam sine rescripto opere subter se transformare potest.
