Ke sa tsoa khatholla lits'oants'o tse bonts'itsoeng webosaeteng ea ka ka sehlooho se secha le sehlopha sa libapali tsa bopula-maliboho, ke sebelisa mekhoa e mengata eo ke e arolelaneng letotong lena. Tse ling tsa lipopae tsa ka li fetola chebahalo ha motho e mong a sebelisana le tsona kapa ka linako tse fapaneng tsa letsatsi.
Mebala e setšoantšong se kaholimo ho maqephe a ka a blog e fetoha ho tloha hoseng ho fihlela bosiu letsatsi le leng le le leng. Joale, ho na le mokhoa oa lehloa, o eketsang mebala e batang le sehlooho sa mariha, ka tlhompho ea lera le holimo le mokhoa oa ho kopanya.
Ha ke ntse ke sebetsa ho sena, ke ile ka qala ho ipotsa hore na boleng ba mebala ea CSS bo ka mpha taolo e eketsehileng ha ke ntse ke nolofatsa ts'ebetso. Tlhokomeliso: Thutong ena, ke tla shebana le boleng ba mebala e amanang le sebaka sa 'mala sa OKLCH bakeng sa litšoantšo tsa litšoantšo le litšoantšo. Haeba u batla ho qoela ka har'a 'mala o lekanyelitsoeng, Ahmad Shadeed o thehile tataiso e sebetsang hantle haholo. Ha e le libaka tsa mebala, li-gamuts, le OKLCH, Geoff Graham oa rona o ngotse ka tsona.
Tšebeliso ea makhetlo a mangata e ne e le ea bohlokoa. Mehaho e ne e sebelisoa hape neng kapa neng ha ho khonahala, 'me li-zoom le likoahelo li thusa ho haha litšoantšo tse ncha ho tsoa litšoantšong tse tšoanang. E tsoetsoe ke tlhokahalo, empa hape e ne e khothalletsa ho nahana ka letoto ho e-na le liketsahalo tsa motho ka mong. Bothata ba ho Nchafatsa Mebala ea Mebala ka Botsona Ha re tobane le phephetso ea ka. Ho Litlotla tsa Toon tse kang ena - e ipapisitse le sekheo sa 1959 Yogi Bear Show "Lullabye-Bye Bear" - mme mosebetsi oa ka ka kakaretso, lipalete li lekanyelitsoe ho mebala e seng mekae e khethiloeng.
Ke etsa li-shades le li-tints ho tloha ho seo ke se bitsang 'mala oa "motheo" oa ho atolosa phalete ntle le ho eketsa mebala e mengata.
Ho Sketch, ke sebetsa sebakeng sa 'mala sa HSL, kahoo ts'ebetso ena e kenyelletsa ho eketsa kapa ho fokotsa boleng bo bobebe ba' mala oa ka oa motheo. Ka 'nete, ha se mosebetsi o boima - empa ho khetha 'mala o fapaneng oa motheo ho hloka ho theha sete e ncha ea li-shades le masela. Ho etsa joalo ka letsoho, khafetsa, ka potlako ho ba boima.
Ke boletse HSL - H (hue), S (saturation), le L (lightness) - sebaka sa mebala, empa ke e 'ngoe ea litsela tse' maloa tsa ho hlalosa 'mala. RGB - R (e khubelu), G (e tala), B (putsoa) - mohlomong ke eona e tloaelehileng ka ho fetisisa, bonyane ka mokhoa oa eona oa Hex. Ho boetse ho na le LAB - L (lightness), A (botala-bofubelu), B (blue-yellow) - le e ncha, empa hona joale e tšehetsoa ka bophara LCH - L (lightness), C (chroma), H (hue) - mohlala ka mokhoa oa eona oa OKLCH. Ka LCH - ka ho khetheha OKLCH ho CSS - ke khona ho fetola boleng bo bobebe ba 'mala oa ka oa motheo.
Kapa nka fetola chroma ea eona. LCH chroma le HSL saturation ka bobeli li hlalosa ho teba kapa ho nona ha 'mala, empa li etsa joalo ka litsela tse fapaneng. LCH e mpha mefuta e mengata e fapaneng le ho kopanya mebala e hlakileng haholoanyane.
Hape nka fetola 'mala ho etsa palo ea mebala e arolelanang khanya le boleng ba chroma. Ho HSL le LCH ka bobeli, 'mala o mofubelu o qala ho khubelu, o fetela ho botala le boputsoa, 'me o khutlela ho khubelu.
Ke Hobane'ng ha OKLCH e Fetotse Kamoo ke Nahanang ka 'Mala Ts'ehetso ea sebatli bakeng sa sebaka sa 'mala sa OKLCH e se e atile, leha lisebelisoa tsa moralo - ho kenyeletsoa Sketch - ha li so fihle. Ka lehlohonolo, seo ha sea lokela ho u thibela ho sebelisa OKLCH. Libatli li tla thabela ho fetolela boleng ba Hex, HSL, LAB, le RGB hore e be OKLCH molemong oa hau. O ka hlalosa thepa ea tloaelo ea CSS e nang le 'mala oa motheo sebakeng sefe kapa sefe, ho kenyeletsoa Hex: /* Mmala oa motheo */ --motheo: #5accd6;
Mebala efe kapa efe e nkiloeng ho eona e tla fetoloa OKLCH ka bo eona: --foundation-light: oklch(ho tloha var(--foundation) [...]; } --motheo-bohareng: oklch(ho tloha var(--foundation) [...]; } --foundation-lefifi: oklch(ho tloha var(--foundation) [...]; }
Mmala o Lekaneng Jwalo ka Tsamaiso ya Moralo Nahana ka 'mala o lekanyelitsoeng o re: "Nka 'mala ona, u o fetole, ebe u mpha sephetho." Ho na le mekhoa e 'meli ea ho fetola' mala: liphetoho tse felletseng le liphetoho tse lekantsoeng. Li shebahala li tšoana ka khoutu, empa li itšoara ka tsela e fapaneng haholo hang ha u qala ho fapanyetsana mebala ea motheo. Ho utloisisa phapang eo ke hona ho ka fetolang ho sebelisa mebala e amanang le sistimi. /* Mmala oa motheo */ --motheo: #5accd6;
Mohlala, boleng bo bobebe ba 'mala oa ka oa motheo ke 0.7837, athe mofuta o lefifi o na le boleng ba 0.5837. Ho bala phapang, ke tlosa boleng bo tlase ho bo holimo ebe ke sebelisa sephetho ke sebelisa calc() function: --motheo-lefifi: oklch(ho tloha var(--foundation) calc(l - 0,20) c h);
Ho fumana 'mala o bobebe, ke eketsa phapang ho fapana le moo: --foundation-light: oklch(ho tloha var(--foundation) calc(l + 0.10) c h);
Chromalitokiso li latela mokhoa o ts'oanang. Ho fokotsa botebo ba 'mala oa ka oa motheo ho tloha ho 0.1035 ho isa ho 0.0035, ke tlosa boleng bo le bong ho bo bong: oklch(ho tloha var(--foundation) l calc(c - 0.10) h);
Ho theha phalete ea mebala, ke bala phapang lipakeng tsa boleng ba 'mala oa motheo oa ka (200) le hue ea ka e ncha (260): oklch(ho tloha var(--foundation) l c calc (h + 60));
Lipalo tseo ke tse phethahetseng. Ha ke tlosa chelete e behiloeng, ke bua ka nepo, "Kamehla u tlose haholo." Hoa sebetsa le ha u eketsa boleng bo tsitsitseng: calc(c - 0.10) calc(c + 0.10)
Ke ithutile meeli ea mokhoa ona ka tsela e thata. Ha ke ne ke itšetleha ka ho tlosa boleng bo tsitsitseng ba chroma, mebala e ile ea putlama hang ha ke fetola motheo. Palete e sebetsang bakeng sa 'mala o mong e ile ea oela ho e mong. Ho atisa ho itšoara ka tsela e fapaneng. Ha ke atisa chroma, ke bolella sebatli: "Fokotsa matla a 'mala ona ka tekanyo." Kamano pakeng tsa mebala e lula e tiile, le ha motheo o fetoha: calc(c * 0.10)
E Tsamaise, E Lekanye, Fetola Melao
Tsamaisa bobebe (eketsa kapa fokotsa), Sekala sa chroma (ngatafatsa), Fetola hue (eketsa kapa tlosa likhato).
Ke lekanya chroma hobane ke batla liphetoho tsa matla hore li lule li lekana le 'mala oa motheo. Likamano tsa Hue lia potoloha, kahoo ho atisa hue ha ho na kelello. Ho khanya hoa utloahala ebile hoa utloahala - ho e atisa hangata ho hlahisa liphello tse sa tloaelehang.
Ho tloha ho 'Mala o le Mong ho ea ho Sehlooho se Felletseng 'Mala o amanang o ntumella ho hlalosa' mala oa motheo le ho hlahisa 'mala o mong le o mong oo ke o hlokang - ho tlatsa, lichapo, ho ema ha gradient, meriti - ho tloha ho eona. Ka nako eo, 'mala o khaotsa ho ba palete' me o qala ho ba tsamaiso. Lipapiso tsa SVG li tloaetse ho sebelisa mebala e 'maloa e tšoanang ho tlatsa, liropo le likhahla. Mmala o amanang o o lumella ho hlalosa likamano tseo hang le ho li sebelisa hape hohle - joalo ka lipopae tse sebelisitseng nalane hape ho theha liketsahalo tse ncha.
Fetola 'mala oa motheo hang,' me 'mala o mong le o mong o nkiloeng o inchafatsa, ntle le ho bala letho ka letsoho. Ka ntle ho li-graphics tse phelang, nka sebelisa mokhoa ona ho hlalosa mebala bakeng sa likarolo tsa likaroloana tse kang likonopo le lihokelo. 'Mala oa motheo oo ke o sebelisitseng ho "Lullabye-Bye Bear" Toon Title ea ka ke 'mala o moputsoa o shebahalang o le cyan. Ka morao ke radial gradient lipakeng tsa motheo oa ka le mofuta o lefifi.
Ho theha mefuta e meng e nang le maikutlo a fapaneng ka ho felletseng, ke hloka feela ho fetola 'mala oa motheo: --motheo: #5accd6; --grad-end: var(--foundation); --grad-start: oklch(ho tloha var(--foundation) calc(l - 0.2357) calc(c * 0.833) h);
Ho kopanya thepa eo ea tloaelo ho gradient ea ka ea SVG ntle le ho kopiletsa boleng ba mebala, ke ile ka nkela boleng ba 'mala o thata oa ho emisa ka li-styles tsa inline:
Ka mor'a moo, ke ne ke hloka ho etsa bonnete ba hore Toon Text ea ka e lula e fapana le 'mala ofe kapa ofe oa motheo oo ke o khethang. Potoloho ea 180deg hue e hlahisa 'mala o tlatsanang oo ka sebele o hlahang - empa o ka thothomela hampe: .leseli la mongolo { tlatsa: oklch(ho tloha var(--foundation) l c calc (h + 180)); }
Phetoho ea 90 ° e hlahisa 'mala o hlakileng oa bobeli ntle le ho tlatsana ka botlalo: .leseli la mongolo { tlatsa: oklch(ho tloha var(--foundation) l c calc (h - 90)); }
Papali ea ka ea Quick Draw McGraw's 1959 Toon Title "El Kabong" e sebelisa mekhoa e ts'oanang empa e na le phalete e fapaneng. Ka mohlala, ho na le gradient e 'ngoe ea radial pakeng tsa' mala oa motheo le moriti o lefifi.
Mohaho le sefate ka morao ke meriti e fapaneng feela ea 'mala oa motheo o tšoanang. Bakeng sa litsela tseo, ke ne ke hloka mebala e 'meli ea ho tlatsa: .bg-bohareng { tlatsa: oklch(ho tloha var(--foundation) calc(l - 0.04) calc(c * 0.91) h); }
.bg-fifi { tlatsa: oklch(ho tloha var(--foundation) calc(l - 0.12) calc(c * 0.64) h); }
Ha Metheo e Qala ho Tsamaea
Ho fihlela joale, ntho e 'ngoe le e' ngoe eo ke e bontšitseng e ntse e tsitsitse. Esita le ha motho a sebelisa sekhetho sa mebala ho fetola 'mala oa motheo, phetoho eo e etsahala hang-hang. Empa lits'oants'o tse bonts'itsoeng ha li eme hangata - leseli le ka lebitso. Kahoo, haeba 'mala e le karolo ea tsamaiso, ha ho na lebaka leo e ke keng ea phelisa, hape.
Ho phelisa 'mala oa motheo, ke hloka ho o arola ka likanale tsa oona tsa OKLCH- bobebe, chroma le 'mala. Empa ho na le mohato oa bohlokoa o eketsehileng: Ke hloka ho ngolisa litekanyetso tseo e le thepa ea tloaelo e thaepileng. Empa hoo ho bolela’ng?
Ka ho sa feleng, sebatli ha se tsebe hore na boleng ba thepa ea CSS bo emela 'mala, bolelele, nomoro kapa ntho e' ngoe ka botlalo. Seo hangata se bolela hore li ke ke tsa kenyelletsoa hantle nakong ea lipopae, 'me li tlole ho tloha boleng bo bong ho ea ho bo bong.
Ho ngolisa thepa e tloaelehileng ho bolella sebatli mofuta oa boleng boo e se emelang le hore na se lokela ho itšoara joang ha nako e ntse e ea. Tabeng ena, ke batla hore sebatli se tšoare liteishene tsa ka tsa mebala e le linomoro e le hore li ka phetoa hantle.
@thepa --f-l {
syntax: "
@thepa --f-c {
syntax: "
@thepa --f-h {
syntax: "
Ha e se e ngolisitsoe, thepa ena ea moetlo e sebetsa joalo ka CSS ea matsoalloa. Sebatli se ka li kopanya ka foreimi ka foreimi. Ka mor'a moo ke tsosolosa 'mala oa motheo ho tloha liteisheneng tseo: --motheo: oklch(var(--f-l) var(--f-c) var(--f-h));
Sena se etsa hore 'mala oa motheo o phele, joalo ka boleng bo bong le bo bong ba linomoro. Mona ke animation e bonolo ea "phefumoloho" e fetolang bobebe ka nako: @keyframes phefumoloha { 0%, 100% { --f-l: 0,36; } 50% { --f-l: 0,46; } }
.toon-title { animation: phefumoloha 10s boiketlo-in-tsoa ho sa feleng; }
Hobane 'mala o mong le o mong oa li-fill, gradients, le stroke o tsoa ho --foundation, kaofela li phela hammoho, 'me ha ho letho le hlokang ho ntlafatsoa ka letsoho. 'Mala o le Mong oa Animated, Liphello Tse Ngata Qalong ea ts'ebetso ena, ke ile ka ipotsa hore na boleng ba mebala ea CSS bo ka fana ka menyetla e mengata ha bo ntse bo etsa hore ho be bonolo ho e sebelisa. Haufinyane tjena ke kentse semelo se secha sa merafo ea khauta leqepheng la ho ikopanya le sebaka sa ka sa marang-rang, 'me polelo ea pele e ne e kenyelletsa mabone a oli a khanyang le a sisinyehang.
Ke ne ke batla ho hlahloba hore na mebala e amanang le CSS e ka etsa hore bokahare ba morafo e be ba sebele haholoanyane ka ho bo taka ka mebala e tsoang maboneng. Ke ne ke batla hore li ame lefatše le li potolohileng, ka tsela eo leseli la sebele le etsang ka eona. Kahoo, ho e-na le ho phelisa mebala e mengata, ke ile ka haha sistimi e nyane ea mabone e phelisang 'mala o le mong.
Mosebetsi oa ka oa pele e ne e le ho beha lesela le koaheletsoeng lipakeng tsa bokamorao le mabone a ka:
Ke ne ke sebelisa mokhoa oa ho kopanya: 'mala hobane o nyenyefatsa se ka tlase ho oona ha o ntse o boloka leseli le ka tlase. Kaha ke batla feela hore sekoahelo se bonahale ha lipopae li buletsoe, ke ile ka khetha ho kena ka holimo: .svg-mine # overlay { pontšo: ha ho letho; }
@media (ho khetha-ho fokotsoa-ho sisinyeha: ha ho khethoe) { .svg-mine[data-animations=on] # overlay { pontšo: thibela; opacity: 0,5; } }
Sekoahelo se ne se le teng, empa se e-so hokahane le mabone. Ke ne ke hloka mohloli oa leseli. Mabone a ka a bonolo, 'me e' ngoe le e 'ngoe e na le ntho e selikalikoe eo ke ileng ka e fifatsa ka sefe. Sesefa se hlahisa lerootho le bonolo haholo holim'a selikalikoe sohle.
Sebakeng sa ho phelisa sekoaelo le mabone ka thoko, ke phelisa letšoao le le leng la "malakabe" mme ke fumana ntho e ngoe le e ngoe ho tsoa ho seo. Taba ea pele, ke ngolisa thepa e meraro e thaepileng bakeng sa liteishene tsa OKLCH:
@thepa --fl-l {
syntax: "
Ke ile ka phelisa likanale tseo, ke sutumelletsa liforeimi tse 'maloa ka boomo ho ea ho lamunu hore sefilimi se balehe hantle joalo ka lebone la mollo:
@keyframes lelakabe { 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; } }
Eaba ke hlahlobisisa animation eo ho SVG, kahoo mefuta e arolelanoang e fumaneha ho mabone le sekoaelo sa ka:
@media (ho khetha-ho fokotsoa-ho sisinyeha: ha ho khethoe) { .svg-mine[data-animations=on] { animation: lelakabe 3.6s infinite linear; ho itšehla thajana: ho itšehla thajana;
/* Theha 'mala oa lelakabe ho likanale tse phelang */ --flame: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Mmala oa lebone o tsoang ho lelakabe */ --lamp-core: oklch(ho tloha var(--flame) calc(l + 0.05) calc(c * 0.70) h);
/* Lesela le koaheletsoeng le tsoang lelakabe le tšoanang */ --overlay-tint: oklch(ho tloha var(--flame) calc(l + 0.06) calc(c * 0.65) calc(h - 10)); } }
Qetellong, ke ile ka sebelisa mebala eo e nkiloeng ho mabone a khanyang le mokhabiso oo a o amang: @media (ho khetha-ho fokotsoa-ho sisinyeha: ha ho khethoe) { .svg-mine[data-animations=on] #mine-lamp-1 > selikalikoe, .svg-mine[data-animations=on] #mine-lamp-2 > selikalikoe { tlatsa: var(--lamp-core); }
.svg-mine[data-animations=on] # overlay { pontšo: thibela; tlatsa: var(--overlay-tint); opacity: 0,5; } }
Ha lelakabe le leba 'mala oa lamunu, mabone aa futhumala, 'me sebaka seo sea futhumala. Ha lelakabe le pholile, ntho e 'ngoe le e' ngoe e lula hammoho. Karolo e molemohali ke hore ha ho letho le ngotsoeng ka letsoho. Haeba ke fetola 'mala oa motheo kapa ke fetola mebala ea animation ea lelakabe, sistimi eohle ea mabone e tla ntlafatsoa ka nako e le ngoe. U ka bona sephetho sa ho qetela webosaeteng ea ka. Sebelisa hape, Reka hape, E hlahlojoe bocha Libapali tseo tsa Hanna-Barbera li ile tsa qobelloa ho sebelisa likarolo hape ka lebaka la tlhokahalo, empa ke sebelisa mebala hape hobane e etsa hore mosebetsi oa ka o tsitsane le ho o hlokomela habonolo. Maemo a CSS a amanang le 'mala a ntumella ho:
Hlalosa 'mala oa motheo o le mong, Hlalosa hore na mebala e meng e amana joang le eona, Sebelisa likamano tseo hape hohle, le Phelisa sistimi ka ho fetola boleng bo le bong.
'Mala o amanang ha o etse hore ho be bonolo feela. E khothaletsa mokhoa oa ho nahana moo 'mala, joalo ka ho sisinyeha, o ikemiselitseng - mme moo ho fetola boleng bo le bong ho ka fetolang ketsahalo eohle ntle le ho ngola mosebetsi o ka tlase ho eona.
