Ke sa tswa go tsosolosa dikerafo tsa dipopae mo webosaeteng ya me ka setlhogo se sesha le setlhopha sa badiragatsi ba ba bulatsela, ke dirisa mekgwa e le mentsi e ke e abelaneng mo motseletseleng ono. Ditshwantsho tsa me di le mmalwa tse di tshelang di fetoga tebego fa mongwe a dirisana le tsone kgotsa ka dinako tse di farologaneng tsa letsatsi.
Mebala e e mo kerafong e e kwa godimo ga ditsebe tsa me tsa blog e fetoga go tloga mo mosong go fitlha bosigo letsatsi le letsatsi. Go tswa foo, go na le mokgwa wa kapoko, o o oketsang mebala e e tsididi le setlhogo sa mariga, ka ntlha ya llaga e e apesitsweng le mokgwa wa go tlhakanya.
Fa ke ntse ke dira mo go seno, ke ne ka simolola go ipotsa gore a boleng jwa mmala wa CSS bo ka nnaya taolo e e oketsegileng fa gape bo nolofatsa thulaganyo. Ela tlhoko: Mo thutong eno, ke tla tlhoma mogopolo mo boleng jwa mmala jo bo amanang le sebaka sa mmala wa OKLCH sa dikerafo le ditshwantsho tse di nang le ditlhogo. Fa o batla go tsenelela kwa teng mo mmaleng o o amanang, Ahmad Shadeed o tlhamile kaedi e e dirisanang e e gaisang. Fa e le ka diphatlha tsa mebala, di-gamut le OKLCH, Geoff Graham wa rona o ne a kwala ka tsone.
Go dirisa dielemente gangwe le gape e ne e le selotlolo. Ditshwantsho tsa lemorago di ne di dirisiwa gape fa go kgonega, ka di- zoom le di- overlay di thusa go aga ditshwantsho tse disha go tswa mo tirong e le nngwe ya botaki. E ne e tshotswe ka ntlha ya go tlhokega, mme gape e ne e rotloetsa go akanya ka motseletsele wa ditiragalo go na le go akanya ka ditiragalo ka bongwe. Bothata jwa go Ntšhwafatsa Diphalete tsa Mebala ka Seatla A re tlhamaleleng kwa kgwetlhong ya me. Mo Ditlhogong tsa Toon tse di tshwanang le eno — tse di theilweng mo tiragalong ya Yogi Bear Show ya 1959 ya “Lullabye-Bye Bear” — le tiro ya me ka kakaretso, diphalete di lekanyeditswe go mebala e le mmalwa e e tlhophilweng.
Ke dira meriti le mebala go tswa mo go se ke se bitsang mmala wa me wa “motheo” go atolosa phalete kwantle ga go oketsa mebala e mengwe.
Mo Sketch, ke bereka mo sebakeng sa mmala wa HSL, ka jalo thulaganyo eno e akaretsa go oketsa kgotsa go fokotsa boleng jwa botlhofo jwa mmala wa me wa motheo. Go bua boammaaruri, ga se tiro e e bokete — mme go tlhopha mmala o o farologaneng wa motheo go tlhoka go tlhama sete e ntšha ya meriti le mebala. Go dira seo ka diatla, gangwe le gape, go nna tiro e e bokete ka bonako.
Ke umakile HSL — H (mmala), S (go tlala), le L (botlhofo) — sebaka sa mmala, mme seo ke nngwe ya ditsela di le mmalwa tsa go tlhalosa mmala. RGB - R (khubelu), G (tala), B (putsoa) - ke mohlomong e tlwaelehileng ka ho fetisisa, bonyane ka sebopeho sa lona sa Hex. Gape go na le LAB — L (botlhofo), A (botala–bohibidu), B (botala jwa loapi–bosetlha) — le e ntšhwa, mme jaanong e tshegediwa thata ke LCH — L (botlhofo), C (chroma), H (hue) — ka sebopego sa yone sa OKLCH. Ka LCH — ka tlhamalalo OKLCH mo CSS — ke kgona go fetola boleng jwa botlhofo jwa mmala wa me wa motheo.
Kana nka fetola chroma ya yone. LCH chroma le HSL saturation ka bobedi di tlhalosa maatla kgotsa khumo ya mmala, fela di dira jalo ka ditsela tse di farologaneng. LCH e mpha mefuta e e anameng le go kopanya go go ka bonelwang pele magareng ga mebala.
Gape nka fetola mmala go dira phalete ya mebala e e nang le boleng jo bo tshwanang jwa botlhofo le jwa chroma. Mo HSL le LCH ka bobedi, sebopego sa mmala se simolola ka bohibidu, se tsamaya mo botala le botala jwa legodimo, mme se boela kwa bohibidung.
Goreng OKLCH e Fetotse Tsela e ke Akanyang ka yone ka Mmala Tshegetso ya sebatli ya sebaka sa mmala sa OKLCH jaanong e aname, le fa didirisiwa tsa go tlhama — go akaretsa le Sketch — di ise di tshware. Ka lesego, seo ga se a tshwanela go go thibela go dirisa OKLCH. Dibatli di tla go fetolela boleng jwa Hex, HSL, LAB, le RGB ka boitumelo go nna OKLCH. O ka tlhalosa popego ya CSS e e nang le mmala wa motheo mo sebakeng sepe fela, go akaretsa le Hex: /* Mmala wa motheo */ --motheo: #5accd6;
Mebala epe e e tswang mo go yone e tla fetolelwa go nna OKLCH ka go itirisa: --motheo-lesedi: oklch(go tswa go var(--motheo) [...]; } --motheo-bogare: oklch(go tswa go var(--motheo) [...]; } --motheo-lefifi: oklch(go tswa go var(--motheo) [...]; }
Mmala o o Amanang Jaaka Thulaganyo ya Moakanyetso Akanya ka mmala o o amanang le one jaaka fa o re: “Tsaya mmala ono, o o fetole, o bo o mpha sephetho.” Go na le ditsela tse pedi tsa go baakanya mmala: diphetogo tse di feletseng le diphetogo tse di lekanang. Di lebega di tshwana ka khoutu, fela di itshwara ka tsela e e farologaneng thata fa o simolola go ananya mebala ya motheo. Go tlhaloganya pharologano eo ke sone se se ka fetolang go dirisa mmala o o amanang go nna thulaganyo. /* Mmala wa motheo */ --motheo: #5accd6;
Ka sekai, boleng jwa botlhofo jwa mmala wa me wa motheo ke 0.7837, fa mofuta o o fifetseng o na le boleng jwa 0.5837. Go balelela pharologano, ke ntsha boleng jo bo kwa tlase mo go jo bo kwa godimo mme ke dirisa sephetho ke dirisa tiro ya calc(): --motheo-lefifi: oklch(go tswa go var(--motheo) khalc (l - 0,20) h);
Go fitlhelela mmala o o botlhofo, ke tsenya pharologano boemong jwa seo: --motheo-lesedi: oklch(go tswa go var(--motheo) khalc (l + 0,10) c h);
Mmaladiphetogo di latela thulaganyo e e tshwanang. Go fokotsa bogale jwa mmala wa me wa motheo go tswa go 0.1035 go ya go 0.0035, ke ntsha boleng bo le bongwe mo go jo bongwe: oklch(go tswa go var(--motheo) l palo (c - 0,10) h);
Go dira phalete ya mebala, ke bala pharologanyo fa gare ga boleng jwa mmala wa mmala wa me wa motheo (200) le mmala wa me o mosha (260): oklch(go tswa go var(--motheo) l c palo (h + 60));
Dipalopalo tseo di feletse. Fa ke ntsha selekanyo se se rileng, ke raya gore, “Ka metlha ntsha selekanyo seno.” Go ntse fela jalo le fa o tsenya boleng jo bo tlhomameng: khalekhule(c - 0.10) khalc(c + 0.10)
Ke ne ka ithuta melelwane ya tsela eno ka tsela e e thata. Fa ke ne ke ikaegile ka go ntsha boleng jo bo tlhomameng jwa chroma, mebala e ne ya phutlhama go ya kwa bosetlha fela fa ke fetola motheo. Phalete e e neng e berekela mmala o mongwe e ne ya wela mo go o mongwe. Go atisa go itshwara ka tsela e e farologaneng. Fa ke atisa chroma, ke bolelela sebatli jaana: “Fokotsa bogale jwa mmala ono ka selekanyo se se rileng.” Kamano fa gare ga mebala e nna e le teng, le fa motheo o fetoga: khalekhule(c * 0.10)
Melao ya Me ya go E Sutisa, go E Lekanya, go E Dikolosa
Sutisa botlhofo (tlhakanya kgotsa ntsha), Sekale sa chroma (atisa), Dikolosa mmala (tsenya kgotsa ntsha didikirii).
Ke lekanya chroma ka gonne ke batla gore diphetogo tsa maatla di nne di lekana le mmala wa motheo. Dikamano tsa mmala di a dikologa, ka jalo go atisa mmala ga go dire tlhaloganyo. Botlhofo bo a lemogiwa e bile bo feletse — go bo atisa gantsi go ntsha dipholo tse di sa tlwaelegang.
Go tswa go Mmala o le Mongwe Go ya go Setlhogo sotlhe Mmala o o amanang o ntetlelela go tlhalosa mmala wa motheo le go tlhagisa mmala mongwe le mongwe o mongwe o ke o tlhokang — go tlatsa, go tshwara, go ema ga gradient, meriti — go tswa mo go one. Ka nako eo, mmala o emisa go nna phalete mme o simolola go nna thulaganyo. Ditshwantsho tsa SVG di na le go dirisa gape mebala e le mmalwa e e tshwanang go ralala ditlatso, dipopego le di-gradient. Mmala o o amanang o go letla go tlhalosa dikamano tseo gangwe fela le go di dirisa gape gongwe le gongwe — fela jaaka batshwantshi ba dirisa gape lemorago go tlhama ditiragalo tse disha.
Fetola mmala wa motheo hang, mme mmala o mong le o mong o fumanwang o ntjhafatswa ka ho iketsahalla, ntle le ho bala ntho hape ka letsoho. Kwa ntle ga dikerafiki tse di tshelang, ke ne ke ka dirisa mokgwa ono go tlhalosa mebala ya maemo a dielemente tse di dirisanang tse di jaaka dikonopo le dikgokagano. Mmala wa motheo o ke o dirisitseng mo Setlhogong sa me sa Toon sa “Lullabye-Bye Bear” ke mmala o o lebegang o le botala jwa loapi. Lemorago ke mothalo wa radial fa gare ga motheo wa me le mofuta o o lefifi.
Go tlhama mefuta e mengwe e e nang le maikutlo a a farologaneng gotlhelele, ke tlhoka fela go fetola mmala wa motheo: --motheo: #5accd6; --grad-bokhutlo: var (--motheo); --grad-tshimologo: oklch(go tswa go var(--motheo) palo (l - 0,2357) palo (c * 0,833) h);
Go bofa dipopego tseo tse di tlwaelegileng mo mothalong wa me wa SVG kwantle ga go boeletsa boleng jwa mmala, ke emiseditse boleng jwa mmala wa go ema jo bo nang le khoutu e e thata ka ditaele tse di mo moleng:
Morago ga moo, ke ne ke tlhoka go tlhomamisa gore Toon Text ya me ka metlha e farologana le mmala ope fela wa motheo o ke o tlhophang. Go dikologa ga mmala wa 180deg go ntsha mmala o o tlaleletsang o o tlhagelelang ruri — mme o ka roroma o sa phuthologa: .lesedi la sekwalwa { tlatsa: oklch (go tswa go var (-- motheo) l c palo (h + 180)); }
Go fetoga ga 90° go ntsha mmala o o tlhamaletseng wa bobedi kwantle ga go tlaleletsana ka botlalo: .lesedi la sekwalwa { tlatsa: oklch (go tswa go var (-- motheo) l c palo (h - 90)); }
Boitlosobodutu jwa me jwa Setlhogo sa Toon sa 1959 sa ga Quick Draw McGraw “El Kabong“ bo dirisa mekgwa e e tshwanang mme ka phalete e e farologaneng. Ka sekai, go na le mothalo o mongwe wa radial fa gare ga mmala wa motheo le moriti o o fifetseng.
Kago le setlhare se se kwa morago ke meriti e e farologaneng fela ya mmala o o tshwanang wa motheo. Mo ditseleng tseo, ke ne ke tlhoka mebala e mengwe e mebedi ya go tlatsa: .bg-bogare { tlatsa: oklch (go tswa go var (-- motheo) palo (l - 0,04) palo (c * 0,91) h); }
.bg-lefifi { tlatsa: oklch (go tswa go var (-- motheo) palo (l - 0,12) palo (c * 0,64) h); }
Fa Metheo e Simolola go Suta
Go tla go fitlha jaanong, sengwe le sengwe se ke se bontshitseng se ntse se sa fetoge. Le fa mongwe a dirisa sedirisiwa sa go tlhopha mmala go fetola mmala wa motheo, phetogo eo e diragala ka yone nako eo. Empa dikerafike diphoofolo ka seoelo ema sa tsi - le motlhala o ka lebitso. Ka jalo, fa mmala e le karolo ya thulaganyo, ga go na lebaka la gore le one o se ka wa tshela.
Go dira gore mmala wa motheo o tshele, ke tlhoka go o kgaoganya pele ka ditšhanele tsa one tsa OKLCH .- bobebe, chroma, le mmala. Mme go na le kgato e nngwe e e botlhokwa: Ke tlhoka go kwadisa boleng joo jaaka dithoto tse di thaepilweng. Mme seo se kaya eng?
Ka thulaganyetsoruri, sebatli ga se itse gore a boleng jwa popego ya CSS bo emela mmala, boleele, nomoro, kgotsa sengwe se sele gotlhelele. Seo gantsi se raya gore ga di kgone go tsenngwa ka thelelo ka nako ya ditshwantsho, mme di tlole go tswa mo boleng bongwe go ya kwa go jo bo latelang.
Go kwadisa thoto e e tlwaelegileng go bolelela sebatli mofuta wa boleng jo bo bo emelang le gore bo tshwanetse go itshwara jang fa nako e ntse e tsamaya. Mo ntlheng eno, ke batla gore sebatli se tshware ditšhanele tsa me tsa mmala jaaka dinomoro gore di kgone go tshedisiwa ka thelelo.
@thoto --f-l {
popapolelo: "
@thoto --f-c {
popapolelo: "
@thoto --f-h {
popapolelo: "
Fa di setse di kwadisitswe, dithoto tseno tse di tlwaelegileng di itshwara jaaka CSS ya naga. Sebatli se ka di tsenya foreimi ka foreimi. Ke bo ke aga mmala wa motheo sesha go tswa mo ditšhaneleng tseo: --motheo: oklch (mofuta (--f-l) mofuta (--f-c) mofuta (--f-h));
Seno se dira gore mmala wa motheo o nne o o tshelang, fela jaaka boleng bongwe le bongwe jwa dipalo. Fano go na le setshwantsho se se bonolo sa “go hema” se se fetolang botlhofo ka bonolo fa nako e ntse e tsamaya: @diforeime tsa konokono di hema { 0%, 100% { 0,36; } 50% { --f-l: 0,46; } }
.setlhogo sa setshwantsho { ditshwantsho: hema 10s bonolo-ka-ntle e sa feleng; }
Ka gonne mmala mongwe le mongwe o mongwe mo ditlatsong, di-gradient, le di-stroke o tswa mo --foundation, tsotlhe di a tshela mmogo, mme ga go na sepe se se tlhokang go tlhabololwa ka diatla. Mmala o le Mongwe wa Diphologolo, Ditlamorago tse dintsi Kwa tshimologong ya thulaganyo eno, ke ne ke ipotsa gore a ditekanyetso tsa mmala wa CSS di ka ntsha dikgonagalo tse dintsi fa gape di dira gore go nne bonolo go di dirisa. Ke sa tswa go tsenya lemorago le lesha la moepo wa gauta mo tsebeng ya go ikgolaganya le webosaete ya me, mme poeletso ya ntlha e ne e akaretsa mabone a oli a a phatsimang le go akgega.
Ke ne ke batla go sekaseka kafa mebala ya CSS e e tshelang e ka dirang gore bokagare jwa moepo bo nne jwa mmatota ka gone ka go bo tshwaya ka mebala e e tswang mo diponeng. Ke ne ke batla gore di ame lefatshe le le di dikologileng, ka tsela e lesedi la mmatota le amang ka yone. Ka jalo, go na le go dira gore mebala e mentsi e tshele, ke ne ka aga thulaganyo e nnye ya go bonesa e e tshelang mmala o le mongwe fela.
Tiro ya me ya ntlha e ne e le go tsenya llaga e e apesitsweng fa gare ga lemorago le mabone a me:
Ke dirisitse mokgwa wa go tlhakanya: mmala ka gonne seo se dira gore se se kafa tlase ga sone se nne le mmala fa se ntse se boloka phatsimo e e ka fa tlase ga sone. Ka ke batla fela gore setshwantsho se bonale fa ditshwantsho di tobeditswe, ke dirile gore setshwantsho se tlhophe go tsena: .svg-moepo #go apesa { pontsho: ga go na; }
@media (e rata-motsamao o o fokoditsweng: ga e rate) { .svg-moepo[ditshwantsho-tsa-tshedimosetso=on] #go apesa { pontsho: boloko; go sa bonale sentle: 0.5; } }
Sekhurumetso se ne se le teng, mme se ise se golaganngwe le mabone. Ke ne ke tlhoka motswedi wa lesedi. Dipone tsa me di bonolo, mme nngwe le nngwe ya tsone e na le elemente ya sediko e ke e fifaditseng ka setlhotlhi. Setlhotlhi se ntsha go fifala go go bonolo thata mo sedikong sotlhe.
Go na le go tshedisa se se apesitsweng le mabone ka go kgaogana, ke tshedisa letshwao le le lengwe la mmala wa “kgabo” mme ke bona sengwe le sengwe se sengwe mo go seo. Sa ntlha, ke kwadisa dipopego tse tharo tse di thaepilweng tsa ditšhanele tsa OKLCH:
@thoto --fl-l {
popapolelo: "
Ke ne ka dira gore ditšhanele tseo di tshele, ke kgoromeletsa diforeime di le mmalwa ka boomo kwa mmala wa lamune gore go phatsima go balege sentle jaaka lesedi la molelo:
@kgabo ya diforeime tsa konokono { 0%, 100% { 0,86; ---c: 0,12; --go-h: 95; } 6% { ---botlhokwa: 0.91; ---c: 0,10; --go-h: 92; } 12% { ---botlhokwa: 0,83; ---c: 0,14; ---h-h: 100; } 18% { ---botlhokwa: 0,88; ---c: 0,11; ---go-h: 94; } 24% { ---botlhokwa: 0,82; ---c: 0,16; ---h-h: 82; } 30% { --boleele-l: 0.90; ---c: 0,12; --go-h: 90; } 36% { ---botlhokwa: 0,79; ---c: 0,17; ---h: 76; } 44% { ---botlhokwa: 0,87; ---c: 0,12; --go-h: 96; } 52% { ---botlhokwa: 0.81; ---c: 0,15; 102; } 60% { -boleele-l: 0.89; ---c: 0,11; --go-h: 93; } 68% { --botlhokwa: 0,83; ---c: 0,16; --go-h: 85; } 76% { --bofelo-l: 0,91; ---c: 0,10; ---go-h: 91; } 84% { -botlhokwa: 0,85; ---c: 0,14; ---go-h: 98; } 92% {-fl-l: 0,80; ---c: 0,17; ---h: 74; } }
Mme ke ne ka tsenya ditshwantsho tseo mo SVG, ka jalo diphetogo tse di abelanwang di teng mo maboneng le mo go apereng ga me:
@media (e rata-motsamao o o fokoditsweng: ga e rate) { .svg-moepo[ditshwantsho-tsa-tshedimosetso=on] { ditshwantsho: kgabo 3.6s mola o sa feleng; go itlhaola: go itlhaola;
/* Aga mmala wa kgabo go tswa mo ditšhaneleng tsa dipopae */ --kgabo: go siame (mofuta (--fl-l) mofuta (--fl-c) mofuta (--fl-h));
/* Mmala wa lebone o o tswang mo kgabong */ -lebone-motheo: oklch (go tswa go var (--kgabo) palo (l + 0.05) palo (c * 0.70) h);
/* Mmala wa go apesa o o tswang mo kgabong e le nngwe */ --go apesa-mmala: oklch(go tswa go var(--kgabo) palo (l + 0.06) palo (c * 0.65) palo (h - 10)); } }
La bofelo, ke ne ka dirisa mebala eo e e tswang mo go yone mo diponeng tse di phatsimang le mo selong se di se apesitseng: @media (e rata-motsamao o o fokoditsweng: ga e rate) { .svg-moepo[ditshwantsho-tsa-tshedimosetso=on] #moepo-lebone-1 > sediko, .svg-moepo[ditshwantsho-tsa-tshedimosetso=on] #lebone-la-moepo-2 > sediko { tlatsa: var (--lebone-motheo); }
.svg-moepo[ditshwantsho-tsa-tshedimosetso=on] #go apesa { pontsho: boloko; tlatsa: var (--go apesa-mmala); go sa bonale sentle: 0.5; } }
Fa kgabo e sutela kwa mmala wa namune, dipone di a thuthafala, mme pono e a thuthafala le tsone. Fa kgabo e tsidifala, sengwe le sengwe se a tlhomama mmogo. Se se molemo ke gore ga go na sepe se se kwadilweng ka diatla. Fa ke fetola mmala wa motheo kgotsa ke fetola mefuta ya ditshwantsho tsa kgabo, tsamaiso yotlhe ya go bonesa e a tlhabololwa ka nako e le nngwe. O ka bona dipholo tsa bofelo mo webosaeteng ya me. Tiriso Gape, Go Dirisiwa Gape, Go Etelwa Gape Batshwantshi bao ba Hanna-Barbera ba ne ba patelesega go dirisa dielemente sesha ka ntlha ya go tlhokega, mme nna ke dirisa mebala gape ka gonne seno se dira gore tiro ya me e tlhomame le go nna motlhofo go e tlhokomela. Boleng jwa mmala wa CSS bo ntetla go:
Tlhalosa mmala o le mongwe wa motheo, Tlhalosa kafa mebala e mengwe e amanang le yone ka gone, Dirisa dikamano tseo gape gongwe le gongwe, mme . Tshedisa tsamaiso ka go fetola boleng bo le bongwe.
Mmala o o amanang ga o dire fela gore go nne bonolo go dira setlhogo. E rotloetsa tsela ya go akanya fa mmala, jaaka motsamao, o leng ka maikaelelo — le fa go fetola boleng bo le bongwe go ka fetolang pono yotlhe ntle le go kwala gape tiro e e ka fa tlase ga yona.
