Aku bubar nyegerake grafis animasi ing situs webku kanthi tema anyar lan klompok karakter perintis, nglakokake akeh teknik sing dakkandhakake ing seri iki. Sawetara animasi saya ngganti tampilan nalika ana wong sing sesambungan karo dheweke utawa ing wektu sing beda-beda.
Werna ing grafik ing ndhuwur kaca blogku ganti saka esuk nganti wengi saben dina. Banjur, ana mode salju, sing nambah warna sing adhem lan tema musim dingin, kanthi lapisan overlay lan mode campuran.
Nalika nggarap iki, aku mulai mikir apa nilai warna relatif CSS bisa menehi kontrol luwih akeh nalika uga nyederhanakake proses kasebut. Cathetan: Ing tutorial iki, aku bakal fokus ing nilai warna sing relatif lan ruang warna OKLCH kanggo grafis lan animasi tema. Yen sampeyan pengin nyilem menyang warna sing relatif, Ahmad Shadeed nggawe pandhuan interaktif sing paling apik. Kanggo ruang warna, gamut, lan OKLCH, Geoff Graham kita dhewe nulis babagan iki.
Panggunaan unsur sing bola-bali dadi kunci. Latar mburi digunakake maneh sawayah-wayah, kanthi zoom lan overlay mbantu mbangun pemandangan anyar saka karya seni sing padha. Iki lair saka kabutuhan, nanging uga nyengkuyung pamikiran babagan seri tinimbang adegan individu. Masalah Kanthi Nganyari Palet Warna Kanthi Manual Ayo langsung menyang tantanganku. Ing Judul Toon kaya iki - adhedhasar episode Yogi Bear Show 1959 "Lullabye-Bye Bear" - lan karyaku umume, palet diwatesi ing sawetara warna sing dipilih.
Aku nggawe mbandingake lan tints saka apa aku nelpon "pondasi" werna kanggo nggedhekake palet tanpa nambah hues liyane.
Ing Sketsa, aku kerja ing ruang warna HSL, mula proses iki kalebu nambah utawa nyuda nilai cahya saka werna dhasarku. Jujur, iki dudu tugas sing angel - nanging milih warna pondasi sing beda mbutuhake nggawe set warna lan warna sing anyar. Nindakake kanthi manual, bola-bali, kanthi cepet dadi angel.
Aku kasebut HSL - H (hue), S (saturasi), lan L (lightness) - spasi werna, nanging iku mung salah siji saka sawetara cara kanggo njlèntrèhaké werna. RGB - R (abang), G (ijo), B (biru) - mbokmenawa paling menowo, paling ing wangun Hex sawijining. Ana uga LAB - L (lightness), A (ijo-abang), B (biru-kuning) - lan sing luwih anyar, nanging saiki akeh didhukung LCH - L (lightness), C (chroma), H (hue) - model ing wangun OKLCH sawijining. Kanthi LCH - khusus OKLCH ing CSS - aku bisa nyetel nilai entheng saka werna dhasarku.
Utawa aku bisa ngganti chroma sawijining. LCH chroma lan saturasi HSL loro-lorone nggambarake intensitas utawa kasugihan warna, nanging kanthi cara sing beda-beda. LCH menehi kula macem-macem luwih akeh lan luwih bisa diprediksi campuran antarane werna.
Aku uga bisa ngowahi hue kanggo nggawe palet saka werna sing nuduhake cahya padha lan nilai kroma. Ing loro HSL lan LCH, spektrum hue wiwit abang, gerakane liwat ijo lan biru, lan bali menyang abang.
Apa OKLCH Ganti Cara Aku Mikir babagan Warna Dhukungan browser kanggo ruang warna OKLCH saiki wis nyebar, sanajan alat desain - kalebu Sketsa - durung entuk. Untunge, iki ora bakal ngalangi sampeyan nggunakake OKLCH. Browser bakal seneng ngowahi nilai Hex, HSL, LAB, lan RGB dadi OKLCH kanggo sampeyan. Sampeyan bisa nemtokake properti khusus CSS kanthi werna dhasar ing papan apa wae, kalebu Hex: /* Warna pondasi */ --pondasi: #5accd6;
Werna apa wae sing asale saka warna kasebut bakal diowahi dadi OKLCH kanthi otomatis: --foundation-light: oklch(saka var(--foundation) [...]; } --foundation-mid: oklch(saka var(--foundation) [...]; } --foundation-dark: oklch(saka var(--foundation) [...]; }
Werna Relatif Minangka Sistem Desain Mikir warna sing relatif kaya ujar: "Entuk warna iki, tweak, banjur wenehi asile." Ana rong cara kanggo nyetel werna: owah-owahan absolut lan owah-owahan proporsional. Padha katon padha ing kode, nanging tumindak beda banget yen sampeyan miwiti ngganti werna dhasar. Ngerteni prabédan kasebut yaiku sing bisa nggunakake warna relatif dadi sistem. /* Warna pondasi */ --pondasi: #5accd6;
Contone, nilai cahya saka werna dhasarku yaiku 0.7837, dene versi sing luwih peteng nduweni nilai 0.5837. Kanggo ngetung prabédan, aku nyuda nilai sing luwih murah saka sing luwih dhuwur lan ngetrapake asil nggunakake fungsi calc (): --pondasi-peteng: oklch(saka var(--foundation) kal (l - 0,20) c h);
Kanggo entuk warna sing luwih entheng, aku nambahake bedane: --pondasi-cahaya: oklch(saka var(--foundation) kal (l + 0,10) c h);
Chromapangaturan tindakake proses padha. Kanggo nyuda intensitas warna dhasar saka 0.1035 dadi 0.0035, aku nyuda siji nilai saka liyane: oklch(saka var(--foundation) l kal (c - 0,10) h);
Kanggo nggawe palet warna, aku ngetung prabédan antarane nilai hue saka werna dhasarku (200) lan hue anyarku (260): oklch(saka var(--foundation) l c kal(h + 60));
Petungan kasebut mutlak. Nalika nyuda jumlah sing tetep, aku kanthi efektif ujar, "Tansah nyuda iki." Padha ditrapake nalika nambahake nilai tetep: kal (c - 0.10) kal (c + 0.10)
Aku sinau watesan pendekatan iki kanthi cara sing angel. Nalika aku gumantung ing subtracting nilai kroma tetep, werna ambruk menyang werna abu-abu sanalika aku ngganti dhasar. A palet sing makarya kanggo siji werna ambruk loro kanggo liyane. Multiplikasi tumindak beda. Nalika aku nambah kroma, aku ngandhani browser: "Kurangi intensitas warna iki kanthi proporsi." Hubungan antarane werna tetep utuh, sanajan pondasi diganti: kal (c * 0.10)
Kula Pindhah Iku, Skala Iku, Puter Iku Aturan
Pindhah entheng (nambah utawa nyuda), Kroma skala (multiply), Puter hue (nambah utawa nyuda derajat).
Aku skala chroma amarga aku pengin owah-owahan intensitas tetep sebanding karo warna dasar. Hubungan Hue iku rotasi, supaya multiply hue ora ana gunane. Cahya iku perceptual lan mutlak - multiplying asring ngasilake asil aneh.
Saka Siji Werna Kanggo Tema Kabeh Werna relatif ngidini kula nemtokake warna dhasar lan ngasilake saben warna liyane sing dibutuhake - ngisi, stroke, mandheg gradien, bayangan - saka iku. Ing wektu iku, werna mandheg dadi palet lan wiwit dadi sistem. Ilustrasi SVG cenderung nggunakake sawetara warna sing padha ing isi, stroke, lan gradien. Werna relatif ngidini sampeyan nemtokake hubungan kasebut sapisan lan digunakake maneh ing endi wae - kaya animator nggunakake latar mburi kanggo nggawe adegan anyar.
Ganti warna dhasar sapisan, lan saben warna sing asale bakal dianyari kanthi otomatis, tanpa ngitung maneh kanthi tangan. Ing njaba grafis animasi, aku bisa nggunakake pendekatan sing padha iki kanggo nemtokake warna kanggo negara unsur interaktif kayata tombol lan pranala. Werna dhasar sing digunakake ing judhul Toon "Lullabye-Bye Bear" yaiku biru sing katon cyan. Latar mburi minangka gradien radial ing antarane dhasar lan versi sing luwih peteng.
Kanggo nggawe versi alternatif kanthi swasana ati sing beda, aku mung kudu ngganti warna dhasar: --pondasi: #5accd6; --grad-end: var(--foundation); --grad-wiwitan: oklch(saka var(--foundation) kal(l - 0,2357) kal(c * 0,833) h);
Kanggo ngiket properti khusus kasebut menyang gradien SVG tanpa duplikat nilai warna, aku ngganti nilai warna stop-kode hard karo gaya inline:
Sabanjure, aku kudu mesthekake yen Teks Toonku mesthi kontras karo warna dhasar sing dak pilih. Rotasi warna 180 derajat ngasilake warna pelengkap sing mesthi muncul - nanging bisa kedher kanthi ora kepenak: .teks-lampu { isi: oklch(saka var(--foundation) l c kal(h + 180)); }
Pergeseran 90° ngasilake warna sekunder sing cetha tanpa pelengkap lengkap: .teks-lampu { isi: oklch(saka var(--foundation) l c kal(h - 90)); }
Rekreasiku saka Quick Draw McGraw's 1959 Toon Title "El Kabong" nggunakake teknik sing padha nanging kanthi palet sing luwih variatif. Contone, ana gradien radial liyane ing antarane warna dhasar lan warna sing luwih peteng.
Bangunan lan wit ing latar mburi mung beda-beda warna saka pondasi sing padha. Kanggo jalur kasebut, aku butuh rong warna isi tambahan: .bg-mid { isi: oklch(saka var(--foundation) kal(l - 0,04) kal(c * 0,91) h); }
.bg-peteng { isi: oklch(saka var(--foundation) kal (l - 0,12) kal (c * 0,64) h); }
Nalika Pondasi Mulai Obah
Nganti saiki, kabeh sing dakkandhakake wis statis. Sanajan ana wong nggunakake pemilih warna kanggo ngganti warna pondasi, owah-owahan kasebut kedadeyan langsung. Nanging grafis animasi arang mandheg - pitunjuk kasebut ana ing jeneng kasebut. Dadi, yen werna minangka bagéan saka sistem, ora ana alesan sing ora bisa animasi.
Kanggo nguripake werna dhasar, aku kudu dipérang dadi saluran OKLCH- cahya, chroma, lan hue. Nanging ana langkah ekstra sing penting: Aku kudu ndhaptar nilai kasebut minangka properti khusus sing diketik. Nanging apa tegese?
Kanthi gawan, browser ora ngerti apa nilai properti khusus CSS nggambarake warna, dawa, nomer, utawa liya-liyane. Sing asring tegese padha ora bisa interpolasi lancar sak animasi, lan mlumpat saka siji nilai kanggo sabanjure.
Ndhaptar properti khusus ngandhani browser babagan jinis nilai sing diwakili lan kepiye carane kudu ditindakake sajrone wektu. Ing kasus iki, aku pengin browser kanggo nambani saluran werna minangka nomer supaya padha bisa animasi lancar.
@properti --f-l {
sintaks: "
@properti --f-c {
sintaks: "
@properti --f-h {
sintaks: "
Sawise didaftar, properti khusus iki tumindak kaya CSS asli. Browser bisa interpolate frame-by-frame. Aku banjur mbangun maneh werna dhasar saka saluran kasebut: --foundation: oklch(var(--f-l) var(--f-c) var(--f-h));
Iki ndadekake werna dhasar dadi animatable, kaya nilai numerik liyane. Mangkene animasi "ambegan" prasaja sing alon-alon ngobahake entheng saka wektu: @keyframes ambegan { 0%, 100% { --f-l: 0,36; } 50% { --f-l: 0,46; } }
.toon-title { animasi: ambegan 10s ease-in-metu tanpa wates; }
Amarga saben warna liyane ing isi, gradien, lan stroke asalé saka --foundation, kabeh padha animasi bebarengan, lan ora ana sing perlu dianyari kanthi manual. Siji Warna Animasi, Akeh Efek Ing wiwitan proses iki, aku kepingin weruh apa nilai warna relatif CSS bisa menehi kemungkinan luwih akeh nalika uga nggawe luwih gampang dileksanakake. Aku bubar nambah latar mburi tambang emas anyar menyang kaca kontak situs webku, lan pengulangan pisanan kalebu lampu minyak sing sumunar lan ngayun.
Aku wanted kanggo njelajah carane animating CSS werna relatif bisa nggawe interior tambang luwih nyata dening tinting karo werna saka lampu. Aku pengin dheweke mengaruhi jagad ing saubengé, kaya sing ditindakake cahya nyata. Dadi, tinimbang nggawe macem-macem warna, aku nggawe sistem cahya cilik sing nggawe animasi mung siji warna.
Tugas pertamaku yaiku nggawe lapisan overlay ing antarane latar mburi lan lampuku: < dalan id="overlay" fill="var(--overlay-tint)" [...] style="mix-blend-mode: color" />
Aku nggunakake mix-blend-mode: werna amarga sing tints apa ing ngisor iki nalika ngreksa luminance ndasari. Amarga aku mung pengin overlay katon nalika animasi diuripake, aku nggawe overlay opt-in: .svg-mine #overlay { tampilan: ora ana; }
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #overlay { tampilan: blok; opacity: 0,5; } }
Overlay wis ana, nanging durung nyambung menyang lampu. Aku butuh sumber cahya. Lampu-lampuku prasaja, lan saben-saben ngemot unsur bunder sing aku burem nganggo saringan. Filter kasebut ngasilake blur sing alus banget ing kabeh bunder.
Tinimbang animasi overlay lan lampu kanthi kapisah, aku nguripake siji "semangat" werna token lan niru kabeh liya saka iku. Kaping pisanan, aku ndhaptar telung properti khusus sing diketik kanggo saluran OKLCH:
@properti --fl-l {
sintaks: "
Aku nggawe animasi saluran kasebut, kanthi sengaja nyorong sawetara pigura menyang oranye supaya kedhip maca kanthi jelas minangka lampu geni:
@keyframes nyala { 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; } }
Banjur aku nggawe animasi kasebut menyang SVG, supaya variabel sing dituduhake kasedhiya kanggo lampu lan overlay:
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] { animasi: semangat 3.6s linear tanpa wates; ngisolasi: ngisolasi;
/* Gawe warna nyala saka saluran animasi */ --flame: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Werna lampu asale saka nyala */ --lampu-inti: oklch (saka var (--api) calc (l + 0,05) calc (c * 0,70) h);
/* Werna overlay asale saka geni sing padha */ --overlay-tint: oklch(saka var(--flame) kal(l + 0,06) kal(c * 0,65) kal(h - 10)); } }
Pungkasan, aku ngetrapake warna asale menyang lampu sing mencorong lan overlay sing kena pengaruh: @media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #mine-lamp-1 > circle, .svg-mine[data-animations=on] #mine-lamp-2 > circle { isi: var(--lampu-inti); }
.svg-mine[data-animations=on] #overlay { tampilan: blok; isi: var(--overlay-tint); opacity: 0,5; } }
Nalika geni pindhah menyang oranye, lampu dadi panas, lan pemandangan dadi panas. Nalika geni dadi adhem, kabeh dadi siji. Sisih paling apik yaiku ora ana sing ditulis kanthi manual. Yen aku ngganti werna dhasar utawa ngapiki kisaran animasi semangat, kabeh sistem cahya nganyari bebarengan. Sampeyan bisa ndeleng asil pungkasan ing situs webku. Digunakake maneh, Digunakake maneh, Ditilik maneh Para animator Hanna-Barbera iki dipeksa kanggo nggunakke unsur-unsur amarga prelu, nanging aku nggunakake warna maneh amarga nggawe karyaku luwih konsisten lan luwih gampang dijaga. Nilai warna relatif CSS ngidini kula:
Nemtokake warna dhasar tunggal, Katrangan cara hubungane warna liyane, Gunakake maneh sesambetan sing nang endi wae, lan Animasi sistem kanthi ngganti siji nilai.
Werna relatif ora mung nggawe tema luwih gampang. Iki nyengkuyung cara mikir ing ngendi warna, kaya gerakan, disengojo - lan ngganti siji nilai bisa ngowahi kabeh adegan tanpa nulis maneh karya ing ngisore.
