Nabiit pay a pinabarokon dagiti animated graphics iti website-ko babaen ti baro a tema ken grupo dagiti pioneering characters, nga inaramidko ti adu a teknik nga inbinglayko iti daytoy a serye. Sumagmamano kadagiti animasionko ti agbaliw ti langa no adda makilangen kadakuada wenno iti nagduduma nga oras ti aldaw.
Inaldaw nga agbaliw dagiti kolor iti graphic iti ngato dagiti panid ti blog-ko manipud agsapa agingga iti rabii. Kalpasanna, adda’t snow mode, a mangnayon kadagiti nalamiis a kolor ken wintery theme, babaen ti pammalubos ti overlay layer ken blending mode.
Bayat ti panagtrabaho iti daytoy, nangrugiak a nagpanunot no dagiti relatibo a pateg ti kolor ti CSS ket makaited kaniak iti ad-adu a panangtengngel bayat a mapasimple pay ti proseso. Pakaammo: Iti daytoy a tutorial, ipamaysak dagiti relatibo a pateg ti kolor ken ti OKLCH nga espasio ti kolor para kadagiti theming graphics ken animations. No kayatmo ti ag-dive iti nauneg iti relatibo a kolor, nangaramid ni Ahmad Shadeed iti natan-ok nga interaktibo a giya. No maipapan kadagiti espasio ti kolor, gamut, ken OKLCH, insurat ti bukodtayo a Geoff Graham maipapan kadagitoy.
Ti maulit-ulit a panangusar kadagiti elemento ti tulbek. Nausar manen dagiti background no mabalin, nga adda dagiti zoom ken overlay a tumulong a mangbangon kadagiti baro nga eksena manipud iti isu met laeng nga obra ti arte. Naipasngay dayta gapu iti kasapulan, ngem pinaregtana met ti panagpanunot kadagiti termino dagiti serye imbes nga indibidual nga eksena. Ti problema Iti Manual a Panag-update kadagiti Color Palettes Agderetsotayo iti karitko. Iti Toon Titles a kas iti daytoy — a naibatay iti 1959 Yogi Bear Show episode a “Lullabye-Bye Bear” — ken ti obrak iti sapasap, dagiti paleta ket limitado kadagiti napili a sumagmamano a kolor.
Mangparnuayak kadagiti shade ken tints manipud iti awagak a “foundation” a kolorko tapno mapalawa ti paleta a diak mangnayon iti ad-adu pay a maris.
Iti Sketch, agtartrabahoak iti espasio ti kolor ti HSL, isu a daytoy a proseso ket ramanenna ti panangpaadu wenno panangkissay iti pateg ti kinalag-an ti kolor ti pundasionko. Sipupudno, saan a narigat nga aramid — ngem ti panagpili iti sabali a kolor ti pundasion ket kasapulan ti panangparnuay iti interamente a baro a set ti shade ken tints. Ti panangaramid iti dayta a manual, maulit-ulit, alisto nga agbalin a makabannog.
Dinakamatko ti HSL — H (hue), S (saturation), ken L (lightness) — color space, ngem maysa laeng dayta kadagiti sumagmamano a wagas a mangiladawan iti kolor. Ti RGB — R (nalabaga), G (berde), B (asul) — ket nalabit ti kaaduan a pamiliar, iti kabassitan iti pormana a Hex. Adda met ti LAB — L (kinalag-an), A (berde–nalabaga), B (asul–duyaw) — ken ti baro, ngem ita nasaknap a nasuportaran nga LCH — L (kinalag-an), C (kroma), H (maris) — a modelo iti pormana nga OKLCH. Iti LCH — espesipiko nga OKLCH iti CSS — mabalinko nga i-adjust ti lightness value ti kolor ti foundation-ko.
Wenno mabalinko a baliwan ti chroma-na. Ti LCH chroma ken HSL saturation ket agpada a mangiladawan ti kapigsa wenno kinabaknang ti maysa a kolor, ngem aramidenda daytoy iti nagduduma a wagas. Ti LCH ket mangted kaniak iti nalawlawa a sakop ken ad-adda a maipadto a panagtimpla iti nagbaetan dagiti kolor.
Mabalinko met a baliwan ti maris tapno makaaramid iti paleta dagiti kolor a makibingbingay iti agpapada a kinalag-an ken pateg ti chroma. Iti agpada nga HSL ken LCH, ti espektro ti maris ket mangrugi iti nalabaga, aggaraw babaen ti berde ken asul, ken agsubli iti nalabaga.
Apay a Nagbaliw ti OKLCH No Kasano ti Panunotek Maipapan iti Kolor Nasaknap itan ti suporta ti browser para iti OKLCH color space, uray no dagiti ramit ti disenio — agraman ti Sketch — ket saan a nakadanon. Imbag laengen ta saan koma a dayta ti manglapped kenka nga agusar iti OKLCH. Siraragsak a pagbalinen dagiti browser dagiti pateg ti Hex, HSL, LAB, ken RGB iti OKLCH para kenka. Mabalinmo nga ikeddeng ti kostumbre a tagikua ti CSS nga addaan iti kolor ti pundasion iti ania man nga espasio, a mairaman ti Hex: /* Kolor ti pundasion */ --pundasion: # 5accd6;
Aniaman a kolor a nagtaud manipud iti daytoy ket automatiko a mabaliwan iti OKLCH: --pundasion-silaw: oklch (manipud iti var (--pundasion) [...]; } --pundasion-tengnga: oklch (manipud iti var (--pundasion) [...]; } --pundasion-nasipnget: oklch (manipud iti var (--pundasion) [...]; }
Relatibo a Kolor Kas Sistema ti Disenyo Panunotem ti relatibo a kolor a kas kunana: “Alaem daytoy a kolor, i-tweak-mo, sa itedmo kaniak ti resulta.” Adda dua a wagas a mangbalbaliw iti kolor: absoluto a panagbalbaliw ken proporsional a panagbalbaliw. Agpada ti langada iti kodigo, ngem naiduma unay ti kababalinda apaman a mangrugika nga agsinnukat kadagiti kolor ti pundasion. Ti pannakaawat iti dayta a nagdumaan ti mabalin a mamagbalin iti panangusar iti relatibo a kolor a sistema. /* Kolor ti pundasion */ --pundasion: # 5accd6;
Kas pagarigan, ti pateg ti kinalag-an ti kolor ti pundasionko ket 0.7837, idinto a ti nasipnget a bersion ket addaan iti pateg a 0.5837. Tapno makalkula ti nagdumaan, ikkatek ti nababbaba a pateg manipud iti nangatngato ken iyaplikarko ti resulta babaen ti panagusar ti calc() a panagandar: --pundasion-nasipnget: oklch (manipud iti var (--pundasion) . kalk (l - 0.20) c h);
Tapno magun-od ti nalaglag-an a kolor, inayonko ketdi ti nagdumaan: --pundasion-silaw: oklch (manipud iti var (--pundasion) . kalk (l + 0.10) c h);
Kroma ti Kromadagiti panagbalbaliw ket surotenda ti isu met laeng a proseso. Tapno maksayan ti kapigsa ti kolor ti pundasionko manipud 0.1035 agingga iti 0.0035, ikkatek ti maysa a pateg manipud iti sabali: oklch (manipud iti var (--pundasion) . l kalk (c - 0.10) h);
Tapno makaaramidak iti paleta dagiti maris, kalkularek ti nagdumaan ti pateg ti maris ti kolor ti pundasionko (200) ken ti baro a marisko (260): oklch (manipud iti var (--pundasion) . l c kalk (h + 60));
Absoluto dagita a kalkulasion. No ikkatek ti naikeddeng a gatad, epektibo nga ibagbagak, “Kanayon nga ikkatem daytoy a kaadu.” Kasta met laeng no manginayon kadagiti naikeddeng a pateg: calc (c - 0.10) nga . calc (c + 0.10) nga .
Nasursurok ti limitasion daytoy a pamay-an iti narigat a pamay-an. Idi nagpannurayak iti panangikkat kadagiti naikeddeng a pateg ti chroma, nagrupsa dagiti kolor nga agturong iti abuabu apaman a binaliwak ti pundasion. Nagrupsa ti maysa a paleta nga agtrabaho para iti maysa a kolor para iti sabali. Naiduma ti kababalin ti panagpaadu. No paaduek ti chroma, ibagbagak iti browser: “Pabassitem ti kapigsa daytoy a kolor iti maysa a proporsion.” Agtalinaed a nasayaat ti relasion dagiti kolor, uray no agbaliw ti pundasion: calc (c * 0.10) nga .
Ti Iyakarko Dayta, I-scale Dayta, I-rotate It Rules
Iyakar ti kinalag-an (inayon wenno ikissay), . Skala ti kroma (paadu), . I-rotate ti hue (inayon wenno ikissay dagiti degree).
I-scale-ko ti chroma gapu ta kayatko a dagiti panagbalbaliw ti kapigsa ket agtalinaed a proporsional iti kolor ti base. Dagiti relasion ti hue ket agturong, isu nga awan ti kaipapanan ti panangpaadu iti hue. Ti kinalag-an ket perceptual ken absolute — ti panangpaadu iti dayta ket masansan a mangpataud kadagiti karkarna a resulta.
Manipud Maysa a Kolor Agingga iti Intero a Tema Ti relatibo a kolor ket mangipalubos kaniak a mangikeddeng ti maysa a kolor ti pundasion ken mangpataud ti tunggal maysa a sabali a kolor a kasapulak — punno, stroke, panagsardeng ti gradient, anniniwan — manipud iti daytoy. Iti dayta a punto, agsardeng ti kolor nga agbalin a paleta ken mangrugin nga agbalin a sistema. Dagiti ilustrasion ti SVG ket aggargaraw nga agusar manen kadagiti isu met laeng a sumagmamano a kolor iti ballasiw dagiti punno, stroke, ken dagiti panagrang-ay. Ti relatibo a kolor ket mangpalubos kenka a mangikeddeng kadagita a relasion iti maminsan ken agusar manen kadagitoy iti sadinoman — a kasla dagiti animador ket nagusar manen kadagiti likudan tapno mangpartuat kadagiti baro nga eksena.
Baliwan ti kolor ti pundasion iti maminsan, ket tunggal nagtaud a kolor ket automatiko nga ag-update, a saan a mangkuenta manen iti aniaman babaen ti ima. Iti ruar dagiti animado a grapiko, mabalinko nga usaren daytoy met laeng a pamay-an tapno mangikeddeng kadagiti kolor para kadagiti kasasaad dagiti interaktibo nga elemento a kas dagiti buton ken silpo. Ti kolor ti pundasion nga inusarko iti “Lullabye-Bye Bear” Toon Title-ko ket kasla cyan nga asul. Ti background ket radial gradient iti nagbaetan ti pundasionko ken ti nasipnget a bersion.
Tapno makaaramid kadagiti alternatibo a bersion nga addaan iti interamente a naiduma a rikna, kasapulak laeng a baliwan ti kolor ti pundasion: --pundasion: # 5accd6; --grad-end: var (--pundasion); --grad-rugi: oklch (manipud iti var (--pundasion) . kalk (l - 0.2357) kalk (c * 0.833) h);
Tapno maisilpo dagitoy a kostumbre a tagikua iti SVG gradient-ko a saan a mangduplikar kadagiti pateg ti kolor, sinukatak dagiti natangken-naikodigona a pateg ti stop-color kadagiti estilo ti inline:
Sumaganad, kasapulak a siguraduen a kanayon a maigiddiat ti Toon Text-ko iti aniaman a kolor ti pundasion a piliek. Ti 180deg a panagrikus ti hue ket mangpataud ti komplementario a kolor a sigurado nga ag-pop — ngem mabalin nga agtayyek a saan a komportable: .teksto-silaw { . punnuen: oklch (manipud iti var (--pundasion) . l c kalk (h + 180)); } .
Ti 90° a panagbalbaliw ket mangpataud ti nabiag a sekondario a kolor a saan a naan-anay a komplementario: .teksto-silaw { . punnuen: oklch (manipud iti var (--pundasion) . l c kalk (h - 90)); } .
Ti panaglinglingayko iti Quick Draw McGraw’s 1959 Toon Title “El Kabong“ ket agus-usar kadagiti isu met laeng a teknik ngem addaan iti ad-adu a nadumaduma a paleta. Kas pagarigan, adda sabali pay a radial gradient iti nagbaetan ti kolor ti pundasion ken ti natayengteng a maris.
Ti pasdek ken kayo iti likudan ket basta agduma a maris ti agpapada a kolor ti pundasion. Para kadagita a dalan, kasapulak ti dua a kanayonan a kolor ti punno: .bg-tengnga { . punnuen: oklch (manipud iti var (--pundasion) . kalk (l - 0.04) kalk (c * 0.91) h); } .
.bg-nasipnget { . punnuen: oklch (manipud iti var (--pundasion) . kalk (l - 0.12) kalk (c * 0.64) h); } .
No Mangrugin nga Aggaraw Dagiti Pundasion
Agingga ita, amin nga impakitak ket static. Uray no adda agusar iti color picker a mangbalbaliw iti kolor ti pundasion, dagus a mapasamak dayta a panagbalbaliw. Ngem manmano nga agtakder dagiti animated graphics — ti clue ket adda iti nagan. Isu a no ti kolor ket paset ti sistema, awan ti rason a dina met mabalin ti ag-animate.
Tapno ma-animate ti kolor ti pundasion, kasapulak nga umuna a bingayen dayta kadagiti OKLCH channels-na— kinalag-an, kroma, ken maris. Ngem adda napateg nga ekstra nga addang: Masapul nga irehistrok dagita a pateg kas nai-type a custom properties. Ngem ania ti kayat a sawen dayta?
Babaen ti default, ti browser ket saan nga ammo no ti CSS custom property value ket mangibagi ti kolor, kaatiddog, numero, wenno sabali pay nga interamente. Masansan a kayatna a sawen a dida mai-interpolate a naannayas bayat ti animation, ken agluksaw manipud iti maysa a pateg agingga iti sumaganad.
Ti panagirehistro ti kostumbre a sanikua ket mangibaga ti browser ti kita ti pateg nga irepresentarna ken no kasano ti rumbeng nga agtignay iti panaglabas ti panawen. Iti daytoy a kaso, kayatko a tratuen ti browser dagiti color channel-ko kas numero tapno naannayas ti pannaka-animate-da.
@sanikua --f-l { .
sintaksis: "
@sanikua --f-c { .
sintaksis: "
@sanikua --f-h { .
sintaksis: "
Apaman a nairehistro, dagitoy a kostumbre a tagikua ket agtigtignay a kas ti katutubo a CSS. Mabalin nga interpolate ti browser dagitoy iti frame-by-frame. Kalpasanna, bangonek manen ti kolor ti pundasion manipud kadagita a kanal: --pundasion: oklch (var (--f-l) var (--f-c) var (--f-h));
Daytoy ket mangaramid ti kolor ti pundasion nga agbalin nga animable, a kas ti ania man a sabali a numeriko a pateg. Adtoy ti simple a “panaganges” nga animation a siaannad a mangbalbaliw iti kinalag-an bayat ti panaglabas ti panawen: @keyframes nga anges ti { . 0%, 100% { --f-l: 0.36 nga; } . 50% { --f-l: 0.46 nga; } . } .
.toon-titulo { . animation: anges 10s nalaka-in-out awan patinggana; } .
Gapu ta tunggal maysa a sabali a kolor kadagiti punno, gradient, ken stroke ket nagtaud manipud iti --foundation, dagitoy amin ket ag-animate a sangsangkamaysa, ken awan ti kasapulan a ma-update a manual. Maysa nga Animated a Kolor, Adu nga Epektona Iti rugi daytoy a proseso, pinampanunotko no dagiti relatibo a pateg ti kolor ti CSS ket makaitukon kadagiti ad-adu a posibilidad bayat a mangaramid pay kadagitoy a nasimsimple a maipatungpal. Nabiit pay nga innayonko ti baro a background ti pagminasan ti balitok iti contact page ti website-ko, ket ti umuna nga iteration ket nairaman dagiti oil lamp nga agsilnag ken agtaytayab.
Kayatko a sukimaten no kasano a ti panangpabiag kadagiti relatibo a kolor ti CSS ket mabalin a mamagbalin iti uneg ti pagminasan nga ad-adda a realistiko babaen ti panangtinta iti dayta kadagiti kolor manipud kadagiti lampara. Kayatko nga apektaranda ti lubong iti aglawlawda, iti wagas nga aramiden ti pudno a lawag. Isu nga imbes nga i-animate-ko ti adu a kolor, nangaramidak iti bassit a sistema ti silaw a mangpabiag iti maysa laeng a kolor.
Ti umuna nga aramidek ket ti panangi-slot iti overlay layer iti nagbaetan ti background ken dagiti lamparak:
Inusarko ti mix-blend-mode: kolor ta dayta ti mangtinta iti adda iti babana bayat a mataginayon ti underlying luminance. Kas kayatko laeng a makita ti overlay no dagiti animasion ket nailukat, inaramidko ti overlay opt-in: .svg-mina # nga ag-overlay { . display: awan; } .
@media (kaykayat-nakissay-a-panaggunay: awan-kayat) { .svg-mine [dagiti-animasion ti datos = on] # overlay { . display: bloke; opacity: 0.5 nga; } . } .
Naisaad ti overlay, ngem saan pay a naikonektar kadagiti lampara. Kasapulan ti gubuayan ti lawag. Simple dagiti lamparak, ken tunggal maysa ket naglaon iti sirkulo nga elemento a pinag-blur-ko babaen ti filter. Mangpataud ti filter iti nalukneng unay a blur iti intero a sirkulo.
Imbes nga agsina nga ag-animate-ak iti overlay ken lampara, i-animate-ko ti maymaysa a “flame” color token ket maalakon ti amin a dadduma pay manipud iti dayta. Umuna, irehistrok ti tallo a nai-type a kostumbre a tagikua para kadagiti kanal ti OKLCH:
@sanikua --fl-l { .
sintaksis: "
In-animate-ko dagita a channel, nga inggagarak nga iduron ti sumagmamano a frame nga agturong iti kahel tapno nalawag a mabasa ti flicker kas firelight:
@keyframes gil-ayab { . 0%, 100% { --fl-l: 0.86 nga; --fl-c: 0.12 nga; --fl-h: 95 nga; } . 6% { --fl-l: 0.91 nga; --fl-c: 0.10 nga; --fl-h: 92 nga; } . 12% { --fl-l: 0.83 nga; --fl-c: 0.14 nga; --fl-h: 100 nga; } . 18% { --fl-l: 0.88 nga; --fl-c: 0.11 nga; --fl-h: 94 nga; } . 24% { --fl-l: 0.82 nga; --fl-c: 0.16 nga; --fl-h: 82 nga; } . 30% { --fl-l: 0.90 nga; --fl-c: 0.12 nga; --fl-h: 90 nga; } . 36% { --fl-l: 0.79 nga; --fl-c: 0.17 nga; --fl-h: 76 nga; } . 44% { --fl-l: 0.87 nga; --fl-c: 0.12 nga; --fl-h: 96 nga; } . 52% { --fl-l: 0.81 nga; --fl-c: 0.15 nga; --fl-h: 102 nga; } . 60% { --fl-l: 0.89 nga; --fl-c: 0.11 nga; --fl-h: 93 nga; } . 68% { --fl-l: 0.83 nga; --fl-c: 0.16 nga; --fl-h: 85 nga; } . 76% { --fl-l: 0.91 nga; --fl-c: 0.10 nga; --fl-h: 91 nga; } . 84% { --fl-l: 0.85 nga; --fl-c: 0.14 nga; --fl-h: 98 nga; } . 92% nga {--fl-l: 0.80 nga; --fl-c: 0.17 nga; --fl-h: 74 nga; } . } .
Kalpasanna, in-scope-ko dayta nga animasion iti SVG, isu a dagiti naibingbingay a variable ket magun-od agpadpada kadagiti lampara ken ti overlay-ko:
@media (kaykayat-nakissay-a-panaggunay: awan-kayat) { .svg-mina [dagiti-animasion ti datos = iti] { . animation: gil-ayab 3.6s awan patinggana a linear; panagbukod: panagbukod;
/* Mangbangon ti kolor ti gil-ayab manipud kadagiti animado a kanal */ -- gil-ayab: oklch (var (--fl-l) var (--fl-c) var (--fl-h));
/* Kolor ti lampara a nagtaud iti gil-ayab */ --lamp-core: oklch (manipud iti var (--gilap) calc (l + 0.05) calc (c * 0.70) h);
/* Overlay tint a nagtaud manipud iti isu met laeng a gil-ayab */ --overlay-tint: oklch (manipud iti var (--gil-ayab) . calc (l + 0.06) calc (c * 0.65) kalk (h - 10)); } . } .
Kamaudiananna, inyaplikarko dagita a nagtaud a kolor kadagiti agsilsilnag a lampara ken iti overlay nga apektaranda: @media (kaykayat-nakissay-a-panaggunay: awan-kayat) { .svg-mina [data-animations=on] #mina-lamp-1 > sirkulo, . .svg-mina [datos-animations = on] #mina-lamp-2 > sirkulo { . punnuen: var (--lamp-core); } .
.svg-mine [dagiti-animasion ti datos = on] # overlay { . display: bloke; punnuen: var (--overlay-tint); opacity: 0.5 nga; } . } .
No ag-shift ti gil-ayab nga agturong iti kahel, bumara dagiti lampara, ket bumara ti eksena a kaduada. No lumamiis ti gil-ayab, agtalinaed ti amin. Ti kasayaatan a paset ket awan ti naisurat a manual. No baliwak ti kolor ti pundasion wenno i-tweak-ko dagiti flame animation ranges, aggigiddan nga ag-update ti intero a sistema ti silaw. Makitam ti maudi a resulta iti website-ko. Usaren Manen, Panggep Manen, Bisitaen Manen Dagidi nga animator ti Hanna-Barbera ket napilitan a mangpuntiria manen kadagiti elemento gapu iti kasapulan, ngem usarek manen dagiti kolor gapu ta pagbalinenna ti trabahok nga ad-adda a naurnos ken nalaklaka a mataginayon. Dagiti relatibo a pateg ti kolor ti CSS ket mangipalubos kaniak a:
Depinaren ti maymaysa a kolor ti pundasion, . Iladawan no kasano a mainaig dayta ti dadduma a kolor, . Usaren manen dagita a relasion iti sadinoman, ken Animate ti sistema babaen ti panangbalbaliw iti maysa a pateg.
Ti relatibo a kolor ket saan laeng a mangpalaka iti panagtema. Daytoy ket mangiparegta ti wagas ti panagpanunot a sadiay ti kolor, a kas ti panaggunay, ket nairanta — ken no sadino a ti panagbalbaliw ti maysa a pateg ket mabalin a mangbalbaliw ti maysa a sibubukel nga eksena a saan a mangisurat manen ti obra iti baba daytoy.
