Vao haingana aho no namelombelona ny sary mihetsika ao amin'ny tranokalako miaraka amin'ny lohahevitra vaovao sy vondrona mpisava lalana, nampihatra ireo teknika nozaraiko tamin'ity andiany ity. Ny sasany amin'ireo sarimiainako dia miova endrika rehefa misy olona mifandray aminy na amin'ny fotoana samihafa amin'ny andro.
Miova isaky ny maraina ka hatramin'ny alina ny loko eo amin'ny sary eo amin'ny pejin'ny bilaogiko. Avy eo, misy ny maody lanezy, izay manampy loko mangatsiatsiaka sy lohahevitry ny ririnina, avy amin'ny sosona overlay sy fomba fangaro.
Raha niasa tamin'izany aho dia nanomboka nanontany tena aho raha afaka manome ahy fifehezana bebe kokoa ny soatoavin'ny loko mifandraika amin'ny CSS ary manatsotra ny dingana. Fanamarihana: Amin'ity lesona ity dia hifantoka amin'ny sandan'ny loko mifandraika sy ny habaka loko OKLCH aho ho an'ny sary sy sary mihetsika. Raha te hiroboka lalina amin'ny loko mifanandrify ianao, dia namorona torolalana ifampiresahana mahafinaritra i Ahmad Shadeed. Raha ny momba ny habaka loko, ny gamut ary ny OKLCH, ny Geoff Graham anay manokana dia nanoratra momba azy ireo.
Ny fampiasana miverimberina ny singa no zava-dehibe. Nampiasaina indray ny lafika raha azo atao, miaraka amin'ny zooms sy overlay manampy amin'ny fananganana sehatra vaovao avy amin'ny asakanto mitovy. Teraka tamin'ny filana izy io, saingy nandrisika ny fisainana amin'ny lafin'ny andiany fa tsy ny sehatra tsirairay. Ny olana amin'ny fanavaozana ny palette loko amin'ny tanana Andao hiroso amin'ny fanamby ataoko. Ao amin'ny Toon Titles tahaka ity iray ity — mifototra amin'ny fizarana Yogi Bear Show tamin'ny 1959 “Lullabye-Bye Bear” — ary ny asako amin'ny ankapobeny dia voafetra amin'ny loko vitsivitsy voafantina ny palettes.
Mamorona alokaloka sy tints avy amin'ilay antsoiko hoe loko "fototra" aho mba hanitarana ny palette tsy misy loko kokoa.
Ao amin'ny Sketch, miasa amin'ny habaka loko HSL aho, noho izany dia tafiditra ao anatin'ity dingana ity ny fampitomboana na fampihenana ny sandan'ny maivana amin'ny loko fototra. Raha ny marina, tsy asa sarotra izany - fa ny fisafidianana loko fototra hafa dia mitaky famoronana alokaloka sy loko vaovao. Ny fanaovana izany amin'ny tanana, hatrany hatrany, dia lasa mandreraka haingana.
Nolazaiko ny HSL - H (hue), S (saturation), ary L (maivana) - habaka loko, saingy iray amin'ireo fomba maro hamaritana ny loko izany. RGB — R (mena), G (maitso), B (manga) — angamba no mahazatra indrindra, farafaharatsiny amin'ny endriny Hex. Misy ihany koa ny LAB — L (maivana), A (maitso-mena), B (manga-mavo) — ary ny LCH vaovao kokoa, saingy tohanan'ny maro ankehitriny ny LCH — L (maivana), C (chroma), H (hue) — modely amin'ny endrika OKLCH. Miaraka amin'ny LCH — indrindra ny OKLCH amin'ny CSS — afaka manitsy ny sandan'ny maivana amin'ny loko fototra aho.
Na azoko ovaina ny chroma-ny. Ny LCH chroma sy ny saturation HSL dia samy mamaritra ny hamafin'ny loko iray, saingy amin'ny fomba samihafa no anaovany izany. Ny LCH dia manome ahy karazany midadasika kokoa sy azo vinavinaina kokoa ny fampifangaroana loko.
Afaka manova ny loko ihany koa aho mba hamoronana palette misy loko mitovy ny hazavana sy ny sanda chroma. Ao amin'ny HSL sy LCH, ny spectrum hue dia manomboka amin'ny mena, mivezivezy amin'ny maitso sy manga, ary miverina amin'ny mena.
Nahoana ny OKLCH no nanova ny fomba fisainako momba ny loko Ny fanohanan'ny navigateur ho an'ny habaka loko OKLCH dia miely patrana ankehitriny, na dia tsy tratra aza ny fitaovana famolavolana - anisan'izany ny Sketch. Soa ihany fa tsy tokony hanakana anao tsy hampiasa OKLCH izany. Ny navigateur dia hamadika amim-pifaliana ny soatoavina Hex, HSL, LAB, ary RGB ho OKLCH ho anao. Azonao atao ny mamaritra ny fananana CSS misy loko fototra amin'ny habaka rehetra, anisan'izany ny Hex: /* Loko fototra */ --fototra: #5accd6;
Ny loko rehetra azo avy aminy dia hovana ho OKLCH ho azy: --fototra-hazavana: oklch(avy amin'ny var(--fototra) [...]; } --foundation-mid: oklch(avy amin'ny var(--foundation) [...]; } --fototra-maizina: oklch(avy amin'ny var(--fototra) [...]; }
Loko Relative ho Rafitra Famolavolana Eritrereto ny loko mitovitovy amin'ny hoe: "Raiso ity loko ity, amboary, dia omeo ahy ny valiny." Misy fomba roa hanitsiana loko iray: fiovana tanteraka sy fiovana mifandanja. Mitovitovy amin'ny kaody izy ireo, saingy hafa mihitsy ny fitondrantena rehefa manomboka manova loko fototra ianao. Ny fahatakarana izany fahasamihafana izany no afaka mamadika ny fampiasana loko mitovitovy ho rafitra. /* Loko fototra */ --fototra: #5accd6;
Ohatra, ny lanjan'ny maivana amin'ny loko fototra dia 0.7837, raha ny dikan-teny maizina kosa dia manana sanda 0.5837. Mba hamaritana ny fahasamihafana dia esoriko ny sanda ambany amin'ny ambony ary ampiharo ny valiny amin'ny fampiasana calc() function: --fototra-maizina: oklch(avy amin'ny var(--foundation) calc(l - 0,20) c h);
Mba hahazoana loko maivana kokoa dia ampiako ny fahasamihafana: --fondation-jiro: oklch(avy amin'ny var(--foundation) calc(l + 0,10) c h);
Chromamanaraka ny dingana mitovy ihany ny fanitsiana. Mba hampihenana ny hamafin'ny loko fototra avy amin'ny 0.1035 ka hatramin'ny 0.0035 dia esoriko ny sanda iray amin'ny iray hafa: oklch(avy amin'ny var(--foundation) l calc(c - 0,10) h);
Mba hamoronana palette misy loko, dia kajy ny fahasamihafana misy eo amin'ny sandan'ny lokon'ny loko fototra (200) sy ny loko vaovao (260) aho: oklch(avy amin'ny var(--foundation) l c calc(h + 60));
Ireo kajy ireo dia tanteraka. Rehefa manala vola raikitra aho dia miteny tsara hoe: "Alaivo foana io be io." Toy izany koa rehefa manampy sanda raikitra: calc(c - 0.10) calc(c + 0.10)
Nianatra ny fetran'io fomba fiasa io aho tamin'ny fomba sarotra. Rehefa niantehitra tamin'ny fanesorana ny sanda chroma raikitra aho dia nirodana nankany amin'ny volondavenona ny loko raha vao nanova ny fototra aho. Ny palette iray izay niasa tamin'ny loko iray dia nirodana ho an'ny iray hafa. Hafa ny fitondran-tenany. Rehefa mampitombo ny chroma aho, dia miteny amin'ny mpitety tranonkala aho hoe: "Ahenao amin'ny ampahany ny hamafin'ity loko ity." Tsy miova ny fifandraisana misy eo amin'ny loko, na dia miova aza ny fototra: calc(c * 0.10)
My Move It, Scale It, Rotate It Rules
Alefaso maivana (ampiana na esorina), Scale chroma (mampitombo), Arotsaho ny loko (ampiana na esory ny mari-pahaizana).
Manome lanja ny chroma aho satria tiako ny fiovan'ny hamafiny mba hifanaraka amin'ny loko fototra. Mihodina ny fifandraisan'ny loko, ka tsy misy dikany ny fampitomboana ny loko. Ny fahamaivanana dia fahatsapana sy tanteraka - ny fampitomboana azy matetika dia miteraka vokatra hafahafa.
Avy amin'ny loko iray ka hatramin'ny lohahevitra iray manontolo Ny loko havanana dia mamela ahy hamaritra loko fototra iray ary hamokatra loko hafa rehetra ilaiko — famenoana, kapoka, fijanonana miandalana, aloka — avy amin'izany. Amin'izay fotoana izay dia mijanona ho palette ny loko ary manomboka ho rafitra. Ny fanoharana SVG dia mazàna mampiasa loko vitsivitsy mitovy amin'ny famenoana, kapoka ary gradient. Ny loko havanana dia ahafahanao mamaritra indray mandeha ireo fifandraisana ireo ary mampiasa azy ireo eny rehetra eny - sahala amin'ny nampiasain'ny mpanentana ny fiaviana mba hamoronana sehatra vaovao.
Ovay indray mandeha ny loko fototra, ary havaozy ho azy ny loko azo avy amin'izany, tsy manisa na inona na inona amin'ny tanana. Ankoatra ny sary mihetsika dia azoko ampiasaina io fomba fiasa io mba hamaritana loko ho an'ny toetry ny singa mifampiresaka toy ny bokotra sy rohy. Ny loko fototra nampiasaiko tamin'ny lohatenin'ny Toon "Lullabye-Bye Bear" dia manga miendrika cyan. Ny ambadika dia gradient radial eo anelanelan'ny fototra sy ny dikan-teny maizina kokoa.
Mba hamoronana dikan-teny hafa miaraka amin'ny toe-po hafa tanteraka dia mila manova ny loko fototra fotsiny aho: --fototra: #5accd6; --grad-end: var(--foundation); --grad-start: oklch(avy amin'ny var(--foundation) calc(l - 0.2357) calc(c * 0.833) h);
Mba hamatotra ireo fananana manokana ireo amin'ny gradient SVG-ko tsy misy sanda miloko dika mitovy, dia nosoloiko ny soatoavin'ny loko fijanonan'ny kaody mafy amin'ny fomba inline:
Avy eo, mila miantoka aho fa ny Toon Text-ko dia mifanohitra foana amin'izay loko fototra nofidiko. Ny fihodinan'ny loko 180deg dia mamokatra loko mifameno izay azo antoka fa mipoitra - saingy mety mihozongozona tsy mahazo aina: .text-light { fenoy: oklch(avy amin'ny var(--foundation) l c calc(h + 180)); }
Ny fiovan'ny 90° dia miteraka loko faharoa mazava tsara nefa tsy mifameno tanteraka: .text-light { fenoy: oklch(avy amin'ny var(--foundation) l c calc(h - 90)); }
Ny fialamboliko an'ny Quick Draw McGraw's 1959 Toon Lotre "El Kabong" dia mampiasa teknika mitovy fa miaraka amin'ny palette isan-karazany kokoa. Ohatra, misy gradient radial hafa eo anelanelan'ny loko fototra sy ny alokaloka maizina.
Ny tranobe sy ny hazo ao ambadika dia samy hafa lokon'ny fototra mitovy. Ho an'ireo lalana ireo dia mila loko famenoana roa fanampiny aho: .bg-mid { fenoy: oklch(avy amin'ny var(--foundation) calc(l - 0.04) calc(c * 0.91) h); }
.bg-maizina { fenoy: oklch(avy amin'ny var(--foundation) calc(l - 0.12) calc(c * 0.64) h); }
Rehefa manomboka mihetsika ny fototra
Hatreto, ny zavatra rehetra nasehoko dia static. Na dia misy mampiasa mpanangona loko hanovana ny loko fototra aza dia mitranga eo no ho eo izany fiovana izany. Saingy zara raha mijanona ny sary mihetsika - ao amin'ny anarana ny fanondro. Noho izany, raha anisan'ny rafitra ny loko, dia tsy misy antony tsy ahafahany mihetsika koa.
Mba hanamafisana ny loko fototra dia mila mizara azy amin'ny fantsona OKLCH aho aloha- maivana, chroma, ary loko. Saingy misy dingana fanampiny manan-danja: mila misoratra anarana ireo soatoavina ireo ho toy ny fananana manokana voatendry. Inona anefa no dikan’izany?
Amin'ny alàlan'ny default, ny mpitety tranonkala iray dia tsy mahafantatra raha maneho loko, lava, isa, na zavatra hafa ny sandan'ny fananana mahazatra CSS. Midika izany matetika fa tsy azo ampifandraisina tsara izy ireo mandritra ny animation, ary mitsambikina avy amin'ny sanda iray mankany amin'ny manaraka.
Ny fisoratana anarana fananana manokana dia milaza amin'ny mpitety tranonkala ny karazana sanda asehony sy ny tokony fitondrany azy rehefa mandeha ny fotoana. Amin'ity tranga ity, tiako ny navigateur mba hitondra ny fantsona miloko ho toy ny isa mba hahafahan'izy ireo mihetsika tsara.
@fananana --f-l {
syntax: "
@fananana --f-c {
syntax: "
@fananana --f-h {
syntax: "
Rehefa nisoratra anarana dia mitovy amin'ny CSS teratany ireo fananana manokana ireo. Ny navigateur dia afaka mampifandray azy ireo amin'ny frame-by-frame. Avy eo dia manangana ny loko fototra avy amin'ireo fantsona ireo aho: --fototra: oklch(var(--f-l) var(--f-c) var(--f-h));
Izany dia mahatonga ny loko fototra ho lasa animatable, sahala amin'ny sanda isa rehetra. Ity misy sary mihetsika "fofona" tsotra izay manova moramora ny fahamaivanana rehefa mandeha ny fotoana: @keyframes miaina { 0%, 100% { --f-l: 0.36; } 50% { --f-l: 0,46; } }
.toon-title { animation: miaina 10s mora-in-out tsy manam-petra; }
Satria ny loko hafa rehetra amin'ny famenoana, ny gradients ary ny kapoka dia avy amin'ny --fondation, miara-mientana izy rehetra, ary tsy misy mila havaozina amin'ny tanana. Loko iray misy sary mihetsika, Vokatra maro Tany am-piandohan'ity dingana ity dia nanontany tena aho raha afaka manome fahafaha-manao bebe kokoa ny soatoavin'ny loko mifandraika amin'ny CSS ary manamora kokoa ny fampiharana azy ireo. Vao haingana aho no nampiditra lavitry ny toeram-pitrandrahana volamena vaovao tao amin'ny pejin'ny tranokalako, ary ny fandrefesana voalohany dia nahitana jiron-tsolika izay mamiratra sy mihodinkodina.
Te-hijery aho hoe ahoana no ahafahan'ny loko mifandraika amin'ny CSS mahatonga ny atiny ho tena misy amin'ny alàlan'ny fandokoana azy amin'ny loko avy amin'ny jiro. Tiako ny hisy fiantraikany amin'ny tontolo manodidina azy ireo, toy ny ataon'ny tena hazavana. Noho izany, fa tsy mamelona loko maro, dia nanangana rafitra jiro kely aho izay mamelona loko iray monja.
Ny asako voalohany dia ny fametrahana sosona manarona eo anelanelan'ny afara sy ny jiroko:
Nampiasa mix-blend-mode aho: loko satria manjavozavo ny ao ambaniny sady mitahiry ny hazavana ao anatiny. Satria tiako ho hita ihany ny overlay rehefa alefa ny animation, dia nataoko ilay overlay opt-in: .svg-mine #overlay { fampisehoana: tsy misy; }
@media (fihetseham-po-reduced: tsisy preference) { .svg-mine[data-animations=on] #overlay { fampisehoana: sakana; opacity: 0.5; } }
Efa teo amin'ny toerany ny overlay, saingy tsy mbola nifandray tamin'ny jiro. Mila loharanom-pahazavana aho. Tsotra ny jiroko, ary misy singa boribory izay nolokoloko tamin'ny sivana ny tsirairay. Mamoaka blur malefaka be ny sivana manerana ny faribolana manontolo.
Raha tokony hamelona ny overlay sy ny jiro misaraka aho, dia mamelona famantarana miloko "afo" tokana ary maka ny zavatra hafa rehetra avy amin'izany. Voalohany, misoratra anarana fananana manokana telo ho an'ny fantsona OKLCH aho:
@property --fl-l {
syntax: "
Namelombelona ireo fantsona ireo aho, ninia nanosika sary vitsivitsy ho amin'ny volomboasary mba hivaky mazava toy ny afo ny flicker:
@keyframes lelafo { 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; } }
Avy eo aho dia nandrakotra an'io animation io tamin'ny SVG, noho izany dia azo ampiasaina amin'ny jiro sy ny overlay ny variable ifampizarana:
@media (fihetseham-po-reduced: tsisy preference) { .svg-mine[data-animations=on] { animation: lelafo 3.6s tsy manam-petra linear; mitoka-monina: mitoka-monina;
/* Mamorona loko mirehitra avy amin'ny fantsona mihetsika */ --afo: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Loko jiro avy amin'ny lelafo */ --lamp-core: oklch(avy amin'ny var(--flame) calc(l + 0.05) calc(c * 0.70) h);
/* Loko manarona avy amin'ny lelafo mitovy */ --overlay-tint: oklch(avy amin'ny var(--flame) calc(l + 0.06) calc(c * 0.65) calc(h - 10)); } }
Farany, nampihariko tamin'ny jiro manjelanjelatra ireo loko nalaina ireo sy ny fametahana azy ireo: @media (fihetseham-po-reduced: tsisy preference) { .svg-mine[data-animations=on] #mine-lamp-1 > faribolana, .svg-mine[data-animations=on] #mine-lamp-2 > faribolana { fenoy: var(--lamp-core); }
.svg-mine[data-animations=on] #overlay { fampisehoana: sakana; fenoy: var(--overlay-tint); opacity: 0.5; } }
Rehefa mivadika ho volomboasary ny lelafo, dia mafana ny jiro, ary mafana miaraka amin'izy ireo ny seho. Rehefa mangatsiaka ny lelafo dia miara-milamina ny zava-drehetra. Ny ampahany tsara indrindra dia tsy misy na inona na inona voasoratra amin'ny tanana. Raha ovaiko ny loko fototra na amboarina ny salan'isa animation lelafo, dia havaozina miaraka ny rafitra jiro manontolo. Azonao jerena ao amin'ny tranokalako ny valiny farany. Ampiasaina indray, Averina, averina Ireo mpanentana an'i Hanna-Barbera ireo dia voatery nanamboatra singa noho ny filana, saingy mampiasa loko indray aho satria mahatonga ny asako tsy miovaova sy mora kokoa amin'ny fikojakojana. Ny sandan'ny loko mifandraika amin'ny CSS dia mamela ahy:
Farito ny loko fototra tokana, Lazao ny fomba ifandraisan'ny loko hafa aminy, Ampiasao indray ireo fifandraisana ireo na aiza na aiza, ary Alefaso ny rafitra amin'ny fanovana sanda iray.
Ny loko havanana dia tsy manamora ny lohahevitra fotsiny. Izy io dia mamporisika ny fomba fisainana izay misy loko, toy ny mihetsika, dia fanahy iniana - ary ny fiovan'ny sanda iray dia afaka manova sehatra iray manontolo nefa tsy manoratra indray ny asa eo ambaniny.
