Ejirila m isiokwu ọhụrụ na otu ndị ọsụ ụzọ nweta ume ọhụrụ ndị eserese na webụsaịtị m, na-etinye ọtụtụ usoro m kesara n'usoro isiokwu a. Ụfọdụ n'ime ihe ngosi m na-agbanwe ọdịdị mgbe mmadụ na ha na-emekọrịta ihe ma ọ bụ n'oge dị iche iche nke ụbọchị.
Agba ndị dị na eserese dị n'elu ibe blọgụ m na-agbanwe site n'ụtụtụ ruo abalị kwa ụbọchị. Mgbe ahụ, enwere ọnọdụ snow, nke na-agbakwunye agba oyi na isiokwu oyi, site n'ikike nke mkpuchi mkpuchi na ọnọdụ ngwakọta.
Ka m na-arụ ọrụ na nke a, amalitere m iche ma ụkpụrụ agba agba CSS nwere ike inye m njikwa karịa ma na-eme ka usoro ahụ dị mfe. Mara: N'ime nkuzi a, m ga-elekwasị anya na ụkpụrụ agba agba na oghere OKLCH maka eserese eserese na ihe ngosi. Ọ bụrụ na ịchọrọ imikpu n'ime agba, Ahmad Shadeed mepụtara ezigbo ntụzịaka mmekọrịta. Banyere oghere agba, gamuts, na OKLCH, Geoff Graham nke anyị dere gbasara ha.
Ojiji nke ihe ugboro ugboro bụ isi. Ejigharịgharịrị ihe ndabere mgbe ọ bụla enwere ike, yana mbugharị na ihe mkpuchi na-enyere aka wulite ihe nkiri ọhụrụ site na otu ihe osise ahụ. Amụrụ ya site na mkpa, mana ọ gbakwara ume iche echiche n'usoro usoro karịa ihe nkiri n'otu n'otu. Nsogbu dị na iji aka na-emelite palette agba Ka anyị banye ozugbo na aka m. Na Aha Toon dị ka nke a - dabere na ihe ngosi 1959 Yogi Bear Show "Lullabye-Bye Bear" - yana ọrụ m n'ozuzu, palette nwere oke na agba ole na ole ahọpụtara.
M na-emepụta ndò na tints site na ihe m na-akpọ agba "ntọala" m iji gbasaa palette na-agbakwunyeghị ihe ndị ọzọ.
Na Sketch, m na-arụ ọrụ na oghere agba HSL, yabụ usoro a gụnyere ịba ụba ma ọ bụ ibelata uru dị nro nke agba ntọala m. N'ezie, ọ bụghị ọrụ siri ike - mana ịhọrọ agba ntọala dị iche na-achọ ịmepụta ụdị ndo na tints ọhụrụ. Iji aka eme nke ahụ, ugboro ugboro, na-agbasi mbọ ike ngwa ngwa.
Ekwuru m HSL — H (hue), S (saturation), na L (lightness) — oghere agba, mana nke ahụ bụ naanị otu n'ime ụzọ dị iche iche isi kọwaa agba. RGB - R (red), G (akwụkwọ ndụ akwụkwọ ndụ), B (acha anụnụ anụnụ) - nwere ike bụrụ nke a maara nke ọma, opekata mpe n'ụdị Hex ya. Enwekwara LAB - L (lightness), A (green-red), B (acha anụnụ anụnụ-edo edo) na nke ọhụrụ, mana ugbu a na-akwado LCH - L (ìhè), C (chroma), H (hue) - ụdị n'ụdị OKLCH ya. Site na LCH - kpọmkwem OKLCH na CSS - Enwere m ike ịhazigharị uru dị nro nke agba ntọala m.
Ma ọ bụ enwere m ike ịgbanwe chroma ya. LCH chroma na saturation HSL na-akọwa ịdị ike ma ọ bụ ụba nke agba, mana ha na-eme ya n'ụzọ dị iche iche. LCH na-enye m ngwakọta sara mbara yana nke enwere ike ibu amụma n'etiti agba.
Enwere m ike ịgbanwe hue ahụ iji mepụta palette agba na-ekekọrịta otu ìhè na ụkpụrụ chroma. Na ma HSL na LCH, ụdị hue na-amalite na ọbara ọbara, na-agafe na akwụkwọ ndụ akwụkwọ ndụ na-acha anụnụ anụnụ, wee laghachi na-acha uhie uhie.
Ihe kpatara OKLCH ji gbanwee ka m si eche maka agba Nkwado ihe nchọgharị maka oghere agba OKLCH zuru ebe niile ugbu a, ọbụlagodi na ngwaọrụ imewe - gụnyere Sketch - enwetabeghị. Ọ dabara nke ọma, nke ahụ agaghị egbochi gị iji OKLCH. Ihe nchọgharị ga-eji obi ụtọ tụgharịa Hex, HSL, LAB na ụkpụrụ RGB ka ọ bụrụ OKLCH maka gị. Ị nwere ike ịkọwa ihe onwunwe CSS nwere agba ntọala na oghere ọ bụla, gụnyere Hex: /* Agba ntọala */ --ntọala: #5acd6;
Agba ọ bụla ewepụtara na ya ga-agbanwe ka ọ bụrụ OKLCH na-akpaghị aka: --ntọala-ọkụ: oklch (site na var (- ntọala) [...]; } --ntọala-n'etiti: oklch (site na var (- ntọala) [...]; } --ntọala-ọchịchịrị: oklch (site na var (- ntọala) [...]; }
Agba nke ikwu dị ka Sistemụ Nhazi Chee echiche banyere agba agba dị ka ịsị: "Were agba a, tweak ya, wee nye m nsonaazụ." Enwere ụzọ abụọ isi dozie agba: mgbanwe zuru oke na mgbanwe nhata. Ha yitere na koodu, mana na-akpa àgwà dị iche ozugbo ịmalite ịgbanwe agba ntọala. Ịghọta ọdịiche ahụ bụ ihe nwere ike ịtụgharị iji agba agba n'ime usoro. /* Agba ntọala */ --ntọala: #5acd6;
Dịka ọmụmaatụ, uru dị nro nke agba ntọala m bụ 0.7837, ebe ụdị gbara ọchịchịrị nwere uru nke 0.5837. Iji gbakọọ ọdịiche ahụ, m na-ewepụ uru dị ala site na nke dị elu wee tinye nsonaazụ ya site na iji ọrụ calc(): --ntọala-ọchịchịrị: oklch (site na var (-- ntọala) calc (l - 0.20) c h;
Iji nweta agba dị nfe, m na-agbakwunye ihe dị iche: --ntọala-ọkụ: oklch (site na var (-- ntọala) calc (l + 0.10) c h);
Chromamgbanwe na-eso otu usoro ahụ. Iji belata ike nke agba ntọala m site na 0.1035 ruo 0.0035, m na-ewepụ otu uru na nke ọzọ: oklch (site na var (-- ntọala) l calc (c - 0.10) h;
Iji mepụta palette nke hues, m gbakọọ ọdịiche dị n'etiti uru hue nke agba ntọala m (200) na hue ọhụrụ m (260): oklch (site na var (-- ntọala) l c calc (h + 60));
Mgbakọ ndị ahụ zuru oke. Mgbe m wepụrụ ego a kapịrị ọnụ, ana m ekwu nke ọma, "Wepụ ihe a mgbe niile." Otu ihe ahụ na-emetụta mgbe ị na-agbakwunye ụkpụrụ edobere: Calc (c - 0.10) Calc (c + 0.10)
Amụtara m njedebe nke ụzọ a n'ụzọ siri ike. Mgbe m dabere na iwepụ ụkpụrụ chroma edobere, agba daa n'ihu isi awọ ozugbo m gbanwere ntọala ahụ. Palette nke na-arụ ọrụ maka otu agba dara maka nke ọzọ. Mmụbawanye na-akpa àgwà dị iche iche. Mgbe m na-amụba chroma, m na-agwa ihe nchọgharị: "Welata ike nke agba a site na oke." Mmekọrịta dị n'etiti agba na-adịgide adịgide, ọbụlagodi mgbe ntọala gbanwere: Calc (c * 0.10)
M Bugharịa ya, tụọ ya, tụgharịa ya na-achị
Bugharịa ọkụ (tinye ma ọ bụ wepụ), Ọnụ ọgụgụ chroma (ọtụtụ), Tụgharịa hue (tinye ma ọ bụ wepụ ogo).
Ana m atụgharị chroma n'ihi na achọrọ m mgbanwe ike ka ọ dabere na agba agba. Mmekọrịta hue na-agbanwe agbanwe, yabụ ịmụba hue enweghị isi. Ìhè nwere nghọta na zuru oke - ịmụba ya na-arụpụtakarị nsonaazụ na-adịghị mma.
Site n'otu agba gaa na isiokwu niile Agba agba na-enye m ohere ịkọwa ụcha ntọala wee mepụta agba ọ bụla m chọrọ - nju, ọrịa strok, nkwụsị gradient, onyinyo - site na ya. N'oge ahụ, agba na-akwụsị ịbụ palette ma malite ịbụ usoro. Ihe atụ SVG na-ejikarị otu agba ole na ole gafee njupụta, ọrịa strok, na gradients. Agba nke ikwu na-enye gị ohere ịkọwapụta mmekọrịta ndị ahụ otu ugboro wee jiri ya mee ihe n'ebe niile - dị ka ndị na-eme ihe nkiri ejirigharịrị nzụlite iji mepụta ihe nkiri ọhụrụ.
Gbanwee agba ntọala otu ugboro, yana mmelite agba ọ bụla ewepụtara na-akpaghị aka, na-enweghị iji aka gbakọọ ihe ọ bụla. N'èzí eserese eserese, enwere m ike iji otu ụzọ a kọwaa agba maka steeti ihe mmekọrịta dị ka bọtịnụ na njikọ. Agba ntọala m ji mee ihe na "Lullabye-Bye Bear" Toon Title bụ acha anụnụ anụnụ na-acha cyan. N'azụ bụ radial gradient n'etiti ntọala m na ụdị gbara ọchịchịrị.
Iji mepụta ụdị ọzọ nwere ọnọdụ dị iche iche, naanị m kwesịrị ịgbanwe agba ntọala: --ntọala: #5acd6; --grad-njedebe: var (--ntọala); --grad-mmalite: oklch (site na var (-- ntọala) calc (l - 0.2357) calc (c * 0.833) h);
Iji kekọta ihe ndị a na-eme omenala na gradient SVG m na-enweghị ịmegharị ụkpụrụ agba, ejiri m ụdị inline dochie ụkpụrụ nkwụsị nwere koodu siri ike:
<ụzọ fill = "url (#bg-grad)" fill = "#5DCDD8" d = "[...]" />
Na-esote, ọ dị m mkpa ịhụ na ederede Toon m na-adị iche na agba ntọala ọ bụla m họọrọ. Ntugharị hue 180deg na-emepụta agba mgbakwunye nke na-apụta n'ezie - mana ọ nwere ike ịma jijiji na-enweghị ntụsara ahụ: .ederede-ọkụ { ju: oklch (site na var (-- ntọala) l c calc (h + 180)); }
Ngbanwe 90° na-emepụta agba nke abụọ doro anya na-enweghị nkwado zuru oke: .ederede-ọkụ { ju: oklch (site na var (-- ntọala) l c calc (h - 90)); }
Ntụrụndụ m nke Ndenye Draw McGraw's 1959 Toon Title "El Kabong" na-eji otu usoro ahụ mana ọ nwere palette dị iche iche. Dịka ọmụmaatụ, enwere gradient ọzọ n'etiti agba ntọala na ndò gbara ọchịchịrị.
Ụlọ ahụ na osisi dị n'azụ bụ nanị ndò dị iche iche nke otu agba ntọala. Maka ụzọ ndị ahụ, achọrọ m agba njupụta abụọ ọzọ: .bg-mid { ju: oklch (site na var (-- ntọala) calc (l - 0.04) calc (c * 0.91) h); }
.bg-ọchịchịrị { ju: oklch (site na var (-- ntọala) calc (l - 0.12) calc (c * 0.64) h); }
Mgbe ntọala malitere ịkwaga
Ka ọ dị ugbu a, ihe niile m gosipụtara bụ ihe kwụ ọtọ. Ọbụna mgbe mmadụ na-eji onye na-ahọrọ agba gbanwee agba ntọala, mgbanwe ahụ na-eme ozugbo. Mana eserese eserese adịkarịghị eguzoro - ihe ngosi dị na aha ahụ. Ya mere, ọ bụrụ na agba bụ akụkụ nke usoro ahụ, ọ dịghị ihe kpatara na ọ pụghị ịmegharị, kwa.
Iji mee ka agba ntọala dị ndụ, achọrọ m ibu ụzọ kewaa ya na ọwa OKLCH ya- ìhè, chroma na hue. Mana enwere usoro mgbakwunye dị mkpa: Achọrọ m ịdebanye aha ụkpụrụ ndị ahụ dị ka ihe eji emepụta ihe. Ma gịnị ka nke ahụ pụtara?
Site na ndabara, ihe nchọgharị amaghị ma uru akụrụngwa omenala CSS na-anọchite anya agba, ogologo, ọnụọgụ, ma ọ bụ ihe ọzọ kpamkpam. Nke ahụ na-apụtakarị na enweghị ike itinye ha n'otu n'otu n'oge eserese, wee si n'otu uru gaa na nke ọzọ.
Ịdenye aha ihe eji eme ihe na-agwa ihe nchọgharị ahụ ụdị uru ọ na-anọchi anya yana otu o kwesịrị isi na-akpa àgwà ka oge na-aga. N'okwu a, achọrọ m ka ihe nchọgharị ahụ na-emeso ọwa agba m dị ka ọnụọgụ ka ha wee nwee ike ịmegharị nke ọma.
@property --f-l {
syntax: "
@property --f-c {
syntax: "
@property --f-h {
syntax: "
Ozugbo edebanyere aha, akụrụngwa omenala ndị a na-akpa àgwà ka CSS. Ihe nchọgharị ahụ nwere ike itinye ha na etiti-site-frame. M na-ewughachi agba ntọala site na ọwa ndị ahụ: --ntọala: oklch (var (--f-l) var (--f-c) var (--f-h));
Nke a na-eme ka agba ntọala ahụ bụrụ ihe dị ndụ, dịka uru ọnụọgụ ọ bụla ọzọ. Nke a bụ ihe ngosi “ume” dị mfe nke na-agbanwe nwayọ ka oge na-aga: @keyframes iku ume { 0%, 100% {-f-l: 0.36; } 50% {-f-l: 0.46; } }
.toon-aha { animation: iku ume 10s mfe na-enweghị njedebe; }
N'ihi na agba ọ bụla ọzọ na ndochi, gradients na ọrịa strok sitere na -- ntọala, ha niile na-emekọ ọnụ, ọ dịghịkwa ihe ọ bụla kwesịrị iji aka emelite. Otu Agba Animated, Ọtụtụ Mmetụta Na mmalite nke usoro a, echere m ma ụkpụrụ agba agba CSS nwere ike inye ọtụtụ ohere ma na-eme ka ha dị mfe iji mejuputa. Agbakwunyere m ndabere ọla edo ọhụrụ na ibe kọntaktị webụsaịtị m n'oge na-adịbeghị anya, na mbido mbụ gụnyere oriọna mmanụ na-enwu ma na-efegharị.
Achọrọ m inyocha otú animating CSS ikwu na agba nwere ike ime ka ime ime m bụrụ ihe ezi uche dị na ya site n'itinye ya na agba sitere na oriọna. Achọrọ m ka ha na-emetụta ụwa gbara ha gburugburu, otú ezigbo ìhè si eme. Yabụ, kama ịmegharị ọtụtụ agba, arụrụ m obere usoro ọkụ nke na-eme naanị otu agba.
Ọrụ mbụ m mere bụ ịgbanye oyi akwa n'etiti azụ na oriọna m: <ụzọ id="overlay" fill="var(--overlay-tint)" [...] style="ngwakọta-ngwakọta-mode: agba" />
M na-eji ọnọdụ ngwakọta-agwakọta: agba n'ihi na tints ihe dị n'okpuru ya ka ọ na-echekwa ìhè dị n'okpuru. Dị ka naanị m chọrọ ka a na-ahụ ihe mkpuchi mgbe agbanyere ihe nkiri, emere m Nwepu machie: .svg-mine #overlay { ngosi: ọ dịghị; }
@media (na-ahọrọ-reduced-motion: enweghị mmasị) { .svg-mine[data-animations=na] #overlay { ngosi: ngọngọ; oghere: 0,5; } }
Ihe mkpuchi ahụ dị ebe, mana ejikọtabeghị ya na oriọna. Achọrọ m isi iyi ọkụ. Oriọna m dị mfe, na nke ọ bụla nwere ihe okirikiri nke m jiri nzacha mee ka ọ dị nro. Ihe nzacha na-emepụta nhụsianya dị nro n'okirikiri ahụ dum.
Kama ịmegharị ihe mkpuchi na oriọna iche iche, m na-eme ka otu akara agba "ọkụ" na-enweta ihe ọ bụla ọzọ na nke ahụ. Mbụ, m na-edebanye aha njirimara omenala atọ maka ọwa OKLCH:
@property --fl-l {
syntax: "
Emelitere m ọwa ndị ahụ, na-ama ụma na-ebugharị fremu ole na ole gaa na oroma ka flicker wee gụọ nke ọma dị ka ọkụ ọkụ:
@keyframes ire ọkụ { 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; } }
Mgbe ahụ, etinyere m ihe nkiri ahụ na SVG, yabụ mgbanwe ndị a na-ekekọrịta dị maka ma oriọna na ihe mkpuchi m:
@media (na-ahọrọ-reduced-motion: enweghị mmasị) { .svg-mine[data-animations=na] { animation: ire ọkụ 3.6s linear enweghị ngwụcha; iche: ekewa;
/* Mepụta agba ire ọkụ site na ọwa animated */ --ọkụ: oklch (var (--fl-l) var (--fl-c) var (--fl-h));
/* Agba oriọna sitere na ire ọkụ */ --lamp-isi: oklch (si na var (--ọkụ) calc (l + 0.05) calc (c * 0.70) h);
/* tint na-ekpuchi nke sitere n'otu ọkụ ahụ */ --overlay-tint: oklch (sitere na var (--ọkụ) calc (l + 0.06) calc (c * 0.65) calc (h - 10)); } }
N'ikpeazụ, etinyere m agba ndị ahụ na oriọna na-egbuke egbuke na ihe mkpuchi ha na-emetụta: @media (na-ahọrọ-reduced-motion: enweghị mmasị) { .svg-mine[data-animations=na] #mine-lamp-1> okirikiri, .svg-mine[data-animations=na] #mine-lamp-2> okirikiri { ju: var (--lamp-core); }
.svg-mine[data-animations=na] #overlay { ngosi: ngọngọ; ju: var (--overlay-tint); oghere: 0,5; } }
Mgbe ire ọkụ na-atụgharị gaa na oroma, oriọna na-ekpo ọkụ, ọnọdụ ahụ na-ekpokwa ọkụ na ha. Mgbe ire ọkụ ahụ jụrụ, ihe niile na-edozi ọnụ. Ihe kachasị mma bụ na ọ dịghị ihe ejiri aka dee ya. Ọ bụrụ na m na-agbanwe agba ntọala ma ọ bụ tweak ọkụ animation ranges, dum ọkụ usoro mmelite n'out oge. Ị nwere ike ịhụ nsonaazụ ikpeazụ na weebụsaịtị m. Megharia, Mbugharị, legharịa anya A manyere ndị na-eme ihe nkiri Hanna-Barbera ka ha weghachi ihe dị iche iche n'ihi mkpa ọ dị, mana m na-eji agba agba n'ihi na ọ na-eme ka ọrụ m na-agbanwe agbanwe ma dị mfe idowe. Ụkpụrụ agba agba CSS na-enye m ohere:
Kọwaa otu agba ntọala, Kọwaa otú agba ndị ọzọ si metụta ya, Jirikwa mmekọrịta ndị ahụ n'ebe niile, na Mee usoro ahụ site na ịgbanwe otu uru.
Agba agba abụghị naanị ime ka isiokwu dị mfe. Ọ na-akwado ụzọ iche echiche ebe agba, dị ka mmegharị ahụ, bụ ebumnuche - yana ebe ịgbanwe otu uru nwere ike gbanwee ọnọdụ niile na-enweghị idegharị ọrụ dị n'okpuru ya.
