Ndisandula ukuhlaziya imizobo epopayi kwiwebhusayithi yam ngomxholo omtsha kunye neqela labalinganiswa abangoovulindlela, ndisebenzisa ubuchule obuninzi endibebenabo kolu ngcelele. Eminye yemifanekiso yam ephilileyo itshintsha imbonakalo xa umntu enxibelelana nabo okanye ngamaxesha ahlukeneyo emini.
Imibala ekumzobo ongaphezulu kwamaphepha ebhlog yam iyatshintsha ukusuka kusasa kude kube sebusuku yonke imihla. Emva koko, kukho imo yekhephu, eyongeza imibala ebandayo kunye nomxholo obusika, ububele bomgangatho ongaphezulu kunye nemodi yokudibanisa.
Ngelixa ndisebenza koku, ndaqala ukuzibuza ukuba ingaba amaxabiso ombala we-CSS angandinika ulawulo ngakumbi ngelixa ndisenza lula inkqubo. Qaphela: Kule tutorial, ndiza kugxila kumaxabiso ombala ahambelanayo kunye nesithuba sombala se-OKLCH semizobo yemizobo kunye neepopayi. Ukuba ufuna ukuntywila nzulu kumbala ozalanayo, u-Ahmad Shadeed wenze isikhokelo esihle kakhulu sokusebenzisana. Ngokuphathelele izithuba zemibala, iigamuts, kunye ne-OKLCH, uGeoff Graham wethu wabhala ngazo.
Ukusetyenziswa ngokuphindaphindiweyo kwezinto kwakubalulekile. Imvelaphi yayiphinda isetyenziswe xa kunokwenzeka, ngokwandisa kunye nokwaleka inceda ukwakhiwa kwemiboniso emitsha ukusuka kumzobo ofanayo. Yazalwa ngokuyimfuneko, kodwa ikwakhuthaza ukucinga ngokwemixholo yothotho kunemiboniso yomntu ngamnye. Ingxaki Ngokuhlaziywa ngesandla iiPalethi zoMbala Masingene ngqo kumngeni wam. Kwizihloko zeToon ezinje ngale - ngokusekwe kwi-1959 Yogi Bear Show episode "Lullabye-Bye Bear" - kunye nomsebenzi wam ngokubanzi, iipaleti zilinganiselwe kwimibala embalwa ekhethiweyo.
Ndidala i-shades kunye ne-tints kwinto endiyibiza ngokuba ngumbala wam "wesiseko" ukwandisa i-palette ngaphandle kokongeza i-hues.
Kwi-Sketch, ndisebenza kwindawo yombala we-HSL, ke le nkqubo ibandakanya ukwandisa okanye ukunciphisa ixabiso lokukhanya kombala wam wesiseko. Ukunyaniseka, akuwona umsebenzi onzima - kodwa ukukhetha umbala wesiseko owahlukileyo kufuna ukudala iseti entsha yee-shades kunye ne-tints. Ukwenza oko ngesandla, ngokuphindaphindiweyo, ngokukhawuleza kuba nzima.
Ndikhankanye iHSL - H (hue), S (saturation), kunye noL (lightness) - indawo yombala, kodwa leyo yenye yeendlela ezininzi zokuchaza umbala. I-RGB - R (obomvu), G (eluhlaza), B (blue) - mhlawumbi iyona nto iqhelekileyo, ubuncinane kwifom ye-Hex. Kukho kwakhona i-LAB - L (ukukhanya), A (luhlaza-obomvu), B (blue-yellow) - kunye nentsha, kodwa ngoku ixhaswa ngokubanzi i-LCH - L (ukukhanya), C (chroma), H (hue) - imodeli kwifom ye-OKLCH. Nge-LCH - ngokukodwa i-OKLCH kwi-CSS - ndiyakwazi ukulungelelanisa ixabiso lokukhanya kombala wam wesiseko.
Okanye ndingayitshintsha ichroma yayo. I-LCH chroma kunye ne-HSL saturation zombini zichaza ubunzulu okanye ubutyebi bombala, kodwa zikwenza oko ngeendlela ezahlukeneyo. I-LCH indinika uluhlu olubanzi kunye nokudibanisa okuqikelelweyo phakathi kwemibala.
Ndiyakwazi nokuguqula umbala ukwenza ipalethi yemibala eyabelana ngokukhanya okufanayo kunye namaxabiso echroma. Kuzo zombini i-HSL kunye ne-LCH, i-hue spectrum iqala ebomvu, ihamba ngokuluhlaza naluhlaza, kwaye ibuyela kubomvu.
Kutheni i-OKLCH itshintshe indlela endicinga ngayo ngoMbala Inkxaso yebrowser yendawo yombala ye-OKLCH ngoku ixhaphake, nokuba izixhobo zokuyila - kuquka i-Sketch - azizange zibambe. Ngethamsanqa, oko akufanele kukuyekise ukusebenzisa i-OKLCH. Abakhangeli bayakuguqula ngovuyo iHex, HSL, LAB, kunye neRGB ixabiso libe yiOKLCH kuwe. Ungayichaza ipropathi yesiko leCSS ngombala wesiseko nakweyiphi na indawo, kuquka iHex: /* Umbala wesiseko */ --isiseko: #5accd6;
Nayiphi na imibala ethathwe kuyo iya kuguqulwa ibe yi-OKLCH ngokuzenzekelayo: --isiseko-ukukhanya: oklch(ukusuka var(--foundation) [...]; } --isiseko-phakathi: oklch(ukusuka var(--isiseko) [...]; } --isiseko-emnyama: oklch(ukusuka var(--isiseko) [...]; }
Umbala ozalanayo njengeNkqubo yoYilo Cinga ngombala onxulumeneyo njengothi: “Thabatha lo mbala, uwulungise, emva koko undinike isiphumo.” Kukho iindlela ezimbini zokuhlengahlengisa umbala: utshintsho olupheleleyo kunye nokutshintsha ngokulinganayo. Zijongeka ngokufanayo kwikhowudi, kodwa ziziphathe ngendlela eyahlukileyo xa uqala ukutshintsha imibala yesiseko. Ukuqonda loo mahluko yinto enokuguqula ukusebenzisa umbala ozalanayo ube yinkqubo. /* Umbala wesiseko */ --isiseko: #5accd6;
Ngokomzekelo, ixabiso lokukhanya kombala wam wesiseko ngu-0.7837, ngelixa inguqulo emnyama inexabiso le-0.5837. Ukubala umahluko, ndithabatha ixabiso eliphantsi kweliphezulu kwaye ndisebenzise isiphumo usebenzisa i-calc () umsebenzi: --isiseko-mnyama: oklch(ukusuka var(--foundation) calc(l - 0.20) c h);
Ukufezekisa umbala okhanyayo, ndongeza umahluko endaweni yoko: --isiseko-isibane: oklch(ukusuka var(--foundation) calc(l + 0.10) c h);
Chromauhlengahlengiso lulandela inkqubo efanayo. Ukunciphisa ubunzulu bombala wesiseko sam ukusuka ku-0.1035 ukuya ku-0.0035, ndithabatha ixabiso elinye kwelinye: oklch(ukusuka var(--foundation) I-calc (c - 0.10) h);
Ukwenza ipalethi yee-hues, ndibala umahluko phakathi kwexabiso le-hue lombala wam wesiseko (200) kunye ne-hue yam entsha (260): oklch(ukusuka var(--foundation) l c calc (h + 60));
Ezo zibalo zichanekile. Xa ndithabatha isixa esimiselweyo, nditsho ngokufanelekileyo, “Soloko ndisusa kakhulu.” Okufanayo kuyasebenza xa wongeza amaxabiso azinzileyo: icalc(c - 0.10) icalc(c + 0.10)
Ndifunde imida yale ndlela ngendlela enzima. Xa ndandithembele ekuthabatheni amaxabiso echroma azinzileyo, imibala iye yawa yaya ngwevu nje ukuba nditshintshe isiseko. Iphalethi eyayisebenza komnye umbala yahlukana komnye. Ukuphindaphinda kuziphethe ngokwahlukileyo. Xa ndiphinda-phinda ichroma, ndixelela isikhangeli: "Nciphisa ubunzulu balo mbala ngomlinganiselo." Ubudlelwane phakathi kwemibala buhlala buqinile, nokuba isiseko sitshintsha: icalc(c * 0.10)
Ukuyihambisa kwam, kuyilinganise, ukuyijikezisa ngokwemigaqo
Hambisa ukukhanya (yongeza okanye uthabathe), Isikali sechroma (phindaphindeka), Jikelezisa i-hue (yongeza okanye uthabathe amadigri).
Ndikala ichroma kuba ndifuna utshintsho lokuqina ukuze luhlale lulingana nombala wesiseko. Ubudlelwane be-Hue bujikeleza, ngoko ke ukuphindaphinda i-hue akunangqiqo. Ukukhanya kukuqonda kwaye kucacile - ukuphindaphinda kudla ngokuvelisa iziphumo ezingaqhelekanga.
Ukusuka kuMbala omnye ukuya kumxholo uphela Umbala ozalanayo undivumela ukuba ndichaze umbala wesiseko kwaye ndivelise wonke omnye umbala endiwufunayo-ukuzalisa, imivimbo, ukumisa i-gradient, izithunzi-ukusuka kuyo. Ngelo xesha, umbala uyayeka ukuba yi-palette kwaye uqala ukuba yinkqubo. Imizobo ye-SVG idla ngokuphinda isebenzise imibala embalwa efanayo kuzo zonke izizaliso, imivumbo, kunye neegradient. Umbala ozalanayo ukuvumela ukuba uchaze obo budlelwane kube kanye kwaye uphinde ulusebenzise kuyo yonke indawo - njengabo oopopayi baphinde basebenzisa imvelaphi ukwenza imiboniso emitsha.
Guqula umbala wesiseko kube kanye, kwaye yonke imibala efunyenweyo ihlaziya ngokuzenzekelayo, ngaphandle kokubala kwakhona nantoni na ngesandla. Ngaphandle kwemizobo epopayi, ndingasebenzisa le ndlela inye ukuchaza imibala yeemeko zezinto ezisebenzisanayo ezinjengamaqhosha kunye namakhonkco. Umbala wesiseko endiwusebenzisileyo kwisihloko sam seToon ethi "Lullabye-Bye Bear" yibhlowu ekhangeleka ngathi cyan. Ingasemva yi-radial gradient phakathi kwesiseko sam kunye noguqulelo olumnyama.
Ukwenza ezinye iinguqulelo ezinemo ehluke ngokupheleleyo, kufuneka nditshintshe kuphela umbala wesiseko: --isiseko: #5accd6; --grad-end: var (--foundation); --grad-start: oklch(ukusuka var(--foundation) calc(l - 0.2357) calc(c * 0.833) h);
Ukubophelela ezo propati zesiqhelo kwi-SVG yam igradient ngaphandle kokuphindaphinda amaxabiso ombala, nditshintshe amaxabiso ombala omisiweyo anekhowudi ngezitayile ezingaphakathi:
Okulandelayo, bekufuneka ndiqinisekise ukuba iSibhalo sam seToon sihlala sithelekisa nawuphi na umbala wesiseko endiwukhethayo. Ukujikeleza kwe-hue eyi-180deg kuvelisa umbala ohambelanayo ovela ngokuqinisekileyo - kodwa unokungcangcazela ngokungathandekiyo: .ukukhanya okubhaliweyo { zalisa: oklch(ukusuka var(--foundation) l c calc (h + 180)); }
Ukutshintsha kwe-90 ° kuvelisa umbala wesibini ocacileyo ngaphandle kokuhambelana ngokupheleleyo: .ukukhanya okubhaliweyo { zalisa: oklch(ukusuka var(--foundation) l c calc (h - 90)); }
Ukuzonwabisa kwam kwe-Quick Draw McGraw's 1959 Toon Title "El Kabong" isebenzisa ubuchule obufanayo kodwa ngephalethi eyohlukeneyo. Ngokomzekelo, kukho enye i-radial gradient phakathi kombala wesiseko kunye nomthunzi omnyama.
Isakhiwo kunye nomthi ngasemva ziimithunzi ezahlukeneyo zombala wesiseko ofanayo. Kwezo ndlela, bendifuna imibala emibini eyongezelelweyo yokuzalisa: .bg-phakathi { zalisa: oklch(ukusuka var(--foundation) calc(l - 0.04) calc(c * 0.91) h); }
.bg-mnyama { zalisa: oklch(ukusuka var(--foundation) calc(l - 0.12) calc(c * 0.64) h); }
Xa iziseko ziqala ukushukuma
Ukuza kuthi ga ngoku, yonke into endiyibonisileyo imile. Nokuba umntu usebenzisa isikhethi sombala ukutshintsha umbala wesiseko, olo tshintsho lwenzeka ngoko nangoko. Kodwa iigraphics ezinopopayi azifane zime ngxi - umkhondo usegameni. Ke, ukuba umbala uyinxalenye yenkqubo, akukho sizathu sokuba ayinakuphila, nayo.
Ukwenza umbala wesiseko, kufuneka kuqala ndiwahlule ube ngamajelo e-OKLCH- ukukhanya, i-chroma, kunye ne-hue. Kodwa kukho inyathelo elongezelelweyo elibalulekileyo: Kufuneka ndibhalise loo maxabiso njengeempawu zesiko elichwetheziweyo. Kodwa kuthetha ukuthini oko?
Ngokungagqibekanga, umkhangeli zincwadi akazi ukuba ixabiso lepropathi yesiko leCSS limele umbala, ubude, inombolo, okanye enye into ngokupheleleyo. Oko kuhlala kuthetha ukuba abanako ukungenelela ngokutyibilikayo ngexesha loopopayi, kwaye batsibe ukusuka kwelinye ixabiso ukuya kwelinye.
Ukubhalisa ipropati yesiko ixelela umkhangeli zincwadi uhlobo lwexabiso elimele kunye nendlela ekufuneka liziphathe ngayo ekuhambeni kwexesha. Kule meko, ndifuna isikhangeli siphathe itshaneli zam zombala njengamanani ukuze zibenoopopayi ngokutyibilikayo.
@property --f-l {
isintaksi: "
@property --f-c {
isintaksi: "
@property --f-h {
isintaksi: "
Nje ukuba zibhalisiwe, ezi propati zesiko ziziphatha njenge-CSS yomthonyama. Isikhangeli sinokuzidibanisa isakhelo-nge-isakhelo. Ndiye ndakha kwakhona umbala wesiseko ukusuka kula mijelo: --isiseko: oklch(var(--f-l) var(--f-c) var(--f-h));
Oku kwenza umbala wesiseko ubenobomi, njengalo naliphi na elinye ixabiso lamanani. Nalu upopayi olula “lokuphefumla” olutshintsha ngobunono ukukhanya ekuhambeni kwexesha: @keyframes phefumla { 0%, 100% { --f-l: 0.36; } 50% { --f-l: 0.46; } }
.toon-isihloko { oopopayi: phefumla i-10s ngokulula-ngaphakathi-ngaphandle okungapheliyo; }
Kuba wonke omnye umbala ekugcwaliseni, i-gradients, kunye nemivumbo ithathwe kwi--foundation, zonke ziphila kunye, kwaye akukho nto idinga ukuhlaziywa ngesandla. Umbala Oopopayi Mnye, Iimpembelelo Ezininzi Ekuqaleni kwale nkqubo, ndiye ndazibuza ukuba ingaba amaxabiso ombala weCSS anokubonelela ngamathuba amaninzi ngelixa esenza ukuba kube lula ukuwenza. Kutshanje ndongeze imvelaphi yegolide entsha kwiphepha lonxibelelwano lewebhusayithi yam, kwaye iteration yokuqala ibandakanya izibane zeoyile ezikhanyayo kwaye zijingi.
Bendifuna ukuphonononga ukuba ingaba imibala ehambelanayo yeCSS inokwenza njani na umgodi wangaphakathi ube yinyani ngokuwuthambisa ngemibala evela kwizibane. Ndandifuna ukuba zichaphazele ihlabathi elibangqongileyo, ngendlela elichaphazela ngayo ukukhanya kokwenene. Ke, endaweni yokubonisa imibala emininzi, ndiye ndakha isixokelelwano sokukhanyisa esincinci esenza umbala ube mnye.
Umsebenzi wam wokuqala yayikukubeka umaleko ongaphezulu phakathi kwemvelaphi kunye nezibane zam:
Ndisebenzise imowudi yokuxuba: umbala kuba oko kuthoba into engaphantsi kwayo ngelixa ugcina ukukhanya okungaphantsi. Njengoko ndifuna kuphela ukuba umaleko ubonakale xa oopopayi balayitiwe, ndenze umaleko wokukhetha ukungena: .svg-yam #ukwaleka { bonisa: akukho; }
@media (ikhetha-incitshisiwe-intshukumo: akukho-kukhetha) { .svg-mine[data-animations=on] #umaleko { bonisa: ibhloko; opacity: 0.5; } }
Ukwaleka kwakusendaweni, kodwa kwakungekadityaniswa nezibane. Bendifuna umthombo wokukhanya. Izibane zam zilula, kwaye nganye iqulethe isangqa endisifiphale ngesihluzo. Isihluzi sivelisa ukufiphala okuthambileyo ngaphezulu kwesangqa sonke.
Endaweni yokuphilisa isigqubuthelo kunye nezibane ngokwahlukeneyo, ndiphila ithokheni yombala omnye "wedangatye" kwaye ndifumana yonke enye into kuloo nto. Okokuqala, ndibhalisa iipropati ezintathu ezichwetheziweyo zesiko kwiitshaneli ze-OKLCH:
@property --fl-l {
isintaksi: "
Ndiziphilise ezo tshaneli, ngabom ndityhala iifreyimu ezimbalwa ukuya kwiorenji ukuze isibane sifundeke ngokucacileyo njengokukhanya komlilo:
@keyframes idangatye { 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; } }
Emva koko ndiye ndajonga loo mifanekiso kwi-SVG, ke iinguqu ekwabelwana ngazo ziyafumaneka kuzo zombini izibane kunye nokwaleka kwam:
@media (ikhetha-incitshisiwe-intshukumo: akukho-kukhetha) { .svg-mine[data-animations=on] { oopopayi: ilangatye 3.6s linear engenasiphelo; ukwahlukaniswa: ukwahlula;
/* Yakha umbala wedangatye kwiitshaneli ezinopopayi */ --idangatye: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Umbala wesibane ophuma kwidangatye */ --isibane-core: oklch (ukusuka var (--ilangatye) calc (l + 0.05) calc (c * 0.70) h);
/* Ukwaleka kwetinti ethatyathwe kwidangatye elifanayo */ --ukwaleka-tint: oklch(ukusuka var(--idangatye) calc (l + 0.06) calc (c * 0.65) calc (h - 10)); } }
Ekugqibeleni, ndasebenzisa loo mibala ifunyenwe kwizibane ezivuthayo kunye nokwaleka okuchaphazelayo: @media (ikhetha-incitshisiwe-intshukumo: akukho-kukhetha) { .svg-mine[data-animations=on] #isibane-emgodini-1 > isangqa, .svg-mine[data-animations=on] #isibane-emgodini-2 > isangqa { zalisa: var (--lamp-core); }
.svg-mine[data-animations=on] #umaleko { bonisa: ibhloko; zalisa: var(--overlay-tint); opacity: 0.5; } }
Xa ilangatye litshintsha lisiya kuorenji, izibane ziyafudumala, kwaye indawo iyafudumala. Xa ilangatye lipholile, yonke into ihlala kunye. Inxalenye engcono kukuba akukho nto ibhalwa ngesandla. Ukuba nditshintsha umbala wesiseko okanye nditshintshe amanqanaba opopayi omlilo, yonke inkqubo yokukhanyisa ihlaziywa ngaxeshanye. Ungasibona isiphumo sokugqibela kwiwebhusayithi yam. Sebenzisa kwakhona, yiNjongo kwakhona, uHlaziywe kwakhona Ezo zipopayi ze-Hanna-Barbera zanyanzeleka ukuba ziphinde zisebenzise izinto ngaphandle kwemfuneko, kodwa ndiphinda ndisebenzise imibala kuba yenza umsebenzi wam ungqinelane kwaye kulula ukuwugcina. Amaxabiso ombala ozalanayo we-CSS andivumela ukuba:
Chaza isiseko sombala omnye, Chaza ukuba eminye imibala inxulumana njani nayo, Sebenzisa kwakhona obo budlelwane kuyo yonke indawo, kwaye Philisa inkqubo ngokutshintsha ixabiso elinye.
Umbala ozalanayo awuwenzi nje ukubamba lula. Ikhuthaza indlela yokucinga apho umbala, njengokushukuma, unenjongo - kwaye apho ukuguqula ixabiso elinye kunokuguqula indawo yonke ngaphandle kokuphinda ubhale umsebenzi phantsi kwayo.
