Hivi majuzi nimeburudisha picha zilizohuishwa kwenye tovuti yangu kwa mada mpya na kikundi cha wahusika waanzilishi, nikitumia mbinu nyingi nilizoshiriki katika mfululizo huu. Baadhi ya uhuishaji wangu hubadilisha mwonekano mtu anapowasiliana nao au nyakati tofauti za siku.
Rangi katika mchoro ulio juu ya kurasa za blogu yangu hubadilika kutoka asubuhi hadi usiku kila siku. Kisha, kuna hali ya theluji, ambayo huongeza rangi za baridi na mandhari ya baridi, kwa heshima ya safu ya juu na hali ya kuchanganya.
Wakati nikifanya kazi juu ya hili, nilianza kujiuliza ikiwa maadili ya rangi ya jamaa ya CSS yanaweza kunipa udhibiti zaidi wakati pia kurahisisha mchakato. Kumbuka: Katika somo hili, nitazingatia maadili ya rangi ya jamaa na nafasi ya rangi ya OKLCH kwa mandhari ya michoro na uhuishaji. Iwapo unataka kuzama ndani ya rangi husika, Ahmad Shadeed aliunda mwongozo bora wa mwingiliano. Kuhusu nafasi za rangi, gamuts, na OKLCH, Geoff Graham wetu aliandika kuzihusu.
Matumizi ya mara kwa mara ya vipengele yalikuwa muhimu. Mandhari-nyuma zilitumika tena inapowezekana, na ukuzaji na viwekeleo vilivyosaidia kuunda matukio mapya kutoka kwa mchoro sawa. Ilizaliwa kwa lazima, lakini pia ilihimiza kufikiria katika suala la mfululizo badala ya matukio ya mtu binafsi. Tatizo la Kusasisha Paleti za Rangi Mwenyewe Hebu tuende moja kwa moja kwenye changamoto yangu. Katika Toon Titles kama hiki - kulingana na kipindi cha 1959 cha Yogi Bear Show "Lullabye-Bye Bear" - na kazi yangu kwa ujumla, palettes hupatikana kwa rangi chache zilizochaguliwa.
Ninaunda vivuli na rangi kutoka kwa kile ninachoita rangi yangu ya "msingi" ili kupanua palette bila kuongeza rangi zaidi.
Katika Mchoro, ninafanya kazi katika nafasi ya rangi ya HSL, kwa hivyo mchakato huu unahusisha kuongeza au kupunguza thamani ya wepesi wa rangi yangu ya msingi. Kwa uaminifu, sio kazi ngumu - lakini kuchagua rangi tofauti ya msingi inahitaji kuunda seti mpya ya vivuli na rangi. Kufanya hivyo kwa mikono, tena na tena, haraka inakuwa ngumu.
Nilitaja HSL - H (hue), S (kueneza), na L (nyepesi) - nafasi ya rangi, lakini hiyo ni moja tu ya njia kadhaa za kuelezea rangi. RGB - R (nyekundu), G (kijani), B (bluu) - labda ndiyo inayojulikana zaidi, angalau katika fomu yake ya Hex. Pia kuna LAB - L (wepesi), A (kijani-nyekundu), B (bluu-njano) - na mpya zaidi, lakini sasa inaungwa mkono sana LCH - L (lightness), C (chroma), H (hue) - mfano katika fomu yake ya OKLCH. Nikiwa na LCH - haswa OKLCH katika CSS - Ninaweza kurekebisha thamani ya wepesi wa rangi yangu ya msingi.
Au naweza kubadilisha chroma yake. LCH chroma na kueneza kwa HSL zote zinaelezea ukubwa au utajiri wa rangi, lakini hufanya hivyo kwa njia tofauti. LCH inanipa anuwai pana na mchanganyiko unaoweza kutabirika kati ya rangi.
Ninaweza pia kubadilisha rangi ili kuunda ubao wa rangi zinazoshiriki wepesi sawa na thamani za kroma. Katika HSL na LCH, wigo wa hue huanza na nyekundu, husogea kupitia kijani kibichi na bluu, na kurudi kwa nyekundu.
Kwa nini OKLCH Ilibadilika Jinsi Ninavyofikiria Kuhusu Rangi Usaidizi wa kivinjari kwa nafasi ya rangi ya OKLCH sasa umeenea, hata kama zana za kubuni - ikiwa ni pamoja na Mchoro - hazijapatikana. Kwa bahati nzuri, hiyo haipaswi kukuzuia kutumia OKLCH. Vivinjari vitabadilisha thamani za Hex, HSL, LAB na RGB kwa furaha kuwa OKLCH kwa ajili yako. Unaweza kufafanua mali maalum ya CSS na rangi ya msingi katika nafasi yoyote, pamoja na Hex: /* Rangi ya msingi */ --msingi: #5accd6;
Rangi yoyote inayotokana nayo itabadilishwa kuwa OKLCH kiotomatiki: --foundation-light: oklch(kutoka var(--foundation) [...]; } --foundation-katikati: oklch(kutoka var(--foundation) [...]; } --foundation-giza: oklch(kutoka var(--foundation) [...]; }
Rangi Jamaa Kama Mfumo wa Kubuni Fikiria rangi ya jamaa kama inavyosema: "Chukua rangi hii, irekebishe, kisha unipe matokeo." Kuna njia mbili za kurekebisha rangi: mabadiliko kamili na mabadiliko ya uwiano. Zinaonekana sawa katika msimbo, lakini zinakuwa tofauti sana mara tu unapoanza kubadilisha rangi za msingi. Kuelewa tofauti hiyo ndio inaweza kugeuza kutumia rangi ya jamaa kuwa mfumo. /* Rangi ya msingi */ --msingi: #5accd6;
Kwa mfano, thamani ya wepesi wa rangi yangu ya msingi ni 0.7837, wakati toleo jeusi lina thamani ya 0.5837. Ili kuhesabu tofauti, mimi huondoa thamani ya chini kutoka kwa ile ya juu na kutumia matokeo kwa kutumia calc() kazi: --msingi-giza: oklch(kutoka var(--foundation) calc (l - 0.20) c h);
Ili kufikia rangi nyepesi, ninaongeza tofauti badala yake: --msingi-mwanga: oklch(kutoka var(--foundation) calc (l + 0.10) c h);
Chromamarekebisho hufuata utaratibu huo. Ili kupunguza ukubwa wa rangi yangu ya msingi kutoka 0.1035 hadi 0.0035, mimi huondoa thamani moja kutoka kwa nyingine: oklch(kutoka var(--foundation) l calc (c - 0.10) h);
Ili kuunda rangi ya rangi, ninahesabu tofauti kati ya thamani ya rangi ya msingi (200) na rangi yangu mpya (260): oklch(kutoka var(--foundation) l c calc (h + 60));
Mahesabu hayo ni kamili. Ninapotoa kiasi kilichopangwa, ninasema kwa ufanisi, "Toa kiasi hiki kila wakati." Vile vile hutumika wakati wa kuongeza maadili yaliyowekwa: calc(c - 0.10) calc(c + 0.10)
Nilijifunza mipaka ya njia hii kwa njia ngumu. Nilipotegemea kutoa thamani zisizobadilika za chroma, rangi ziliporomoka kuelekea kijivu mara tu nilipobadilisha msingi. Palette ambayo ilifanya kazi kwa rangi moja ilianguka kwa mwingine. Kuzidisha kunatenda tofauti. Ninapozidisha chroma, ninaambia kivinjari: "Punguza ukubwa wa rangi hii kwa uwiano." Uhusiano kati ya rangi hubakia sawa, hata wakati msingi unabadilika: calc(c * 0.10)
Kuisogeza Kwangu, Kuipima, Kuizungusha Sheria
Sogeza wepesi (ongeza au ondoa), Kiwango cha chroma (zidisha), Zungusha hue (ongeza au kupunguza digrii).
Ninapima chroma kwa sababu ninataka mabadiliko ya kiwango yabaki sawia na rangi ya msingi. Mahusiano ya hue ni ya mzunguko, hivyo kuzidisha hue haina maana. Wepesi ni wa utambuzi na kamili - kuzidisha mara nyingi hutoa matokeo yasiyo ya kawaida.
Kutoka Rangi Moja Hadi Mandhari Nzima Rangi jamaa huniruhusu kufafanua rangi ya msingi na kutoa kila rangi nyingine ninayohitaji - kujaza, mipigo, vituo vya upinde rangi, vivuli - kutoka kwayo. Wakati huo, rangi huacha kuwa palette na kuanza kuwa mfumo. Vielelezo vya SVG vina mwelekeo wa kutumia tena rangi chache sawa kwenye vijazo, mipigo, na gradient. Rangi husika hukuwezesha kufafanua mahusiano hayo mara moja na kuyatumia tena kila mahali - kama vile wahuishaji walitumia mandharinyuma tena kuunda matukio mapya.
Badilisha rangi ya msingi mara moja, na kila rangi inayotokana inasasisha kiotomatiki, bila kuhesabu tena chochote kwa mkono. Nje ya michoro iliyohuishwa, ningeweza kutumia mbinu hii hiyo kufafanua rangi kwa hali ya vipengele wasilianifu kama vile vitufe na viungo. Rangi ya msingi niliyotumia katika Kichwa changu cha Toon ya "Lullabye-Bye Bear" ni samawati inayoonekana kama samawati. Mandharinyuma ni gradient ya radial kati ya msingi wangu na toleo jeusi zaidi.
Ili kuunda matoleo mbadala yenye hali tofauti kabisa, ninahitaji tu kubadilisha rangi ya msingi: --msingi: #5accd6; --grad-end: var (--foundation); --grad-start: oklch(kutoka var(--foundation) calc (l - 0.2357) calc (c * 0.833) h);
Ili kufunga sifa hizo maalum kwa gradient yangu ya SVG bila kunakili maadili ya rangi, nilibadilisha maadili ya rangi ya kusimamisha yenye alama ngumu na mitindo ya ndani:
Kisha, nilihitaji kuhakikisha kuwa Maandishi yangu ya Toon kila wakati yanatofautiana na rangi yoyote ya msingi ninayochagua. Mzunguko wa hue wa 180deg hutoa rangi inayosaidiana ambayo kwa hakika hujitokeza - lakini inaweza kutetema bila raha: .mwanga wa maandishi { jaza: oklch(kutoka var(--foundation) l c calc (h + 180)); }
Mabadiliko ya 90 ° hutoa rangi ya pili ya wazi bila kukamilishana kikamilifu: .mwanga wa maandishi { jaza: oklch(kutoka var(--foundation) l c calc (h - 90)); }
Burudani yangu ya Kichwa cha Toon cha Quick Draw McGraw cha 1959 "El Kabong" kinatumia mbinu zilezile lakini zenye rangi tofauti zaidi. Kwa mfano, kuna gradient nyingine ya radial kati ya rangi ya msingi na kivuli giza.
Jengo na mti kwa nyuma ni vivuli tofauti vya rangi ya msingi sawa. Kwa njia hizo, nilihitaji rangi mbili za ziada za kujaza: .bg-katikati { jaza: oklch(kutoka var(--foundation) calc (l - 0.04) calc (c * 0.91) h); }
.bg-giza { jaza: oklch(kutoka var(--foundation) calc (l - 0.12) calc (c * 0.64) h); }
Wakati Misingi Inapoanza Kusonga
Kufikia sasa, kila kitu ambacho nimeonyesha kimekuwa tuli. Hata mtu anapotumia kichagua rangi kubadilisha rangi ya msingi, mabadiliko hayo hutokea papo hapo. Lakini picha za uhuishaji hazisimama tuli - kidokezo kiko kwenye jina. Kwa hivyo, ikiwa rangi ni sehemu ya mfumo, hakuna sababu haiwezi kuhuisha, pia.
Ili kuhuisha rangi ya msingi, kwanza ninahitaji kuigawanya katika chaneli zake za OKLCH- wepesi, chroma na hue. Lakini kuna hatua muhimu ya ziada: Ninahitaji kusajili maadili hayo kama sifa maalum zilizochapwa. Lakini hiyo inamaanisha nini?
Kwa chaguomsingi, kivinjari hakijui kama thamani ya kipengele maalum cha CSS inawakilisha rangi, urefu, nambari au kitu kingine kabisa. Hiyo mara nyingi inamaanisha kuwa haziwezi kuingiliwa vizuri wakati wa uhuishaji, na kuruka kutoka thamani moja hadi nyingine.
Kusajili kipengee maalum huambia kivinjari aina ya thamani inayowakilisha na jinsi inavyopaswa kuishi kwa muda. Katika hali hii, ninataka kivinjari kichukue chaneli zangu za rangi kama nambari ili ziweze kuhuishwa vizuri.
@property --f-l {
syntax: "
@property --f-c {
syntax: "
@property --f-h {
syntax: "
Mara baada ya kusajiliwa, sifa hizi maalum hufanya kama CSS asili. Kivinjari kinaweza kuzitafsiri kwa sura kwa sura. Kisha ninaunda tena rangi ya msingi kutoka kwa chaneli hizo: --msingi: oklch(var(--f-l) var(--f-c) var(--f-h));
Hii hufanya rangi ya msingi iweze kuhuishwa, kama tu thamani nyingine yoyote ya nambari. Hapa kuna uhuishaji rahisi wa "kupumua" ambao hubadilisha wepesi kwa muda: @keyframes pumua { 0%, 100% { --f-l: 0.36; } 50% { --f-l: 0.46; } }
.toon-title { uhuishaji: pumua 10s urahisi-ndani-nje usio; }
Kwa sababu kila rangi nyingine katika vijazo, gradient, na mipigo inatokana na --foundation, zote huhuishwa pamoja, na hakuna kinachohitaji kusasishwa wewe mwenyewe. Rangi Moja Iliyohuishwa, Athari Nyingi Mwanzoni mwa mchakato huu, nilijiuliza ikiwa maadili ya rangi ya jamaa ya CSS yanaweza kutoa uwezekano zaidi huku pia ikiyafanya kuwa rahisi kutekeleza. Hivi majuzi niliongeza mandharinyuma mpya ya mgodi wa dhahabu kwenye ukurasa wa mawasiliano wa tovuti yangu, na marudio ya kwanza yalijumuisha taa za mafuta zinazowaka na swing.
Nilitaka kuchunguza jinsi rangi za jamaa za CSS zinazohuishwa zinavyoweza kufanya mambo ya ndani ya mgodi kuwa ya kweli zaidi kwa kuipaka rangi kutoka kwa taa. Nilitaka waathiri ulimwengu unaowazunguka, jinsi nuru halisi inavyofanya. Kwa hivyo, badala ya kuhuisha rangi nyingi, niliunda mfumo mdogo wa taa ambao huhuisha rangi moja tu.
Kazi yangu ya kwanza ilikuwa kuweka safu ya kufunika kati ya mandharinyuma na taa zangu:
Nilitumia hali ya mchanganyiko-mchanganyiko: rangi kwa sababu hiyo huweka rangi chini yake huku nikihifadhi mwangaza wa msingi. Kwa vile ninataka tu uwekeleaji uonekane wakati uhuishaji umewashwa, nilifanya chaguo la kuingia kwenye safu: .svg-mine #overlay { kuonyesha: hakuna; }
@media (inapendelea-mwendo-kupunguzwa: hakuna upendeleo) { .svg-mine[data-animations=on] #overlay { kuonyesha: kuzuia; uwazi: 0.5; } }
Ufunikaji ulikuwa mahali, lakini bado haujaunganishwa na taa. Nilihitaji chanzo cha mwanga. Taa zangu ni rahisi, na kila moja ina kipengele cha mduara ambacho nilitia ukungu na kichungi. Kichujio hutoa ukungu laini sana juu ya duara zima.
Badala ya kuhuisha viwekeleo na taa kando, mimi huhuisha ishara moja ya rangi ya "moto" na kupata kila kitu kingine kutoka kwa hiyo. Kwanza, ninasajili mali tatu maalum za chaneli za OKLCH:
@property --fl-l {
syntax: "
Nilihuisha vituo hivyo, nikisukuma kwa makusudi fremu chache kuelekea rangi ya chungwa ili blicker isomeke vizuri kama taa ya moto:
@keyframes moto { 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; } }
Kisha nikagundua uhuishaji huo kwa SVG, kwa hivyo vijiti vilivyoshirikiwa vinapatikana kwa taa zote mbili na uwekaji wangu:
@media (inapendelea-mwendo-kupunguzwa: hakuna upendeleo) { .svg-mine[data-animations=on] { uhuishaji: mwali wa 3.6s usio na kipimo; kujitenga: kujitenga;
/* Jenga rangi ya mwali kutoka kwa vituo vilivyohuishwa */ --moto: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Rangi ya taa inayotokana na mwali */ --lamp-core: oklch(kutoka var(--flame) calc(l + 0.05) calc(c * 0.70) h);
/* Tint inayofunika inayotokana na mwali huo huo */ --overlay-tint: oklch(kutoka var(--moto) calc (l + 0.06) calc (c * 0.65) calc (h - 10)); } }
Mwishowe, nilitumia rangi hizo zinazotokana na taa zinazowaka na ufunikaji unaoathiri: @media (inapendelea-mwendo-kupunguzwa: hakuna upendeleo) { .svg-mine[data-animations=on] #mine-taa-1 > mduara, .svg-mine[data-animations=on] #mine-lamp-2 > mduara { kujaza: var (--taa-msingi); }
.svg-mine[data-animations=on] #overlay { kuonyesha: kuzuia; kujaza: var (--overlay-tint); uwazi: 0.5; } }
Mwali unapogeuka kuelekea rangi ya chungwa, taa huwaka moto, na eneo hupata joto nazo. Wakati moto unapopoa, kila kitu hukaa pamoja. Sehemu bora ni kwamba hakuna kitu kinachoandikwa kwa mikono. Nikibadilisha rangi ya msingi au kurekebisha safu za uhuishaji wa mwali, mfumo mzima wa taa husasishwa kwa wakati mmoja. Unaweza kuona matokeo ya mwisho kwenye wavuti yangu. Tumia tena, Weka Madhumuni tena, Imerudiwa Wahuishaji hao wa Hanna-Barbera walilazimishwa kutumia tena vipengele bila ya lazima, lakini mimi hutumia rangi tena kwa sababu hufanya kazi yangu ifanane zaidi na iwe rahisi kutunza. Thamani za rangi za jamaa za CSS huniruhusu:
Bainisha rangi moja ya msingi, Eleza jinsi rangi nyingine zinavyohusiana nayo, Tumia tena mahusiano hayo kila mahali, na Huisha mfumo kwa kubadilisha thamani moja.
Rangi ya jamaa haifanyi tu upangaji kuwa rahisi. Inahimiza njia ya kufikiria ambapo rangi, kama mwendo, ni ya kukusudia - na ambapo kubadilisha thamani moja kunaweza kubadilisha tukio zima bila kuandika upya kazi iliyo chini yake.
