Kua whakahoutia e ahau nga whakairoiro pakiwaituhi i runga i taku paetukutuku me te kaupapa hou me te roopu o nga kiripuaki paionia, me te whakamahi i nga tikanga maha kua tohatohahia e au ki tenei raupapa. Ko etahi o aku pakiwaituhi ka huri i te ahua i te wa e taunekeneke ana tetahi ki a raatau, i etahi waa rereke ranei o te ra.
Ka huri nga tae o te whakairoiro kei runga ake i aku wharangi blog mai i te ata ki te po ia ra. Na, ko te aratau hukarere, e taapiri ana i nga tae makariri me te kaupapa takurua, na te paparanga whakakikorua me te aratau whakakotahi.
I a au e mahi ana i tenei, ka tiimata ahau ki te whakaaro mena ka taea e nga uara tae whanaunga a CSS te kaha ake te whakahaere i a au me te whakamaarama i te mahi. Tuhipoka: I roto i tenei akoranga, ka aro ahau ki nga uara tae whanaunga me te waahi tae OKLCH mo nga whakairoiro kaupapa me nga pakiwaituhi. Mena kei te pirangi koe ki te ruku hohonu ki te tae whanaunga, i hangaia e Ahmad Shadeed he aratohu tauwhitiwhiti tino pai. Mo nga waahi tae, nga gamut, me te OKLCH, na ta matou ake a Geoff Graham i tuhi mo ratou.
Ko te whakamahi i nga huānga he mea nui. I whakamahia ano nga papamuri i nga wa katoa ka taea, me nga topa me nga whakakikorua hei awhina i te hanga pikitia hou mai i te mahi toi kotahi. I whanau mai i runga i te hiahia, engari i whakatenatenahia te whakaaro mo te raupapa, kaua ki nga ahuatanga takitahi. Ko te raruraru Ki te Whakahou A-ringa i nga Papatae Tae Kia tika atu ki taku wero. In Toon Titles like this one — i runga i te whakaaturanga Yogi Bear Show 1959 “Lullabye-Bye Bear” — me aku mahi i te nuinga o te waa, he iti noa nga papatae ki etahi momo tae.
Ka hangaia e ahau nga atarangi me nga kakano mai i taku e kiia nei ko taku tae "tupapa" hei whakawhanui i te papatae me te kore e taapiri i nga tae.
I roto i te Sketch, kei te mahi ahau i te mokowā tae HSL, no reira ko tenei tukanga ko te whakanui ake, te whakaheke ranei i te uara mama o taku tae turanga. Ma te pono, ehara i te mahi uaua - engari ko te whiriwhiri i tetahi tae rereke me hanga he huinga hou o nga atarangi me nga tae. Ko te mahi a-ringa, ka hoki ano, ka tere te uaua.
I whakahuahia e au te HSL — H (hue), S (saturation), me L (maama) — mokowā tae, engari koinei tetahi o nga huarahi maha hei whakaahua i te tae. RGB — R (whero), G (matomato), B (puru) — ko te mea tino mohio, i te iti rawa i tona ahua Hex. He LAB - L (maamaa), A (matomato-whero), B (puru-kowhai) - me te mea hou, engari inaianei kua tautokona nuitia LCH - L (maama), C (chroma), H (hue) - tauira i tona ahua OKLCH. Ma te LCH — otira ko OKLCH i CSS — ka taea e au te whakatika i te uara mama o taku tae turanga.
Ka taea ranei e au te whakarereke i tana chroma. Ko te LCH chroma me te HSL saturation e whakaatu ana i te kaha me te whai rawa o te tae, engari he rereke nga huarahi. Ka homai e LCH ki a au he awhe whanui ake me te whakakotahitanga matapae i waenga i nga tae.
Ka taea hoki e au te whakarereke i te hue hei hanga i tetahi papatae tae e rite ana te maamaa me te uara chroma. I roto i te HSL me te LCH, ka timata te tuāwhiorangi hue i te whero, ka neke i roto i te matomato me te puru, ka hoki ki te whero.
He aha i huri ai a OKLCH i taku whakaaro mo te tae Ko te tautoko a te kaitirotiro mo te waahi tae o OKLCH kua horapa inaianei, ahakoa nga taputapu hoahoa - tae atu ki te Sketch - kaore i mau. Waimarie, kaua e aukati i a koe ki te whakamahi i te OKLCH. Ka harikoa nga kaitirotiro ki te huri i nga uara Hex, HSL, LAB, RGB ki OKLCH mo koe. Ka taea e koe te tautuhi i tetahi taonga ritenga CSS me te tae turanga i tetahi waahi, tae atu ki te Hex: /* Tae turanga */ --turanga: #5accd6;
Ko nga tae ka puta mai ka huri aunoa ki OKLCH: --tupapa-marama: oklch(mai var(--tupapa) [...]; } --tupapa-waenganui: oklch(mai i te var(--turanga) [...]; } --tupapa-pouri: oklch(mai var(--tupapa) [...]; }
Tae Whanaunga Hei Pūnaha Hoahoa Whakaarohia te tae e kii ana: "Tangohia tenei tae, takawiri, katahi ka homai te hua." E rua nga huarahi ki te whakatika i te tae: nga huringa tino me nga huringa orite. He rite te ahua o te waehere, engari he rereke te ahua ina timata koe ki te huri i nga tae turanga. Ma te mohio ki taua rereketanga ka huri te whakamahi i te tae whanaunga ki te punaha. /* Tae turanga */ --turanga: #5accd6;
Hei tauira, ko te uara mama o taku tae turanga he 0.7837, ko te putanga pouri ake he 0.5837 te uara. Hei tātai i te rerekētanga, ka tangohia e ahau te uara iti mai i te mea teitei ake ka whakamahi i te hua ma te mahi calc(): --turanga-pouri: oklch(mai i te var(--turanga) calc(l - 0.20) c h);
Hei whakatutuki i te tae mama ake, ka taapirihia e au te rereketanga: --turanga-marama: oklch(mai i te var(--turanga) calc(l + 0.10) c h);
Chromahe rite tonu te mahi a nga whakatikatika. Hei whakaiti i te kaha o taku tae turanga mai i te 0.1035 ki te 0.0035, ka tangohia e ahau tetahi uara mai i tetahi atu: oklch(mai i te var(--turanga) l calc(c - 0.10) h);
Hei waihanga i te papatae tae, ka tatau ahau i te rereketanga o te uara hue o taku tae turanga (200) me taku hue hou (260): oklch(mai i te var(--turanga) l c calc(h + 60));
He tino tuturu aua tatauranga. Ina tangohia e au he moni kua whakaritea, ka tino kii ahau, "Tangohia te nui i nga wa katoa." Ka pa ano ki te taapiri i nga uara pumau: Calc(c - 0.10) Calc(c + 0.10)
I ako ahau i nga rohe o tenei huarahi i te huarahi uaua. I taku whirinaki ki te tango i nga uara chroma pumau, ka hinga nga tae ki te hina i taku hurihanga i te turanga. Ko te papatae i mahi mo tetahi tae ka taka mo tetahi atu. He rereke te whanonga o te whakarea. Ina whakareatia e au te chroma, ka kii ahau ki te kaitirotiro: "Whakaitihia te kaha o tenei tae ma te owehenga." Ko te hononga i waenga i nga tae ka mau tonu, ahakoa ka huri te turanga: Calc(c * 0.10)
Taku Nuku, Tauine, Hurihia Nga Ture
Nuku mama (whakapiri, tango ranei), Tauine chroma (whakareatia), Hurihia te hue (tapirihia, tangohia ranei nga tohu).
Ka whakatauira ahau i te chroma na te mea e hiahia ana ahau kia rite tonu nga huringa kaha ki te tae taketake. He hurihuri nga hononga hue, no reira karekau he tikanga o te whakarea i te hue. Ko te maamaatanga he maarama me te tino pono - ko te whakareatanga ka puta he hua rerekee.
Mai i te tae kotahi ki te kaupapa katoa Ka taea e au te tautuhi i tetahi tae turanga me te whakaputa i etahi atu tae e hiahiatia ana e au - te whakakii, te whiu, te aukati rōnaki, te atarangi - mai i tera. I tera wa, ka mutu te tae hei papatae ka tiimata hei punaha. Ko nga whakaahua SVG ka whakamahi ano i nga tae iti puta noa i nga whakakii, nga whiu, me nga rōnaki. Ma te tae whanaunga ka taea e koe te tautuhi i aua hononga kia kotahi, ka whakamahi ano i nga waahi katoa - penei i nga kaiwhakaahua i whakamahi ano i nga papamuri ki te hanga pikitia hou.
Hurihia te tae o te turanga kotahi, ka whakahou aunoa nga tae i ahu mai, me te kore e tatau i tetahi mea ma te ringaringa. I waho o nga whakairoiro pakiwaituhi, ka taea e au te whakamahi i tenei huarahi ki te tautuhi tae mo nga ahuatanga o nga huānga tauwhitiwhiti penei i nga paatene me nga hononga. Ko te tae o te turanga i whakamahia e au i taku "Lullabye-Bye Bear" Taitara Toon he kikorangi te ahua o te kikorangi. Ko te papamuri he rōnaki pūtoro i waenga i taku tūāpapa me te putanga pouri ake.
Hei waihanga i nga momo momo rereke rereke katoa, me whakarereke noa te tae o te turanga: --turanga: #5accd6; --grad-mutunga: var(--tupapa); --grad-start: oklch(mai var(--tupapa) Calc(l - 0.2357) Calc(c * 0.833) h);
Hei here i aua taonga ritenga ki taku rōnaki SVG me te kore e taarua i nga uara tae, i whakakapia e ahau nga uara tae-mutu-maama ki nga momo raarangi:
I muri mai, me whakarite e au he rereke tonu taku Kuputuhi Toon ki nga tae turanga ka tohua e au. Ma te hurihanga hue 180degre ka puta he tae taapiri e tino pakū ana - engari ka wiri kino: .kupu-marama { whakakiia: oklch(mai var(--tupapa) l c calc(h + 180)); }
Ko te nekehanga 90° ka puta he tae tuarua marama me te kore e tino taapiri: .kupu-marama { whakakiia: oklch(mai var(--tupapa) l c calc(h - 90)); }
Ko taku mahi whakangahau mo te Title Toon 1959 a McGraw "El Kabong" e whakamahi ana i nga tikanga ano engari he papatae rerekee ake. Hei tauira, tera ano tetahi atu rōnaki i waenga i te tae o te turanga me te atarangi pouri.
Ko te whare me te rakau kei muri he rereke noa nga atarangi o te tae turanga kotahi. Mo aua ara, e rua atu ano nga tae whakakī: .bg-waenganui { whakakiia: oklch(mai var(--tupapa) calc(l - 0.04) calc(c * 0.91) h); }
.bg-pouri { whakakiia: oklch(mai var(--tupapa) calc(l - 0.12) calc(c * 0.64) h); }
Ka timata nga turanga ki te neke
I tenei wa, ko nga mea katoa i whakaatuhia e au he mea pumau. Ahakoa ka whakamahi te tangata i te kaikohiko tae ki te huri i te tae o te turanga, ka puta tonu taua huringa. Engari kare e tu tonu nga whakairoiro pakiwaituhi - kei te ingoa te tohu. Na, mena he waahanga te tae o te punaha, kaore he take e kore e taea e ia te whakaohooho.
Hei whakakorikori i te tae o te turanga, me wehe e au ki ona hongere OKLCH— te marama, te chroma, me te hue. Engari tera ano tetahi waahanga nui: Me rehita au i aua uara hei taonga ritenga kua patohia. Engari he aha te tikanga o tera?
Ma te taunoa, karekau te kaitirotiro e mohio mena he tae, he roa, he nama, he aha atu ranei te uara taonga ritenga CSS. Ko te tikanga kaore e taea te whakauru marie i roto i te hākoritanga, ka peke mai i tetahi uara ki tetahi atu.
Ko te rehitatanga o tetahi rawa ritenga ka whakaatu ki te kaitirotiro te momo uara e tohu ana me pehea te mahi i roto i te waa. I roto i tenei take, e hiahia ana ahau ki te tirotiro i aku takere tae hei tau kia pai ai te whakakorikori.
@taonga --f-l {
syntax: "
@taonga --f-c {
syntax: "
@taonga --f-h {
syntax: "
Ina rehitatia, ka rite te ahua o enei taonga ritenga ki te CSS taketake. Ka taea e te kaitirotiro te whakauru i a raatau anga-a-anga. Ka hanga ano e ahau te tae turanga mai i aua awa: --turanga: oklch(var(--f-l) var(--f-c) var(--f-h));
Na tenei ka huri te tae o te turanga ki te whakakorikori, pera i etahi atu uara tau. Anei tetahi hākoritanga "manawa" ngawari e huri marie ana i te maamaatanga i roto i te waa: @keyframes manawa { 0%, 100% { --f-l: 0.36; } 50% { --f-l: 0.46; } }
.toon-title { hākoritanga: manawa 10s marie-in-waho mutunga kore; }
Na te mea ko etahi atu tae i roto i te whakakī, te rōnaki, me te whiu i ahu mai i te --tupapa, ka whakakorikori ngatahi katoa, kaore he mea me whakahou a-ringa. Kotahi te Tae Hangarite, He maha nga paanga I te timatanga o tenei mahi, i whakaaro ahau mena ka taea e nga uara tae whanaunga CSS te tuku atu i nga mea ka taea me te ngawari ake ki te whakatinana. No tata nei i taapirihia e ahau he papamuri maina koura hou ki te wharangi whakapā o taku paetukutuku, a ko te whiti tuatahi ko nga rama hinu e whiti ana, e piu ana.
I pirangi au ki te tuhura me pehea e taea ai e te whakakorikori nga tae whanaunga CSS kia tino pono te roto maina ma te whakakakahu ki nga tae mai i nga rama. Ko taku hiahia kia pa ki te ao huri noa i a raatau, penei i te maaramatanga. Na, kaua ki te whakakorikori i nga tae maha, i hanga e ahau he punaha rama iti e whakakorikori ana i te tae kotahi.
Ko taku mahi tuatahi ko te whakatakoto i tetahi paparanga whakakikorua i waenganui i te papamuri me aku rama:
I whakamahia e ahau te aratau-whakaranu-whakaranu: te tae na te mea e tohu ana i nga mea o raro i a ia e pupuri ana i te whakamarama o raro. I te mea kei te pirangi au kia kitea te whakakikorua ina ka whakakaohia nga pakiwaituhi, i mahia e au te whakakikorua ki roto: .svg-mine #whakakikorua { whakaatu: kore; }
@media (he pai-whakaiti-nekehanga: kore-manakohia) { .svg-mine[data-animations=on] #whakakikorua { whakaatu: poraka; opacity: 0.5; } }
Ko te whakakikorua i te waahi, engari kaore ano kia hono ki nga rama. I hiahia ahau ki te puna marama. He maamaa aku rama, kei ia rama he huānga porowhita i whakapouritia e ahau ki te tātari. Ko te tātari ka whakaputa i te pupuhi tino ngawari ki runga i te porowhita katoa.
Engari ki te whakakorikori i te whakakikorua me nga rama wehe ke, ka whakakorikori ahau i tetahi tohu tae "muara" kotahi ka puta mai nga mea katoa mai i tera. Tuatahi, ka rehita ahau e toru nga momo momo ritenga mo nga hongere OKLCH:
@taonga --fl-l {
syntax: "
I whakakorikori ahau i aua hongere, me te turaki i etahi papa ki te karaka kia marama ai te panui o te korakora hei rama ahi:
@keyframes mura { 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; } }
Na ka horahia e ahau taua hākoritanga ki te SVG, no reira ka waatea nga taurangi tiritiri ki nga rama me taku whakakikorua:
@media (he pai-whakaiti-nekehanga: kore-manakohia) { .svg-mine[data-animations=on] { hākoritanga: mura 3.6s rārangi mutunga kore; wehe: wehe;
/* Hanga he tae mura mai i nga hongere pakiwaituhi */ -- mura: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Tae rama i ahu mai i te mura */ --rama-matua: oklch(mai var(-- mura) calc(l + 0.05) calc(c * 0.70) h);
/* Whakakikoruatia te kakano i ahu mai i te mura ano */ --whakakikorua-tint: oklch(mai i te var(-- mura) Calc(l + 0.06) Calc(c * 0.65) Calc(h - 10)); } }
Ka mutu, ka hoatu e ahau aua tae i ahu mai ki nga rama kanapa me te whakakikorua e pa ana: @media (he pai-whakaiti-nekehanga: kore-manakohia) { .svg-mine[data-animations=on] #mine-lamp-1 > porowhita, .svg-mine[data-animations=on] #mine-lamp-2 > porowhita { whakakiia: var(--rama-matua); }
.svg-mine[data-animations=on] #whakakikorua { whakaatu: poraka; whakakiia: var(--overlay-tint); opacity: 0.5; } }
Ka huri te mura ki te karaka, ka mahana nga rama, ka mahana te waahi ki a ratou. Ka mātao te mura, ka tau nga mea katoa. Ko te waahanga pai rawa atu ko te kore e tuhia a ringa. Mena ka huri au i te tae o te turanga, ka takawiri ranei i nga awhe hākoritanga mura, ka whakahou nga punaha rama katoa i te wa kotahi. Ka taea e koe te kite i te hua whakamutunga i runga i taku paetukutuku. Whakamahi Anō, Whakahoutia, Whakahoutia Ko enei kaiwhakaahua Hanna-Barbera i kaha ki te whakamahi ano i nga huānga na te mea e tika ana, engari ka whakamahia ano e au nga tae na te mea ka pai ake aku mahi me te ngawari ki te pupuri. Ko nga uara tae whanaunga CSS ka taea e au te:
Tautuhia te tae turanga kotahi, Whakaahuahia te hononga o etahi atu tae ki a ia, Whakamahia ano enei hononga ki nga waahi katoa, a Whakakorikorihia te punaha ma te huri i tetahi uara.
Ko te ahua o te tae e kore e ngawari noa te kaupapa. Ka whakatenatena i te huarahi o te whakaaro ki te ahua o te tae, penei i te nekehanga, - me te whakarereke i tetahi uara ka huri i te ahuatanga katoa me te kore e tuhi ano i nga mahi kei raro.
