Ngisanda kuvuselela imidwebo egqwayizayo kuwebhusayithi yami ngetimu entsha neqembu labalingiswa abaphayonayo, ngisebenzisa amasu amaningi engabelana ngawo kulolu chungechunge. Okumbalwa kokugqwayiza kwami kushintsha ukubukeka lapho othile exhumana nabo noma ngezikhathi ezihlukile zosuku.
Imibala emfanekisweni ongaphezulu kwamakhasi ebhulogi yami iyashintsha kusukela ekuseni kuze kube sebusuku nsuku zonke. Bese kuba nemodi yeqhwa, enezela imibala ebandayo kanye netimu ebusika, ngezilokotho zesendlalelo sembondela kanye nemodi yokuhlanganisa.
Ngenkathi ngisebenza kulokhu, ngaqala ukuzibuza ukuthi ingabe amanani ombala wesihlobo se-CSS anganginika ukulawula okwengeziwe ngenkathi enza inqubo ibe lula. Qaphela: Kulesi sifundo, ngizogxila emananini ahlobene ombala kanye nesikhala sombala se-OKLCH semifanekiso yetimu nokugqwayiza. Uma ufuna ukungena ujule embaleni ohlobene, u-Ahmad Shadeed udale inkomba esebenzisanayo enhle kakhulu. Ngokuqondene nezikhala zemibala, ama-gamuts, kanye ne-OKLCH, uGeoff Graham wethu wabhala ngakho.
Ukusetshenziswa ngokuphindaphindiwe kwezakhi kwakubalulekile. Ingemuva liphinde lasetshenziswa noma nini lapho kunokwenzeka, ngokusondeza nokumbondelana okusiza ekwakheni izigcawu ezintsha ngomsebenzi wobuciko ofanayo. Kwazalwa ngesidingo, kodwa futhi kwakhuthaza ukucabanga ngokochungechunge kunokuba izigcawu ngazinye. Inkinga Ngokubuyekeza Mathupha Amaphalethi Ombala Masiqonde ngqo enseleleni yami. Ezihlokweni ze-Toon ezifana nalesi - ngokususelwe kusiqephu se-Yogi Bear Show sango-1959 esithi "Lullabye-Bye Bear" - nomsebenzi wami ngokuvamile, amaphalethi akhawulelwe emibaleni embalwa ekhethiwe.
Ngidala ama-shades nama-tints kulokho engikubiza ngombala wami "wesisekelo" ukuze nginwebe iphalethi ngaphandle kokwengeza ama-hues amaningi.
Ku-Sketch, ngisebenza endaweni yombala ye-HSL, ngakho-ke le nqubo ihlanganisa ukukhulisa noma ukwehlisa inani lokukhanya lombala wami wesisekelo. Ngokweqiniso, akuwona umsebenzi onzima - kodwa ukukhetha umbala wesisekelo ohlukile kudinga ukudala isethi entsha yama-shades nama-tints. Ukwenza lokho ngesandla, ngokuphindaphindiwe, ngokushesha kuba nzima.
Ngikhulume nge-HSL - H (hue), S (saturation), kanye no-L (lightness) - isikhala sombala, kodwa leyo ngenye yezindlela ezimbalwa zokuchaza umbala. I-RGB - R (bomvu), G (eluhlaza okotshani), B (eluhlaza okwesibhakabhaka) - cishe yiyona eyaziwa kakhulu, okungenani ngesimo sayo se-Hex. Kukhona ne-LAB — L (lightness), A (green–red), B (blue-yellow) — kanye nentsha, kodwa manje esekelwa kabanzi i-LCH — L (lightness), C (chroma), H (hue) — imodeli ngendlela yayo ye-OKLCH. Nge-LCH - ikakhulukazi i-OKLCH ku-CSS - ngingakwazi ukulungisa inani lokukhanya kombala wami wesisekelo.
Noma ngingayishintsha i-chroma yayo. I-LCH chroma kanye nokugcwaliswa kwesikhala kwe-HSL kokubili kuchaza ukushuba noma ukunotha kombala, kodwa akwenza ngezindlela ezahlukene. I-LCH inginika ububanzi obubanzi nokuxubana okubikezelwayo phakathi kwemibala.
Ngingakwazi futhi ukushintsha umbala ukuze ngidale iphalethi yemibala eyabelana ngokukhanya okufanayo namanani e-chroma. Kokubili i-HSL ne-LCH, i-hue spectrum iqala kokubomvu, idlule kokuluhlaza nokuluhlaza okwesibhakabhaka, bese ibuyela kokubomvu.
Kungani i-OKLCH Ishintshe Indlela Engicabanga Ngayo Ngombala Ukusekelwa kwesiphequluli kwesikhala sombala se-OKLCH manje sekwandile, ngisho noma amathuluzi okuklama - okuhlanganisa i-Sketch - engakafiki. Ngenhlanhla, lokho akufanele kukuvimbe ekusebenziseni i-OKLCH. Iziphequluli zizoguqula ngenjabulo amanani e-Hex, HSL, LAB, kanye ne-RGB abe yi-OKLCH kuwe. Ungachaza indawo yangokwezifiso ye-CSS enombala wesisekelo kunoma yisiphi isikhala, okuhlanganisa i-Hex: /* Umbala wesisekelo */ --isisekelo: #5accd6;
Noma yimiphi imibala ephuma kuyo izoguqulelwa ku-OKLCH ngokuzenzakalelayo: --foundation-light: oklch(kusuka ku-var(--foundation) [...]; } --foundation-mid: oklch(kusuka ku-var(--foundation) [...]; } --foundation-dark: oklch(kusuka ku-var(--foundation) [...]; }
Umbala Ohlobene Njengohlelo Lomklamo Cabanga ngombala ohlobene njengokuthi: “Thatha lo mbala, uwulungise, bese unginika umphumela.” Kunezindlela ezimbili zokulungisa umbala: izinguquko eziphelele kanye nezinguquko ezilinganayo. Zibukeka zifana ngekhodi, kodwa ziziphatha ngendlela ehluke kakhulu uma uqala ukushintsha imibala yesisekelo. Ukuqonda lowo mehluko yikho okungashintsha usebenzisa umbala ohlobene ube uhlelo. /* Umbala wesisekelo */ --isisekelo: #5accd6;
Isibonelo, inani lokukhanya lombala wami wesisekelo ngu-0.7837, kuyilapho inguqulo emnyama inenani elingu-0.5837. Ukuze ngibale umehluko, ngikhipha inani eliphansi kwephezulu bese ngisebenzisa umphumela ngisebenzisa umsebenzi wokubala (): --foundation-dark: oklch(kusuka ku-var(--foundation) i-calc(l - 0.20) c h);
Ukuze ngithole umbala okhanyayo, ngengeza umehluko esikhundleni salokho: --foundation-light: oklch(kusuka ku-var(--foundation) i-calc(l + 0.10) c h);
I-Chromaukulungiswa kulandela inqubo efanayo. Ukuze unciphise ukushuba kombala wami wesisekelo ukusuka ku-0.1035 kuye ku-0.0035, ngikhipha inani elilodwa kwelinye: oklch(kusuka ku-var(--foundation) i-calc(c - 0.10) h);
Ukwakha iphalethi yama-hues, ngibala umehluko phakathi kwevelu ye-hue yombala wami wesisekelo (200) kanye ne-hue yami entsha (260): oklch(kusuka ku-var(--foundation) l c calc(h + 60));
Lezo zibalo ziphelele. Uma ngikhipha inani elinqunyiwe, ngiqinisile ngithi, “Ncisha njalo kakhulu.” Okufanayo kuyasebenza lapho wengeza amanani angashintshi: i-calc(c - 0.10) i-calc(c + 0.10)
Ngifunde imikhawulo yale ndlela ngendlela enzima. Lapho ngithembela ekukhipheni amanani angaguquki e-chroma, imibala yawohloka yaba mpunga ngokushesha nje lapho ngishintsha isisekelo. Iphalethi elisebenzela umbala owodwa lahlukana komunye. Ukuphindaphinda kuziphatha ngendlela ehlukile. Uma ngiphindaphinda i-chroma, ngitshela isiphequluli: “Yehlisa ukushuba kwalo mbala ngengxenye.” Ubudlelwano phakathi kwemibala buhlala buqinile, noma ngabe isisekelo sishintsha: i-calc(c * 0.10)
Ukuyihambisa Kwami, Kukale, Kujikelezise Imithetho
Hambisa ukukhanya (engeza noma susa), Isikali se-chroma (phindaphindeka), Zungezisa umbala (engeza noma ukhiphe amadigri).
Ngikala i-chroma ngoba ngifuna izinguquko zokuqina ukuze zihlale zilingana nombala wesisekelo. Ubudlelwano be-Hue buyajikeleza, ngakho ukuphindaphinda umbala akunangqondo. Ukukhanya kuwukubona futhi kuphelele - ukuphindaphinda ngokuvamile kuveza imiphumela eyinqaba.
Kusukela Kumbala Owodwa Kuye Kundikimba Yonke Umbala ohlobene ungivumela ukuthi ngichaze umbala wesisekelo futhi ngikhiqize wonke omunye umbala engiwudingayo - ukugcwaliswa, imivimbo, ukuma kwe-gradient, izithunzi - ukusuka kuwo. Ngaleso sikhathi, umbala uyayeka ukuba yiphalethi bese uqala ukuba uhlelo. Imifanekiso ye-SVG ivamise ukusebenzisa kabusha imibala embalwa efanayo kuwo wonke ama-filling, ama-stroke, nama-gradient. Umbala ohlobene ukuvumela ukuthi uchaze lobo budlelwano kanye futhi uphinde ukusebenzise yonke indawo - njengabo bonke abapopayi baphinde basebenzisa ingemuva ukuze bakhe izigcawu ezintsha.
Shintsha umbala wesisekelo kanye, futhi yonke imibala etholiwe ibuyekezwa ngokuzenzakalelayo, ngaphandle kokubala kabusha noma yini ngesandla. Ngaphandle kwezithombe ezigqwayizayo, ngingasebenzisa le ndlela efanayo ukuchaza imibala yezimo zezinto ezisebenzisanayo njengezinkinobho nezixhumanisi. Umbala wesisekelo engiwusebenzise kokuthi “Lullabye-Bye Bear” Toon Title yami uluhlaza okwesibhakabhaka obukeka njenge-cyan. Ingemuva liyi-radial gradient phakathi kwesisekelo sami kanye nenguqulo emnyama.
Ukuze udale ezinye izinguqulo ezinemizwa ehluke ngokuphelele, ngidinga kuphela ukushintsha umbala wesisekelo: --isisekelo: #5accd6; --grad-end: var (--foundation); --grad-start: oklch(kusuka ku-var(--foundation) i-calc(l - 0.2357) i-calc(c * 0.833) h);
Ukuze ngibophe lezo zakhiwo zangokwezifiso kugradient yami ye-SVG ngaphandle kokuphindaphinda amanani ombala, ngishintshe amanani wombala wokumisa anekhodi eqinile ngezitayela ezingaphakathi komugqa:
Okulandelayo, bengidinga ukuqinisekisa ukuthi umbhalo wami we-Toon uhlale uqhathanisa nanoma yimuphi umbala wesisekelo engiwukhethayo. Ukuzungezisa kwe-hue engu-180deg kukhiqiza umbala ohambisanayo ovele uvele - kodwa ungadlidliza ngokungathandeki: .isibani sombhalo { Gcwalisa: oklch(kusuka ku-var(--foundation) l c calc(h + 180)); }
Ukushintsha okungu-90° kukhiqiza umbala wesibili ogqamile ngaphandle kokuphelelisana ngokugcwele: .isibani sombhalo { Gcwalisa: oklch(kusuka ku-var(--foundation) l c calc(h - 90)); }
Ukuzilibazisa kwami kwe-Quick Draw McGraw’s 1959 Toon Title ethi “El Kabong” isebenzisa amasu afanayo kodwa ngephalethi ehlukahlukene. Isibonelo, kukhona enye i-radial gradient phakathi kombala wesisekelo nomthunzi omnyama.
Isakhiwo nesihlahla ngemuva kumane kuyimibala ehlukene yombala wesisekelo ofanayo. Kulezo zindlela, bengidinga eminye imibala emibili yokugcwalisa: .bg-maphakathi { Gcwalisa: oklch(kusuka ku-var(--foundation) i-calc(l - 0.04) i-calc(c * 0.91) h); }
.bg-mnyama { Gcwalisa: oklch(kusuka ku-var(--foundation) calc(l - 0.12) calc(c * 0.64) h); }
Lapho Izisekelo Ziqala Ukunyakaza
Kuze kube manje, konke engikubonisile bekumile. Ngisho noma othile esebenzisa isikhethi sombala ukushintsha umbala wesisekelo, lolo shintsho lwenzeka ngokushesha. Kepha ihluzo ezipopayi azivamile ukuma - umkhondo usegameni. Ngakho-ke, uma umbala uyingxenye yesistimu, asikho isizathu sokuthi awukwazi ukuphilisa, futhi.
Ukuze ugqwayize umbala wesisekelo, ngidinga kuqala ukuwuhlukanisa ube iziteshi zawo ze-OKLCH- ukukhanya, i-chroma, ne-hue. Kodwa kunesinyathelo esengeziwe esibalulekile: Ngidinga ukubhalisa lawo manani njengezakhiwo zangokwezifiso ezithayiphiwe. Kodwa kusho ukuthini lokho?
Ngokuzenzakalelayo, isiphequluli asazi ukuthi inani lempahla yangokwezifiso ye-CSS limelela umbala, ubude, inombolo, noma enye into ngokuphelele. Lokho ngokuvamile kusho ukuthi azikwazi ukuchazwa ngokushelelayo phakathi nokugqwayiza, futhi zeqe ukusuka kunani elilodwa ukuya kwelinye.
Ukubhalisa impahla yangokwezifiso kutshela isiphequluli uhlobo lwevelu olumeleyo nokuthi kufanele luziphathe kanjani ngokuhamba kwesikhathi. Kulokhu, ngifuna isiphequluli siphathe amashaneli ami ombala njengezinombolo ukuze agqwayize kahle.
@property --f-l {
i-syntax: "
@property --f-c {
i-syntax: "
@property --f-h {
i-syntax: "
Uma sezibhalisiwe, lezi zakhiwo zangokwezifiso ziziphatha njenge-CSS yomdabu. Isiphequluli singawahumusha ngohlaka ngohlaka. Bese ngakha kabusha umbala wesisekelo kulawo mashaneli: --foundation: oklch(var(--f-l) var(--f-c) var(--f-h));
Lokhu kwenza umbala wesisekelo ube ophilayo, njenganoma yiliphi elinye inani lezinombolo. Nali upopayi olula "wokuphefumula" olushintsha kancane ukukhanya ngokuhamba kwesikhathi: @keyframes phefumula { 0%, 100% { --f-l: 0.36; } 50% { --f-l: 0.46; } }
.toon-title { izithombe ezinyakazayo: phefumula 10s kalula-in-out okungapheli; }
Ngoba wonke omunye umbala ekugcwalisweni, ama-gradient, nama-stroke ususelwa kokuthi --foundation, wonke aphila ndawonye, futhi akukho lutho oludinga ukubuyekezwa mathupha. Umbala Opopayi Owodwa, Imithelela eminingi Ekuqaleni kwale nqubo, ngazibuza ukuthi ingabe amanani emibala ehlobene ye-CSS anganikeza amathuba amaningi kuyilapho ewenza kube lula ukuwenza. Ngisanda kufaka isizinda esisha semayini yegolide ekhasini lokuxhumana lewebhusayithi yami, futhi i-iteration yokuqala ihlanganisa izibani zikawoyela ezikhanyayo nezinyakazayo.
Bengifuna ukuhlola ukuthi imibala ehlobene ye-CSS egqwayizayo ingenza kanjani ingaphakathi lemayini libe ngokoqobo ngokulipenda ngemibala evela kumalambu. Ngangifuna ukuthi zithinte izwe elibazungezile, ngendlela ukukhanya kwangempela kwenza ngayo. Ngakho-ke, esikhundleni sokugqwayiza imibala eminingi, ngakhe isistimu yokukhanyisa encane ebonisa umbala owodwa nje.
Umsebenzi wami wokuqala bekuwukufaka isendlalelo sokumbondelana phakathi kwengemuva namalambu ami:
Ngisebenzise i-mix-blend-mode: umbala ngoba lokho kufiphaza okungaphansi kwawo ngenkathi kugcinwa ukukhanya okuyisisekelo. Njengoba ngifuna kuphela ukuthi imbondela ibonakale uma ukugqwayiza kuvuliwe, ngenze ukukhetha ukungena kwembondela: .svg-mine #overlay { isibonisi: akukho; }
@media (incamela-yehlisiwe-ukunyakaza: akukho-okuncanyelwayo) { .svg-mine[data-animations=on] #imbondela { isibonisi: vimba; ukukhanya: 0.5; } }
Imbondela yayisendaweni, kodwa ingakaxhunywanga nezibani. Bengidinga umthombo wokukhanya. Izibani zami zilula, futhi ngayinye iqukethe isici esiyindilinga engisifiphaze ngesihlungi. Isihlungi sikhiqiza ukufiphala okuthambile kuwo wonke umbuthano.
Esikhundleni sokugqwayiza imbondela namalambu ngokuhlukana, ngiphila ithokheni yombala owodwa "welangabi" futhi ngithole yonke enye into kulokho. Okokuqala, ngibhalisa izakhiwo zangokwezifiso ezintathu ezithayiphiwe zeziteshi ze-OKLCH:
@property --fl-l {
i-syntax: "
Ngigqwayize lezo ziteshi, ngiphusha ngamabomu amafreyimu ambalwa ngakuwolintshi ukuze okucwayizayo kufundeke kahle njengokukhanya komlilo:
@keyframes ilangabi { 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; } }
Ngabe sengihlola lokho kugqwayiza ku-SVG, ngakho-ke okuguquguqukayo okwabiwe kuyatholakala kuzo zombili izibani nembondela yami:
@media (incamela-yehlisiwe-ukunyakaza: akukho-okuncanyelwayo) { .svg-mine[data-animations=on] { izithombe ezinyakazayo: ilangabi elingu-3.6s elingenamkhawulo; ukuzihlukanisa: ukuzihlukanisa;
/* Yakha umbala welangabi eziteshini ezigqwayizayo */ --flame: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Umbala wesibani osuselwa elangabini */ --lamp-core: oklch(kusuka ku-var(--flame) calc(l + 0.05) calc(c * 0.70) h);
/* I-Tint yokumbondela etholakala elangabini elifanayo */ --overlay-tint: oklch(kusuka ku-var(--flame) calc(l + 0.06) calc(c * 0.65) calc(h - 10)); } }
Ekugcineni, ngasebenzisa leyo mibala etholiwe ezibanini ezikhazimulayo kanye nembondela ethinta yona: @media (incamela-yehlisiwe-ukunyakaza: akukho-okuncanyelwayo) { .svg-mine[data-animations=on] #mine-lamp-1 > indilinga, .svg-mine[data-animations=on] #mine-lamp-2 > indilinga { gcwalisa: var (--lamp-core); }
.svg-mine[data-animations=on] #imbondela { isibonisi: vimba; gcwalisa: var(--overlay-tint); ukukhanya: 0.5; } }
Lapho ilangabi lishintsha libheke kuwolintshi, izibani ziyafudumala, futhi indawo iyafudumala. Lapho ilangabi liphola, konke kuhlangana ndawonye. Ingxenye engcono kakhulu ukuthi akukho lutho olubhalwa ngesandla. Uma ngishintsha umbala wesisekelo noma ngilungisa ububanzi bokugqwayiza belangabi, lonke isistimu yokukhanyisa ibuyekeza kanyekanye. Ungabona umphumela wokugcina kuwebhusayithi yami. Sebenzisa Kabusha, Phinda Uhlomise, Uphinde Uvakashele Labo bapopayi be-Hanna-Barbera baphoqeleke ukuthi baphinde basebenzise izinto ngenxa yesidingo, kodwa ngiphinde ngisebenzise imibala ngoba yenza umsebenzi wami uhambisane futhi kube lula ukuwunakekela. Amanani ombala ahlobene we-CSS angivumela ukuthi:
Chaza umbala wesisekelo esisodwa, Chaza ukuthi eminye imibala ihlobana kanjani nayo, Phinda usebenzise lobo budlelwano yonke indawo, futhi Gcwalisa isistimu ngokushintsha inani elilodwa.
Umbala ohlobene awugcini nje ukwenza ukubamba kube lula. Ikhuthaza indlela yokucabanga lapho umbala, njengokunyakaza, uhloselwe khona - futhi lapho ukuguqula inani elilodwa kungaguqula isigcawu sonke ngaphandle kokuphinda ubhale umsebenzi ngaphansi kwawo.
