Ini ndichangobva kuzorodza mifananidzo ine animated pawebhusaiti yangu ine dingindira idzva uye neboka remapiyona mavara, ndichiita maitiro akawanda ehunyanzvi hwandakagovera mune ino nhevedzano. Mamwe mashoma emifananidzo yangu anochinja chitarisiko kana mumwe munhu achibatana navo kana panguva dzakasiyana dzezuva.
Iwo mavara ari pamifananidzo ari pamusoro pemapeji angu ebhurogi anoshanduka kubva mangwanani kusvika husiku mazuva ese. Zvadaro, kune maitiro echando, ayo anowedzera mavara anotonhora uye dingindira rechando, neruremekedzo rwechifukidziro chepamusoro uye nzira yekubatanidza.
Ndichiri kushanda pane izvi, ndakatanga kushamisika kana CSS hukama hwemavara hunhu hwaigona kundipa humwe hutongi uku ndichirerutsa maitiro. Ongorora: Muchidzidzo ichi, ini ndichatarisa pane hukama hwemavara emhando uye iyo OKLCH yeruvara nzvimbo ye theming mifananidzo uye mifananidzo. Kana iwe uchida kunyura mukati meruvara rwehama, Ahmad Shadeed akagadzira yakanakisa inopindirana gwara. Kana dziri nzvimbo dzemavara, gamuts, uye OKLCH, wedu Geoff Graham akanyora nezvawo.
Kudzokororwa kushandiswa kwezvinhu kwaikosha. Masekirirwo aishandiswazve pese pazvinogoneka, aine mazooms uye akaturikidzana achibatsira kugadzira mifananidzo mitsva kubva mumifananidzo yakafanana. Yakazvarwa nekudikanwa, asi yaikurudzirawo kufunga maererano nenhevedzano kwete zvimiro zvega. Dambudziko Nekugadzirisa Manually Mavara Palettes Ngatikurukurei kudambudziko rangu. MuToon Titles senge ino - yakavakirwa pa1959 Yogi Bear Show episode "Lullabye-Bye Bear" - uye basa rangu kazhinji, mapalette anogumira kune mashoma akasarudzwa mavara.
Ini ndinogadzira mimvuri uye tints kubva kune yandinodaidza yangu "nheyo" ruvara kuti ndiwedzere palette pasina kuwedzera mamwe mavara.
MuSketch, ini ndinoshanda munzvimbo yeHSL yemavara, saka maitiro aya anosanganisira kuwedzera kana kudzikisa kukosha kwekureruka kwemuvara wangu wenheyo. Kutendeseka, harisi basa rakaoma - asi kusarudza rumwe ruvara rwehwaro kunoda kugadzira seti nyowani yemumvuri uye tints. Kuita izvozvo nemaoko, zvakare uye zvakare, nekukurumidza kunova kunetsa.
Ndakataura HSL - H (hue), S (saturation), uye L (kureruka) - nzvimbo yemavara, asi iyo ingori imwe yenzira dzinoverengeka dzekutsanangura ruvara. RGB - R (tsvuku), G (girinhi), B (bhuruu) - ingangove inonyanya kuzivikanwa, zvirinani mune yayo Hex fomu. Kune zvakare LAB - L (kureruka), A (girinhi-tsvuku), B (bhuruu-yero) - uye itsva, asi ikozvino yakatsigirwa zvakanyanya LCH - L (kureruka), C (chroma), H (hue) - modhi mune yayo OKLCH fomu. NeLCH - kunyanya OKLCH muCSS - Ndinogona kugadzirisa kukosha kwemavara enheyo yangu.
Kana kuti ndinogona kushandura chroma yayo. LCH chroma uye HSL saturation zvese zvinotsanangura kusimba kana kupfuma kweruvara, asi vanozviita nenzira dzakasiyana. LCH inondipa hupamhi hwakakura uye zvakanyanya kufanofungidzira kusanganisa pakati pemavara.
Ini ndinogona zvakare kushandura hue kuti ndigadzire palette yemavara anogovera kujeka kwakafanana uye kukosha kwechroma. Mune zvese HSL neLCH, hue spectrum inotanga pane tsvuku, inofamba kuburikidza negirinhi nebhuruu, uye inodzokera kune tsvuku.
Sei OKLCH Yakachinja Mafungiro Andinoita Nezve Ruvara Tsigiro yebrowser yeiyo OKLCH nzvimbo yemavara ikozvino yapararira, kunyangwe kana maturusi ekugadzira - kusanganisira Sketch - haana kubata. Neraki, izvo hazvifanirwe kukumisa kubva kushandisa OKLCH. Mabhurawuza achashandura nerufaro Hex, HSL, LAB, uye RGB kukosha kuita OKLCH kwauri. Iwe unogona kutsanangura CSS tsika chivakwa chine hwaro ruvara mune chero nzvimbo, kusanganisira Hex: /* Muvara wenheyo */ --nheyo: #5accd6;
Chero mavara anotorwa kubva mairi achashandurwa kuita OKLCH otomatiki: --foundation-light: oklch(kubva var(--foundation) [...]; } --nheyo-pakati: oklch(kubva var(--foundation) [...]; } --nheyo-yakasviba: oklch(kubva var(--foundation) [...]; }
Rudzi Rwakabatana seSitimu Yekugadzira Funga nezveruvara rwakasiyana seurikuti: “Tora ruvara urwu, gadzirisa, wozondipa mhedzisiro. Pane nzira mbiri dzekugadzirisa ruvara: absolute shanduko uye proportional shanduko. Vanotaridzika zvakafanana mukodhi, asi zvibate zvakasiyana kana wangotanga kuchinjanisa mavara ehwaro. Kunzwisisa mutsauko iwoyo ndiko kunogona kushandura uchishandisa hukama ruvara kuita system. /* Muvara wenheyo */ --nheyo: #5accd6;
Semuenzaniso, kukosha kwekureruka kwemuvara wenheyo yangu ndeye 0.7837, nepo vhezheni yakasviba ine kukosha kwe0.5837. Kuti ndiverenge mutsauko, ndinobvisa kukosha kwepasi kubva kune yepamusoro uye ndoshandisa mhedzisiro uchishandisa calc () basa: --nheyo-yakasviba: oklch(kubva var(--foundation) calc(l - 0.20) c h);
Kuti uwane ruvara rwakareruka, ini ndinowedzera mutsauko pachinzvimbo: --foundation-light: oklch(kubva var(--foundation) calc(l + 0.10) c h);
Chromakugadzirisa kunotevera nzira imwe chete. Kuti ndideredze kusimba kwehwaro hwehwaro hwangu kubva pa0.1035 kusvika 0.0035, ndinobvisa kukosha kubva kune imwe: oklch(kubva var(--foundation) l calc(c - 0.10) h);
Kugadzira palette yemavara, ndinoverenga mutsauko pakati pehue kukosha kwehwaro hwaro ruvara (200) uye hue yangu nyowani (260): oklch(kubva var(--foundation) l c calc (h + 60));
Masvomhu iwayo ndeechokwadi. Pandinobvisa mari yakatarwa, ndinonyatso kuti, "Gara uchibvisa izvi." Izvo zvinoshandawo kana uchiwedzera zvakagadziriswa kukosha: calc(c - 0.10) calc(c + 0.10)
Ndakadzidza miganhu yeiyi nzira nenzira yakaoma. Pandaivimba nekubvisa zvakagadziriswa chroma values, mavara akadonha akananga kugrey pandakangochinja hwaro. Palette yaishanda kune rumwe ruvara yakadonha kune imwe. Kuwanza kunoita zvakasiyana. Pandinowanza chroma, ndiri kuudza bhurawuza kuti: "Deredza kusimba kweruvara urwu nechikamu." Hukama huri pakati pemavara hunoramba hwakasimba, kunyangwe kana hwaro hwachinja: calc(c * 0.10)
Kufambisa Kwangu, Kuiyera, Kutenderedza Inotonga
Fambisa kureruka (wedzera kana kubvisa), Kuyera chroma (kuwanza), Tenderedza hue (wedzera kana kubvisa madhigirii).
Ini ndinoyera chroma nekuti ndinoda shanduko yesimba kuti igare yakaenzana neyakagadzika ruvara. Hue hukama hunotenderera, saka kuwanda hue hakuna musoro. Kureruka kunonzwisisika uye kwakaperera - kuhuwedzera kazhinji kunoburitsa mhedzisiro.
Kubva Rumwe Ruvara kuenda kune Yese Theme Rudzi rwehama runondibvumira kutsanangura ruvara rwehwaro uye kugadzira rumwe ruvara rwandinoda - ruzadza, sitiroko, kumira kwegradient, mimvuri - kubva pairi. Panguva iyoyo, ruvara runomira kuva palette uye inotanga kuva system. Mifananidzo yeSVG inowanzo shandisa zvakare mavara mashoma mashoma pakuzadza, sitiroko, uye gradients. Rudzi rwehama runoita kuti utsanangure hukama uhwu kamwe chete uye woshandisazve kwese kwese - senge maanimator akashandisa zvekare masikirwo kugadzira zviitiko zvitsva.
Shandura iyo hwaro ruvara kamwe chete, uye yega yega yakatorwa ruvara inogadziridza otomatiki, pasina kuverengera chero chinhu neruoko. Kunze kwemifananidzo ine animated, ini ndaigona kushandisa nzira imwechete iyi kutsanangura mavara ematunhu ezvinopindirana zvinhu zvakaita semabhatani uye zvinongedzo. Rudzi rwenheyo rwandakashandisa mu "Lullabye-Bye Bear" Toon Title ibhuruu-inotaridzika sebhuruu. Iyo yekumashure ndeye radial gradient pakati penheyo yangu uye yakasviba vhezheni.
Kugadzira mamwe mavhezheni ane mamoods akasiyana zvachose, ini ndinongoda kushandura hwaro ruvara: --nheyo: #5accd6; --grad-kuguma: var(--foundation); --grad-kutanga: oklch(kubva var(--foundation) calc(l - 0.2357) calc(c * 0.833) h);
Kusunga izvo zvivakwa zvetsika kune yangu SVG gradient pasina kudzokorora kukosha kwemavara, ndakatsiva yakaoma-coded yekumira-ruvara tsika neinline masitaera:
Tevere, ndaifanira kuve nechokwadi chekuti Toon Chinyorwa changu chinogara chichisiyana nechero nheyo ruvara rwandinosarudza. Kutenderera kwe 180deg hue kunoburitsa ruvara runoenderana rwunobuda - asi runogona kudedera zvisingaite: .text-light { zadza: oklch(kubva var(--foundation) l c calc (h + 180)); }
Kuchinja kwe90 ° kunoburitsa ruvara rwechipiri rwakajeka pasina kunyatsoenderana: .text-light { zadza: oklch(kubva var(--foundation) l c calc (h - 90)); }
Kutamba kwangu kweQuick Draw McGraw's 1959 Toon Title "El Kabong" inoshandisa hunyanzvi humwe chete asi nepakasiyana-siyana. Semuenzaniso, kune imwe radial gradient pakati peiyo nheyo yemavara uye yakasviba mumvuri.
Chivako uye muti kumashure zvinongori zvakasiyana siyana zvemuvara wehwaro. Kune idzo nzira, ndaida mamwe maviri emamwe mavara ekuzadza: .bg-pakati { zadza: oklch(kubva var(--foundation) calc(l - 0.04) calc(c * 0.91) h); }
.bg-yakasviba { zadza: oklch(kubva var(--foundation) calc(l - 0.12) calc(c * 0.64) h); }
Kana Nheyo Dzakatanga Kufamba
Kusvika pari zvino, zvese zvandakaratidza zvakamira. Kunyangwe kana mumwe munhu akashandisa chinhonga chemavara kushandura hwaro ruvara, shanduko inoitika ipapo ipapo. Asi magiraidhi ane animated haawanzo mira - chiratidzo chiri muzita. Saka, kana ruvara rwuri chikamu chehurongwa, hapana chikonzero chekuti hachikwanise kurarama, zvakare.
Kuti ndiratidze ruvara rwehwaro, ini ndinofanira kutanga ndachitsemura kuita OKLCH chiteshi- kureruka, chroma, uye hue. Asi pane imwe nhanho yakakosha yekuwedzera: Ini ndinofanira kunyoresa iwo maitiro seakataipa tsika zvivakwa. Asi izvozvo zvinorevei?
Nekumisikidza, mubrowser haazive kana kukosha kweCSS tsika inomiririra ruvara, kureba, nhamba, kana chimwe chinhu zvachose. Izvi zvinowanzoreva kuti havagone kupindirana zvakanaka panguva yeanimation, uye kusvetuka kubva kune imwe kukosha kuenda kune inotevera.
Kunyoresa chivakwa chetsika kunoudza bhurawuza rudzi rwekukosha kwainomiririra uye maitiro ainofanirwa kuita nekufamba kwenguva. Muchiitiko ichi, ini ndinoda kuti bhurawuza ribate chiteshi chemavara angu senhamba kuti dzigone kufambiswa zvakanaka.
@property --f-l {
syntax: "
@property --f-c {
syntax: "
@property --f-h {
syntax: "
Kana yangonyoreswa, idzi tsika zvivakwa zvinoita seCSS yemuno. Iyo bhurawuza inogona kuadudzira iwo furemu-ne-frame. Ini ndozovakazve iyo nheyo yemavara kubva kune aya machaneli: --nheyo: oklch(var(--f-l) var(--f-c) var(--f-h));
Izvi zvinoita kuti iyo nheyo yemavara ive inobatika, senge chero imwe nhamba kukosha. Heano akareruka "kufema" animation inoshandura zvinyoro nyoro nekufamba kwenguva: @keyframes kufema { 0%, 100% { --f-l: 0.36; } 50% { --f-l: 0.46; } }
.toon-title { animation: kufema 10s nyore-mukati-kunze kusingaperi; }
Nekuti rumwe ruvara rwese ruzere, gradients, uye sitiroko rinotorwa kubva --foundation, zvese zvinorarama pamwechete, uye hapana chinoda kuvandudzwa pamaoko. One Animated Colour, Mazhinji Effects Pakutanga kwekuita uku, ndakashamisika kana CSS hukama hwemavara hunhu hwaigona kupa mimwe mikana ukuwo ichiita kuti zvive nyore kuita. Ini nguva pfupi yadarika ndakawedzera mugodhi mutsva wegoridhe kune peji rewebhusaiti yangu, uye yekutanga iteration yaisanganisira marambi emafuta anopenya uye anozununguka.
Ndaida kuongorora kuti mavara eCSS anorarama sei angaita kuti mukati memugodhi ive yechokwadi nekuiisa nemavara kubva kumarambi. Ndaida kuti dzibatanidze nyika yakavapoteredza, sezvinoita chiedza chaicho. Saka, pane kuita kuti mavara akawanda ararame, ndakavaka diki diki remwenje sisitimu inogonesa ruvara rumwe chete.
Basa rangu rekutanga raive rekuisa chirairo pakati pemashure nemarambi angu:
Ndakashandisa musanganiswa-musanganiswa-modhi: ruvara nekuti izvo zvinopenya zviri pazasi pazvo uchichengetedza mwenje wepasi. Sezvo ini ndichingoda kuti kuvharika kuonekwe kana animations akabatidzwa, ndakaita overlay opt-in: .svg-mine #overlay { kuratidza: hapana; }
@media (inofarira-yakaderedzwa-kufamba: hapana-kuda) { .svg-mine[data-animations=on] #overlay { kuratidza: block; opacity: 0.5; } }
Iyo yakafukidzirwa yakanga iripo, asi isati yabatanidzwa nemarambi. Ndaida light source. Marambi angu ari nyore, uye rimwe nerimwe rine denderedzwa chinhu chandakadzima nesefa. Sefa inoburitsa blur yakapfava pamusoro pedenderedzwa rose.
Panzvimbo pekugonesa kuvharika uye marambi zvakaparadzana, ini ndinoraramisa imwe chete "murazvo" wemavara tokeni uye ndinotora zvimwe zvese kubva ipapo. Chekutanga, ndinonyoresa matatu akataipa zvivakwa zveOKLCH chiteshi:
@property --fl-l {
syntax: "
Ndakatungidza zviteshi izvozvo, ndichisaidzira nemaune mafuremu mashoma kuenda kuorenji kuti flicker iverenge zvakajeka semwenje wemoto:
@keyframes murazvo { 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; } }
Ipapo ini ndakatarisa iwo animation kuSVG, saka izvo zvakagovaniswa zvinosiyana zvinowanikwa kune ese marambi uye nekufukidza kwangu:
@media (inofarira-yakaderedzwa-kufamba: hapana-kuda) { .svg-mine[data-animations=on] { animation: murazvo 3.6s isingaperi mutsetse; kuzviparadzanisa nevamwe: kuzviparadzanisa nevamwe;
/* Vaka ruvara rwemurazvo kubva kune animated chiteshi */ --flame: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Muvara wemwenje unotorwa kubva mumurazvo */ --lamp-core: oklch(kubva var(--flame) calc(l + 0.05) calc(c * 0.70) h);
/* Kufukidzira tint inotorwa kubva mumurazvo wakafanana */ --overlay-tint: oklch(kubva var(--flame) calc(l + 0.06) calc(c * 0.65) calc(h - 10)); } }
Pakupedzisira, ndakaisa iwo mavara akatorwa kumarambi anopenya uye nekufukidzira kwaanoita: @media (inofarira-yakaderedzwa-kufamba: hapana-kuda) { .svg-mine[data-animations=on] #mine-lamp-1 > denderedzwa, .svg-mine[data-animations=on] #rambi-rambi-2 > denderedzwa { zadza: var (--lamp-core); }
.svg-mine[data-animations=on] #overlay { kuratidza: block; zadza: var(--overlay-tint); opacity: 0.5; } }
Kana murazvo woenda kuorenji, marambi anodziya, uye nzvimbo yacho inodziya nawo. Kana murazvo watonhora, zvinhu zvose zvinogara pamwe chete. Chinhu chakanakisa ndechekuti hapana chakanyorwa nemaoko. Kana ndikashandura ruvara rwenheyo kana kuti tweak mitsara yemoto wemoto, iyo yose yekuvhenekesa system inogadziridza panguva imwe chete. Iwe unogona kuona mhedzisiro yekupedzisira pane yangu webhusaiti. Shandisazve, Repurpose, Revisited Aya maanimators eHanna-Barbera akamanikidzwa kudzorera zvinhu kunze kwekudikanwa, asi ini ndinoshandisa zvakare mavara nekuti zvinoita kuti basa rangu rienderane uye rive nyore kuchengetedza. CSS hukama hwemavara mavara anondibvumira ku:
Tsanangura ruvara rwenheyo imwe chete, Rondedzera kuti mamwe mavara anobatana sei nazvo, Shandisazve hukama ihwohwo kwese kwese, uye Animate system nekuchinja imwe kukosha.
Rudzi rwehukama harungoite kuti kurongedza kuve nyore. Inokurudzira nzira yekufunga uko ruvara, sekufamba, rwuri nemaune - uye uko kushandura kukosha kumwe kunogona kushandura chiitiko chose pasina kunyorazve basa riri pasi paro.
