Dènyèman, mwen te rafrechi grafik anime yo sou sit entènèt mwen an ak yon nouvo tèm ak yon gwoup pèsonaj pyonye, mete an pratik anpil teknik mwen pataje nan seri sa a. Kèk nan animasyon mwen yo chanje aparans lè yon moun reyaji avèk yo oswa nan diferan moman nan jounen an.
Koulè yo nan grafik ki anlè paj blog mwen an chanje soti nan maten jiska swa chak jou. Lè sa a, gen mòd nèj la, ki ajoute koulè frwa ak yon tèm ivè, koutwazi nan yon kouch kouvri ak yon mòd melanje.
Pandan m ap travay sou sa a, mwen te kòmanse mande si wi ou non valè relatif koulè CSS ta ka ban m plis kontwòl pandan w ap senplifye pwosesis la tou. Remak: Nan leson patikilye sa a, mwen pral konsantre sou valè relatif koulè ak espas koulè OKLCH pou grafik ak animasyon tèm. Si ou vle plonje byen fon nan koulè relatif, Ahmad Shadeed te kreye yon gid entèaktif sipèb. Kòm pou espas koulè, gam, ak OKLCH, pwòp pa nou Geoff Graham te ekri sou yo.
Repete itilizasyon eleman yo te kle. Orijin yo te reyitilize chak fwa sa posib, ak zoom ak superpositions ede konstwi nouvo sèn nan menm travay atistik la. Li te fèt nan nesesite, men li te ankouraje tou panse an tèm de seri olye ke sèn endividyèl. Pwoblèm nan ak manyèlman mete ajou palèt koulè Ann ale tou dwat nan defi mwen an. Nan Toon Titles tankou sa a - ki baze sou Episode 1959 Yogi Bear Show "Lullabye-Bye Bear" - ak travay mwen an jeneral, palèt yo limite a yon kèk koulè chwazi.
Mwen kreye tout koulè ak koulè nan sa mwen rele koulè "fondasyon" mwen an pou elaji palèt la san yo pa ajoute plis koulè.
Nan Sketch, mwen travay nan espas koulè HSL la, kidonk pwosesis sa a enplike nan ogmante oswa diminye valè limyè a nan koulè fondasyon mwen an. Onètman, li pa yon travay ki difisil - men chwazi yon koulè fondasyon diferan mande pou kreye yon seri tout nouvo nan tout koulè ak tente. Fè sa manyèlman, ankò e ankò, byen vit vin travayè.
Mwen mansyone HSL a - H (teinte), S (saturasyon), ak L (lèjèr) - espas koulè, men sa a se jis youn nan plizyè fason yo dekri koulè. RGB - R (wouj), G (vèt), B (ble) - se pwobableman pi abitye a, omwen nan fòm Hex li yo. Genyen tou LAB - L (légèreté), A (vèt-wouj), B (ble-jòn) - ak pi nouvo a, men kounye a lajman sipòte LCH - L (légèreté), C (chroma), H (tèt) - modèl nan fòm OKLCH li yo. Avèk LCH — espesyalman OKLCH nan CSS — mwen ka ajiste valè légèreté koulè fondasyon mwen an.
Oswa mwen ka chanje chroma li yo. LCH chroma ak HSL saturation tou de dekri entansite oswa richès yon koulè, men yo fè sa nan diferan fason. LCH ban mwen yon seri pi laj ak pi previzib melanje ant koulè.
Mwen kapab tou chanje teinte a pou kreye yon palèt koulè ki pataje menm limyè ak valè chroma. Nan tou de HSL ak LCH, spectre koulè a kòmanse nan wouj, deplase nan vèt ak ble, epi retounen nan wouj.
Poukisa OKLCH chanje fason mwen panse sou koulè Sipò navigatè pou espas koulè OKLCH kounye a gaye toupatou, menm si zouti konsepsyon - ki gen ladan Sketch - pa te kenbe. Erezman, sa pa ta dwe anpeche w itilize OKLCH. Navigatè yo pral san pwoblèm mwen tap konvèti valè Hex, HSL, LAB, ak RGB nan OKLCH pou ou. Ou ka defini yon pwopriyete koutim CSS ak yon koulè fondasyon nan nenpòt espas, ki gen ladan Hex: /* Koulè fondasyon */ --fondasyon: #5accd6;
Nenpòt koulè ki sòti nan li pral konvèti nan OKLCH otomatikman: --fondasyon-limyè: oklch (soti nan var (--fondasyon) [...]; } --fondasyon-mid: oklch (soti nan var (--fondasyon) [...]; } --fondasyon-nwa: oklch (soti nan var (--fondasyon) [...]; }
Koulè relatif kòm yon sistèm konsepsyon Panse a koulè relatif kòm di: "Pran koulè sa a, ajiste li, epi ban mwen rezilta a." Gen de fason pou ajiste yon koulè: chanjman absoli ak chanjman pwopòsyonèl. Yo sanble menm jan an nan kòd, men yo konpòte yo yon fason diferan yon fwa ou kòmanse echanje koulè fondasyon. Konprann diferans sa a se sa ki ka vire lè l sèvi avèk koulè relatif nan yon sistèm. /* Koulè fondasyon */ --fondasyon: #5accd6;
Pou egzanp, valè légèreté nan koulè fondasyon mwen an se 0.7837, pandan y ap yon vèsyon ki pi fonse gen yon valè 0.5837. Pou kalkile diferans lan, mwen soustraksyon valè ki pi ba a nan valè ki pi wo a epi aplike rezilta a lè l sèvi avèk yon fonksyon calc(): --fondasyon-nwa: oklch (soti nan var (--fondasyon) calc(l - 0.20) c h);
Pou reyalize yon koulè pi lejè, mwen ajoute diferans lan pito: --fondasyon-limyè: oklch (soti nan var (--fondasyon) calc(l + 0.10) c h);
Chromaajisteman swiv menm pwosesis la. Pou diminye entansite koulè fondasyon mwen an soti nan 0.1035 a 0.0035, mwen soustraksyon yon valè nan lòt la: oklch (soti nan var (--fondasyon) l kals (c - 0.10) h);
Pou kreye yon palèt koulè, mwen kalkile diferans ki genyen ant valè koulè fondasyon mwen an (200) ak nouvo koulè mwen an (260): oklch (soti nan var (--fondasyon) lc kals(h + 60));
Kalkil sa yo absoli. Lè mwen soustraksyon yon kantite lajan fiks, mwen efektivman di, "Toujou soustraksyon sa a anpil." Menm bagay la tou aplike lè ajoute valè fiks: kals (c - 0.10) kals (c + 0.10)
Mwen te aprann limit yo nan apwòch sa a fason difisil. Lè mwen te konte sou soustraksyon valè chroma fiks yo, koulè tonbe nan direksyon gri le pli vit ke mwen chanje fondasyon an. Yon palèt ki te travay pou yon koulè tonbe apa pou yon lòt. Miltiplikasyon an konpòte yon fason diferan. Lè mwen miltipliye chroma, mwen di navigatè a: "Diminye entansite koulè sa a pa yon pwopòsyon." Relasyon ki genyen ant koulè rete entak, menm lè fondasyon an chanje: kals (c * 0.10)
Mwen Deplase Li, Echèl Li, Wotasyon Li Règ
Deplase légèreté (ajoute oswa soustraksyon), Echèl chroma (miltipliye), Thorne teinte (ajoute oswa soustraksyon degre).
Mwen echèl chroma paske mwen vle chanjman entansite yo rete pwopòsyonèl ak koulè debaz la. Relasyon Hue yo wotasyon, kidonk miltipliye Hue pa gen okenn sans. Lejète se pèsepsyon ak absoli - miltipliye li souvan pwodui rezilta enpè.
Soti nan yon koulè rive nan yon tèm antye Koulè relatif pèmèt mwen defini yon koulè fondasyon ak jenere tout lòt koulè mwen bezwen - ranpli, konjesyon serebral, arè gradyan, lonbraj - soti nan li. Nan pwen sa a, koulè sispann yon palèt epi li kòmanse yon sistèm. Ilistrasyon SVG yo gen tandans reitilize menm kèk koulè yo atravè ranpli, kou, ak gradyan. Koulè relatif pèmèt ou defini relasyon sa yo yon fwa epi reitilize yo toupatou - menm jan ak animatè yo reitilize orijin yo pou kreye nouvo sèn.
Chanje koulè fondasyon an yon fwa, epi chak koulè ki sòti yo mete ajou otomatikman, san yo pa rekalkile anyen alamen. Deyò grafik anime, mwen te kapab itilize menm apwòch sa a pou defini koulè pou eta eleman entèaktif tankou bouton ak lyen. Koulè fondasyon mwen te itilize nan Tit Toon "Lullabye-Bye Bear" mwen an se yon ble ki sanble ak cyan. Fondasyon an se yon gradyan radial ant fondasyon mwen an ak yon vèsyon pi fonse.
Pou kreye vèsyon altènatif ak atitid totalman diferan, mwen sèlman bezwen chanje koulè fondasyon an: --fondasyon: #5accd6; --grad-end: var(--fondasyon); --grad-start: oklch (soti nan var (--fondasyon) calc(l - 0.2357) calc(c * 0.833) h);
Pou mare pwopriyete koutim sa yo ak gradyan SVG mwen an san yo pa kopi valè koulè, mwen ranplase valè stop-koulè ki kode difisil ak estil inline:
Apre sa, mwen te bezwen asire ke Tèks Toon mwen an toujou diferansye ak kèlkeswa koulè fondasyon mwen chwazi. Yon wotasyon Hue 180deg pwodui yon koulè konplemantè ki sètènman parèt - men li ka vibre alèz: .text-light { ranpli: oklch (soti nan var (--fondasyon) lc kals(h + 180)); }
Yon chanjman 90° pwodui yon koulè segondè vivan san yo pa konplètman konplemantè: .text-light { ranpli: oklch (soti nan var (--fondasyon) lc calc(h - 90)); }
Rekreyasyon mwen an nan Quick Draw McGraw a 1959 Toon Tit "El Kabong" itilize menm teknik yo men ak yon palèt ki pi varye. Pou egzanp, gen yon lòt gradyan radial ant koulè fondasyon an ak yon lonbraj ki pi fonse.
Bilding lan ak pye bwa nan background nan se tou senpleman diferan tout koulè nan menm koulè fondasyon an. Pou chemen sa yo, mwen te bezwen de koulè ranpli adisyonèl: .bg-mid { ranpli: oklch (soti nan var (--fondasyon) calc(l - 0.04) calc(c * 0.91) h); }
.bg-nwa { ranpli: oklch (soti nan var (--fondasyon) calc(l - 0.12) calc(c * 0.64) h); }
Lè Fondasyon yo kòmanse deplase
Jiskaprezan, tout sa mwen te montre yo te estatik. Menm lè yon moun sèvi ak yon seleksyon koulè pou chanje koulè fondasyon an, chanjman sa a rive imedyatman. Men, grafik anime raman kanpe toujou - siy la se nan non an. Se konsa, si koulè se yon pati nan sistèm nan, pa gen okenn rezon ki fè li pa ka anime, tou.
Pou anime koulè fondasyon an, mwen premye bezwen divize li nan chanèl OKLCH li yo- légèreté, chroma, ak ton. Men, gen yon etap siplemantè enpòtan: mwen bezwen anrejistre valè sa yo kòm pwopriyete tape koutim. Men, ki sa sa vle di?
Pa default, yon navigatè pa konnen si yon valè pwopriyete koutim CSS reprezante yon koulè, longè, nimewo, oswa yon lòt bagay antyèman. Sa vle di souvan yo pa ka entèpole san pwoblèm pandan animasyon, ak sote soti nan yon valè nan pwochen an.
Anrejistre yon pwopriyete koutim di navigatè a ki kalite valè li reprezante ak ki jan li ta dwe konpòte sou tan. Nan ka sa a, mwen vle navigatè a trete chanèl koulè mwen yo kòm nimewo pou yo ka anime san pwoblèm.
@propriété --f-l {
sentaks: "
@propriété --f-c {
sentaks: "
@propriété --f-h {
sentaks: "
Yon fwa anrejistre, pwopriyete koutim sa yo konpòte yo tankou CSS natif natal. Navigatè a ka entèpole yo ankadreman-pa-ankadreman. Lè sa a, mwen rebati koulè fondasyon an nan chanèl sa yo: --fondasyon: oklch(var(--f-l) var(--f-c) var(--f-h));
Sa fè koulè fondasyon an vin animatab, menm jan ak nenpòt lòt valè nimerik. Isit la se yon senp animasyon "respire" ki dousman chanje légèreté sou tan: @keyframes respire { 0%, 100% { --f-l: 0.36; } 50% { --f-l: 0.46; } }
.toon-title { animasyon: respire 10s fasilite-an-soti enfini; }
Paske tout lòt koulè nan ranpli, gradyan, ak kou yo sòti nan --fondasyon, yo tout anime ansanm, epi pa gen anyen yo bezwen mete ajou manyèlman. Yon koulè anime, anpil efè Nan kòmansman pwosesis sa a, mwen te mande si CSS valè relatif koulè yo ta ka ofri plis posiblite pandan y ap fè yo pi senp pou aplike. Dènyèman mwen te ajoute yon nouvo background min lò nan paj kontak sit entènèt mwen an, ak premye iterasyon an enkli lanp lwil oliv ki klere ak balanse.
Mwen te vle eksplore ki jan anime koulè relatif CSS te kapab fè enteryè m 'yo pi reyalis pa tinting li ak koulè nan lanp yo. Mwen te vle yo afekte mond lan bò kote yo, fason limyè reyèl la fè. Se konsa, olye ke anime plizyè koulè, mwen bati yon ti sistèm ekleraj ki anime yon sèl koulè.
Premye travay mwen se te mete yon kouch kouvri ant background nan ak lanp mwen an:
Mwen te itilize melanj-melanj-mòd: koulè paske sa tente sa ki anba li pandan y ap konsève luminans ki kache a. Kòm mwen vle kouvri a sèlman vizib lè animasyon yo aktive, mwen te fè sipèpoze a patisipe: .svg-mine #overlay { ekspozisyon: okenn; }
@medya (preferans-redwi-mouvman: pa gen preferans) { .svg-mine[data-animations=on] #overlay { ekspozisyon: blòk; Opakite: 0.5; } }
Kouvèti a te an plas, men li poko konekte ak lanp yo. Mwen te bezwen yon sous limyè. Lanp mwen yo senp, epi yo chak gen yon eleman sèk ke mwen twoub ak yon filtè. Filtè a pwodui yon flou trè mou sou tout sèk la.
Olye pou yo anime kouvri a ak lanp separeman, mwen anime yon sèl "flanm dife" siy koulè ak dériver tout lòt bagay soti nan sa. Premyèman, mwen anrejistre twa pwopriyete tape koutim pou chanèl OKLCH:
@property --fl-l {
sentaks: "
Mwen anime chanèl sa yo, fè espre pouse kèk ankadreman nan direksyon zoranj pou tranbleman an li klèman tankou dife:
@keyframes flanm dife { 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; } }
Lè sa a, mwen kadre animasyon sa a nan SVG la, kidonk varyab yo pataje yo disponib nan tou de lanp yo ak kouvri mwen an:
@medya (preferans-redwi-mouvman: pa gen preferans) { .svg-mine[data-animations=on] { animasyon: flanm dife 3.6s enfini lineyè; izolasyon: izole;
/* Bati yon koulè flanm dife nan chanèl anime */ --flame: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Koulè lanp ki sòti nan flanm dife */ --lanp-nwayo: oklch (soti nan var (--flame) calc (l + 0.05) calc (c * 0.70) h);
/* Kouche koulè ki sòti nan menm flanm dife a */ --overlay-tint: oklch (soti nan var (--flame) calc(l + 0.06) calc(c * 0.65) calc(h - 10)); } }
Finalman, mwen aplike koulè ki sòti sa yo nan lanp lumineux yo ak kouvri yo afekte: @medya (preferans-redwi-mouvman: pa gen preferans) { .svg-mine[data-animations=on] #mine-lamp-1 > sèk, .svg-mine[data-animations=on] #mine-lamp-2 > sèk { ranpli: var(--lanp-core); }
.svg-mine[data-animations=on] #overlay { ekspozisyon: blòk; ranpli: var (--overlay-tint); Opakite: 0.5; } }
Lè flanm dife a deplase nan direksyon zoranj, lanp yo chofe, epi sèn nan chofe avèk yo. Lè flanm dife a refwadi, tout bagay rezoud ansanm. Pati ki pi bon se ke pa gen anyen ki ekri manyèlman. Si mwen chanje koulè fondasyon an oswa ajiste seri animasyon flanm dife a, tout sistèm ekleraj la mete ajou ansanm. Ou ka wè rezilta final la sou sit entènèt mwen an. Reutilize, Repurpose, Revisite Animatè Hanna-Barbera sa yo te fòse yo reutilize eleman yo pa nesesite, men mwen reitilize koulè paske li fè travay mwen pi konsistan ak pi fasil pou kenbe. Valè koulè relatif CSS pèmèt mwen:
Defini yon sèl koulè fondasyon, Dekri ki jan lòt koulè gen rapò ak li, Reitilize relasyon sa yo toupatou, epi Anime sistèm nan pa chanje yon valè.
Koulè relatif pa jis fè tèm pi fasil. Li ankouraje yon fason pou panse kote koulè, tankou mouvman, se entansyonèl - ak kote chanje yon valè ka transfòme yon sèn antye san yo pa reekri travay la anba li.
