Bag-o lang nako nga gi-refresh ang mga animated nga mga graphic sa akong website nga adunay bag-ong tema ug usa ka grupo sa mga karakter nga nagpayunir, nga nagpraktis sa daghang mga teknik nga akong gipaambit sa kini nga serye. Pipila sa akong mga animation nag-usab sa hitsura kung adunay makig-uban kanila o sa lainlaing oras sa adlaw.
Ang mga kolor sa graphic sa ibabaw sa akong mga panid sa blog nagbag-o gikan sa buntag hangtod sa gabii matag adlaw. Dayon, anaa ang snow mode, nga nagdugang sa bugnaw nga mga kolor ug usa ka wintery nga tema, sa maayong kabubut-on sa usa ka overlay layer ug usa ka blending mode.
Samtang nagtrabaho niini, nagsugod ako sa paghunahuna kung ang mga kantidad sa kolor nga paryente sa CSS makahatag kanako og dugang nga kontrol samtang gipasimple usab ang proseso. Mubo nga sulat: Sa kini nga panudlo, akong ipunting ang mga relatibong kantidad sa kolor ug ang kolor sa OKLCH nga luna alang sa mga graphic ug mga animation sa tema. Kung gusto nimo nga mosalom sa lawom nga kolor, si Ahmad Shadeed naghimo usa ka maayo nga interactive nga giya. Mahitungod sa mga kolor nga luna, gamut, ug OKLCH, ang among kaugalingong Geoff Graham misulat bahin niini.
Ang balikbalik nga paggamit sa mga elemento mao ang yawe. Ang mga background gigamit pag-usab kung mahimo, nga adunay mga zoom ug mga overlay nga makatabang sa paghimo og bag-ong mga eksena gikan sa parehas nga artwork. Natawo kini sa panginahanglan, apan nagdasig usab kini sa paghunahuna sa mga termino sa serye kaysa sa indibidwal nga mga eksena. Ang problema sa Manwal nga Pag-update sa mga Palette sa Kolor Diretso ta sa akong hagit. Sa Toon Titles nga sama niini - base sa 1959 Yogi Bear Show episode nga "Lullabye-Bye Bear" - ug ang akong trabaho sa kasagaran, ang mga palette limitado sa pipila ka pinili nga mga kolor.
Naghimo ako og mga shade ug tints gikan sa akong gitawag nga "foundation" nga kolor aron mapalapad ang palette nga wala’y dugang nga mga kolor.
Sa Sketch, nagtrabaho ko sa HSL color space, mao nga kini nga proseso naglakip sa pagdugang o pagkunhod sa lightness value sa akong foundation color. Sa tinuud, dili kini usa ka lisud nga buluhaton - apan ang pagpili sa usa ka lahi nga kolor sa pundasyon nanginahanglan paghimo usa ka bag-ong hugpong sa mga shade ug tints. Ang pagbuhat niana nga mano-mano, balik-balik, dali nga mahimong hago.
Gihisgotan nako ang HSL — H (hue), S (saturation), ug L (lightness) — color space, apan usa lang kana sa daghang paagi sa paghulagway sa kolor. RGB — R (pula), G (berde), B (asul) — mao tingali ang labing pamilyar, labing menos sa iyang Hex nga porma. Anaa usab ang LAB - L (lightness), A (green-red), B (blue-yellow) - ug ang mas bag-o, apan karon kaylap nga gisuportahan LCH - L (lightness), C (chroma), H (hue) - nga modelo sa OKLCH nga porma niini. Uban sa LCH — partikular nga OKLCH sa CSS — ma-adjust nako ang kagaan nga kantidad sa kolor sa akong pundasyon.
O mahimo nako nga usbon ang chroma niini. Ang LCH chroma ug HSL saturation parehong naghulagway sa intensity o kabuhong sa usa ka kolor, apan ilang gibuhat kini sa lain-laing mga paagi. Ang LCH naghatag kanako og mas lapad nga hanay ug mas matag-an nga pagsagol tali sa mga kolor.
Mahimo usab nako nga usbon ang kolor aron makahimo usa ka paleta sa mga kolor nga parehas ang kahayag ug mga kantidad sa chroma. Sa HSL ug LCH, ang kolor nga spectrum magsugod sa pula, moagi sa berde ug asul, ug mobalik sa pula.
Nganong Gibag-o sa OKLCH ang Akong Paghunahuna Bahin sa Kolor Ang suporta sa browser alang sa OKLCH color space kaylap na karon, bisan kung ang mga gamit sa pagdesinyo - lakip ang Sketch - wala pa makuha. Maayo na lang, dili kana makapugong kanimo sa paggamit sa OKLCH. Malipayon nga i-convert sa mga browser ang Hex, HSL, LAB, ug RGB nga mga kantidad ngadto sa OKLCH alang kanimo. Mahimo nimong ipasabut ang usa ka kostumbre sa CSS nga adunay kolor nga pundasyon sa bisan unsang wanang, lakip ang Hex: /* Kolor sa pundasyon */ --pundasyon: #5accd6;
Ang bisan unsang mga kolor nga makuha gikan niini awtomatiko nga makombertir sa OKLCH: --foundation-light: oklch(gikan sa var(--foundation) [...]; } --foundation-mid: oklch(gikan sa var(--foundation) [...]; } --foundation-dark: oklch(gikan sa var(--foundation) [...]; }
Relatibong Kolor Ingon Usa ka Sistema sa Disenyo Hunahunaa ang relatibong kolor nga nag-ingon: "Kuhaa kini nga kolor, i-tweak kini, dayon ihatag kanako ang resulta." Adunay duha ka paagi sa pag-adjust sa usa ka kolor: hingpit nga pagbag-o ug proporsyonal nga pagbag-o. Parehas sila tan-awon sa code, apan lahi kaayo ang pamatasan sa higayon nga magsugod ka sa pag-ilis sa mga kolor sa pundasyon. Ang pagsabut sa kana nga kalainan mao ang mahimo nga himuon ang paggamit sa relatibong kolor sa usa ka sistema. /* Kolor sa pundasyon */ --pundasyon: #5accd6;
Pananglitan, ang kagaan nga kantidad sa akong kolor sa pundasyon mao ang 0.7837, samtang ang mas itom nga bersyon adunay kantidad nga 0.5837. Aron makalkulo ang kalainan, akong kuhaon ang ubos nga bili gikan sa mas taas ug gamiton ang resulta gamit ang calc() function: --foundation-dark: oklch(gikan sa var(--pundasyon) calc(l - 0.20) c h);
Aron makab-ot ang mas gaan nga kolor, akong idugang ang kalainan: --pundasyon-kahayag: oklch(gikan sa var(--pundasyon) calc(l + 0.10) c h);
ChromaAng mga pagbag-o nagsunod sa parehas nga proseso. Aron makunhuran ang intensity sa kolor sa akong pundasyon gikan sa 0.1035 ngadto sa 0.0035, akong ipaubos ang usa ka bili gikan sa lain: oklch(gikan sa var(--pundasyon) l calc(c - 0.10) h);
Aron makahimo og palette sa mga kolor, akong kuwentahon ang kalainan tali sa hue value sa akong foundation color (200) ug sa akong bag-ong hue (260): oklch(gikan sa var(--pundasyon) l c calc(h + 60));
Ang mga kalkulasyon hingpit. Kung mag-ubos ko og usa ka piho nga kantidad, epektibo kong moingon, "Kanunay nga ibawas kini." Ang sama nga magamit sa pagdugang sa mga piho nga kantidad: calc(c - 0.10) calc(c + 0.10)
Akong nakat-unan ang mga limitasyon niini nga paagi sa lisud nga paagi. Sa diha nga ako misalig sa pagkubkob sa mga fixed chroma values, ang mga kolor nahugno ngadto sa gray sa diha nga akong giusab ang pundasyon. Ang usa ka palette nga nagtrabaho alang sa usa ka kolor nahulog sa lain. Lainlain ang paggawi sa multiplikasyon. Kung gipadaghan nako ang chroma, gisultihan nako ang browser: "Bawasan ang intensity sa kolor sa usa ka proporsyon." Ang relasyon tali sa mga kolor nagpabilin nga wala, bisan kung ang pundasyon nagbag-o: calc(c * 0.10)
Ang Akong Ibalhin Kini, I-scale Kini, I-rotate Kini ang Nagmando
Ibalhin ang pagkagaan (idugang o ibawas), Scale chroma (multiply), I-rotate ang hue (idugang o ibawas ang mga degree).
Gi-scale nako ang chroma tungod kay gusto nako ang mga pagbag-o sa intensity nga magpabilin nga proporsyonal sa base nga kolor. Ang mga relasyon sa hue kay rotational, mao nga ang pagpadaghan sa hue walay kahulogan. Ang kahayag kay perceptual ug hingpit — ang pagpadaghan niini kasagarang makahatag ug katingad-an nga mga resulta.
Gikan sa Usa ka Kolor Ngadto sa Usa ka Tibuok Tema Ang relatibong kolor nagtugot kanako sa paghubit sa kolor sa pundasyon ug pagmugna sa matag lain nga kolor nga akong gikinahanglan - mga pagpuno, mga hampak, gradient stops, mga anino - gikan niini. Nianang puntoha, ang kolor mihunong nga usa ka paleta ug nagsugod nga usa ka sistema. Ang mga ilustrasyon sa SVG lagmit nga mogamit pag-usab sa parehas nga pipila ka mga kolor sa mga fill, stroke, ug gradients. Ang relatibong kolor nagtugot kanimo sa paghubit sa maong mga relasyon sa makausa ug gamiton kini pag-usab bisan asa — sama sa mga animator nga gigamit pag-usab ang mga background sa paghimo og bag-ong mga talan-awon.
Usba ang kolor sa pundasyon kausa, ug ang matag nakuha nga kolor awtomatiko nga nag-update, nga wala’y pagkalkula pag-usab pinaagi sa kamot. Gawas sa mga animated nga mga graphic, magamit nako kini nga parehas nga pamaagi aron mahibal-an ang mga kolor alang sa estado sa mga interactive nga elemento sama sa mga buton ug mga link. Ang kolor sa pundasyon nga akong gigamit sa akong "Lullabye-Bye Bear" Toon Title kay usa ka cyan-looking blue. Ang background usa ka radial gradient tali sa akong pundasyon ug mas itom nga bersyon.
Aron makamugna ug alternatibong mga bersyon nga lainlain ang buot, kinahanglan lang nako nga usbon ang kolor sa pundasyon: --pundasyon: #5accd6; --grad-end: var(--foundation); --grad-start: oklch(gikan sa var(--foundation) calc(l - 0.2357) calc(c * 0.833) h);
Aron ihigot ang mga naandan nga kabtangan sa akong SVG gradient nga wala’y pagdoble nga mga kantidad sa kolor, gipulihan nako ang mga kantidad sa mga stop-color nga hard-coded nga adunay mga inline nga istilo:
Sunod, kinahanglan nako nga sigurohon nga ang akong Toon Text kanunay nga magkalahi sa bisan unsang kolor sa pundasyon nga akong pilion. Ang rotation sa 180deg nga hue nagpatunghag usa ka komplementaryong kolor nga siguradong mo-pop - apan mahimong dili komportable nga mag-vibrate: .text-light { pun-on: oklch(gikan sa var(--pundasyon) l c calc(h + 180)); }
Ang usa ka 90 ° nga pagbalhin nagpatunghag usa ka tin-aw nga sekondaryang kolor nga dili hingpit nga komplementaryo: .text-light { pun-on: oklch(gikan sa var(--pundasyon) l c calc(h - 90)); }
Ang akong paglingaw sa Quick Draw McGraw's 1959 Toon Title "El Kabong" naggamit sa parehas nga mga teknik apan adunay usa ka lainlain nga palette. Pananglitan, adunay lain nga radial gradient tali sa kolor sa pundasyon ug usa ka mas itom nga landong.
Ang bilding ug kahoy sa luyo kay lain-laing mga shade sa parehas nga kolor sa pundasyon. Alang sa mga agianan, kinahanglan nako ang duha ka dugang nga mga kolor sa pagpuno: .bg-mid { pun-on: oklch(gikan sa var(--pundasyon) calc(l - 0.04) calc(c * 0.91) h); }
.bg-dark { pun-on: oklch(gikan sa var(--pundasyon) calc(l - 0.12) calc(c * 0.64) h); }
Sa diha nga ang mga Pundasyon Nagsugod sa Paglihok
Sa pagkakaron, ang tanan nga akong gipakita static. Bisan kung adunay mogamit usa ka tigpili sa kolor aron usbon ang kolor sa pundasyon, kana nga pagbag-o mahitabo dayon. Apan ang mga animated nga graphic panagsa ra nga mohunong - ang timailhan naa sa ngalan. Mao nga, kung ang kolor bahin sa sistema, wala’y hinungdan nga dili usab kini ma-animate.
Aron ma-animate ang kolor sa pundasyon, kinahanglan nako nga bahinon kini sa mga channel sa OKLCH- kahayag, chroma, ug kolor. Apan adunay usa ka hinungdanon nga dugang nga lakang: Kinahanglan nako nga irehistro ang mga kantidad ingon gi-type nga kostumbre nga mga kabtangan. Apan unsay ipasabot niana?
Sa kasagaran, ang usa ka browser wala mahibal-an kung ang usa ka CSS custom property value nagrepresentar sa usa ka kolor, gitas-on, numero, o uban pa sa hingpit. Kana kasagaran nagpasabot nga dili sila mahimong interpolated nga hapsay sa panahon sa animation, ug molukso gikan sa usa ka bili ngadto sa sunod.
Ang pagrehistro sa usa ka kostumbre nga kabtangan nagsulti sa browser sa klase sa kantidad nga girepresentar niini ug kung giunsa kini molihok sa paglabay sa panahon. Sa kini nga kaso, gusto nako ang browser nga trataron ang akong mga channel sa kolor ingon mga numero aron kini mahimong hapsay nga ma-animate.
@property --f-l {
syntax: "
@property --f-c {
syntax: "
@property --f-h {
syntax: "
Kung narehistro na, kini nga naandan nga mga kabtangan molihok sama sa lumad nga CSS. Ang browser mahimong mag-interpolate kanila sa frame-by-frame. Gitukod nako pag-usab ang kolor sa pundasyon gikan sa mga kanal: --pundasyon: oklch(var(--f-l) var(--f-c) var(--f-h));
Kini naghimo sa kolor sa pundasyon nga mahimong animatable, sama sa bisan unsang ubang numeric value. Ania ang usa ka yano nga "pagginhawa" nga animation nga hinay nga nagbalhin sa kahayag sa paglabay sa panahon: @keyframes ginhawa { 0%, 100% { --f-l: 0.36; } 50% { --f-l: 0.46; } }
.toon-title { animation: pagginhawa 10s kasayon-in-out walay katapusan; }
Tungod kay ang matag uban nga mga kolor sa mga fill, gradients, ug mga stroke nakuha gikan sa --foundation, silang tanan nag-animate, ug walay kinahanglan nga i-update sa mano-mano. Usa ka Animated nga Kolor, Daghang Epekto Sa pagsugod niini nga proseso, naghunahuna ko kon ang CSS relative color values makahatag ba og dugang nga mga posibilidad samtang himoon usab kini nga mas sayon nga ipatuman. Bag-ohay lang akong gidugang ang usa ka bag-ong background sa minahan sa bulawan sa panid sa kontak sa akong website, ug ang una nga pag-uli naglakip sa mga lampara sa lana nga nagsiga ug nag-swing.
Gusto nakong tukion kon sa unsang paagi ang pag-animate sa mga relatibong kolor sa CSS makahimo sa sulod sa minahan nga mas realistiko pinaagi sa pagtintal niini sa mga kolor gikan sa mga lampara. Gusto ko nga maapektuhan nila ang kalibutan sa ilang palibot, sama sa gibuhat sa tinuod nga kahayag. Busa, imbes nga i-animate ang daghang mga kolor, naghimo ko og gamay nga sistema sa suga nga nag-animate sa usa lang ka kolor.
Ang una nakong tahas mao ang pagbutang og overlay layer tali sa background ug sa akong mga lamp:
Gigamit nako ang mix-blend-mode: kolor tungod kay kini nagtintal kung unsa ang ilawom niini samtang gipreserbar ang ilawom nga kahayag. Ingon nga gusto lang nako nga makita ang overlay kung gi-on ang mga animation, gihimo nako ang pag-opt-in sa overlay: .svg-mine #overlay { display: wala; }
@media (gusto-giminusan-lihok: walay gusto) { .svg-mine[data-animations=on] #overlay { display: block; opacity: 0.5; } }
Nabutang na ang overlay, apan wala pa konektado sa mga lampara. Nagkinahanglan ko og light source. Ang akong mga lampara yano ra, ug ang matag usa adunay usa ka elemento sa lingin nga akong gi-blur gamit ang usa ka filter. Ang filter naghimo og usa ka humok kaayo nga blur sa tibuok lingin.
Imbis nga i-animate ang overlay ug mga lampara nga gilain, akong gi-animate ang usa ka "siga" nga kolor nga token ug nakuha ang tanan gikan niana. Una, nagparehistro ako og tulo ka gi-type nga custom properties para sa OKLCH channels:
@property --fl-l {
syntax: "
Gi-animate nako ang mga channel, tinuyo nga nagduso og pipila ka mga frame ngadto sa orange aron ang flicker klaro nga mabasa sama sa firelight:
@keyframes siga { 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; } }
Dayon akong gisakupan kana nga animation sa SVG, mao nga ang gipaambit nga mga variable anaa sa mga lampara ug sa akong overlay:
@media (gusto-giminusan-lihok: walay gusto) { .svg-mine[data-animations=on] { animation: siga 3.6s walay katapusan nga linear; pag-inusara: pag-inusara;
/* Paghimo usa ka kolor sa siga gikan sa mga animated channel */ --siga: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Kolor sa lampara gikan sa siga */ --lamp-core: oklch(gikan sa var(--flame) calc(l + 0.05) calc(c * 0.70) h);
/* Overlay tint nga nakuha gikan sa parehas nga siga */ --overlay-tint: oklch(gikan sa var(--flame) calc(l + 0.06) calc(c * 0.65) calc(h - 10)); } }
Sa katapusan, akong gipadapat ang mga nakuha nga mga kolor sa nagdan-ag nga mga lampara ug ang overlay nga naapektuhan niini: @media (gusto-giminusan-lihok: walay gusto) { .svg-mine[data-animations=on] #mine-lamp-1 > circle, .svg-mine[data-animations=on] #mine-lamp-2 > circle { pun-on: var(--lamp-core); }
.svg-mine[data-animations=on] #overlay { display: block; pun-on: var(--overlay-tint); opacity: 0.5; } }
Sa dihang ang siga mobalhin ngadto sa kahel, ang mga lampara moinit, ug ang talan-awon moinit uban niini. Sa dihang mobugnaw na ang siga, mahiusa ang tanan. Ang labing kaayo nga bahin mao nga wala’y gisulat nga mano-mano. Kung akong usbon ang kolor sa pundasyon o i-tweak ang flame animation ranges, ang tibuok sistema sa suga mag-update dungan. Makita nimo ang katapusang resulta sa akong website. Paggamit pag-usab, Pag-usab, Pag-usab Kadtong mga animator sa Hanna-Barbera napugos sa pag-repurpose sa mga elemento tungod sa panginahanglan, apan gigamit nako pag-usab ang mga kolor tungod kay kini naghimo sa akong trabaho nga mas makanunayon ug mas sayon nga mamentinar. Ang mga kantidad sa kolor nga paryente sa CSS nagtugot kanako sa:
Ipasabut ang usa ka kolor sa pundasyon, Ihulagway kung unsa ang kalabutan sa ubang mga kolor niini, Gamita pag-usab kadtong mga relasyon bisan asa, ug I-animate ang sistema pinaagi sa pagbag-o sa usa ka kantidad.
Ang relatibong kolor dili lang makapasayon sa tema. Kini nag-awhag sa usa ka paagi sa paghunahuna diin ang kolor, sama sa paglihok, tinuyo - ug diin ang pag-usab sa usa ka bili makapausab sa tibuok nga talan-awon nga dili isulat pag-usab ang buhat sa ubos niini.
