Би саяхан вэбсайтынхаа хөдөлгөөнт графикийг шинэ сэдэв болон анхдагч дүрүүдээр шинэчилж, энэ цувралд хуваалцсан олон арга техникээ хэрэгжүүлсэн. Миний цөөн хэдэн анимацууд хэн нэгэнтэй харилцах үед эсвэл өдрийн өөр цагт дүр төрхийг өөрчилдөг.
Миний блог хуудсуудын дээрх графикийн өнгө өдөр бүр өглөөнөөс орой болтол өөрчлөгддөг. Дараа нь давхарласан давхарга болон холих горимын тусламжтайгаар хүйтэн өнгө, өвлийн сэдвийг нэмсэн цасны горим бий.
Үүн дээр ажиллаж байхдаа би CSS-ийн харьцангуй өнгөт утгууд нь надад илүү хяналт тавихын зэрэгцээ үйл явцыг хялбаршуулж чадах болов уу гэж бодож эхэлсэн. Тайлбар: Энэ зааварт би харьцангуй өнгөний утгууд болон сэдэвчилсэн график, хөдөлгөөнт дүрст зориулсан OKLCH өнгөний орон зайд анхаарлаа хандуулах болно. Хэрэв та харьцангуй өнгөт гүн гүнзгий шумбахыг хүсвэл Ахмад Шадид гайхалтай интерактив гарын авлагыг бүтээжээ. Өнгөний орон зай, gamuts, OKLCH-ийн хувьд бидний өөрийн Жеофф Грахам тэдний тухай бичсэн.
Элементүүдийг давтан ашиглах нь гол зүйл байсан. Боломжтой бол арын дэвсгэрийг дахин ашигласан бөгөөд томруулж, давхарласан нь ижил урлагийн бүтээлээс шинэ үзэгдэл бүтээхэд тусалсан. Энэ нь зайлшгүй шаардлагаас үүссэн боловч тус тусдаа үзэгдэл гэхээсээ илүү олон ангит киногоор сэтгэхийг урамшуулсан. Өнгөт палитрыг гараар шинэчлэхтэй холбоотой асуудал Миний сорилт руу шууд орцгооё. 1959 оны Йоги баавгайн шоуны "Бүүвэйн дуу-баяртай баавгай" ангиас сэдэвлэсэн "Toon Titles"-ийн үүнтэй төстэй бүтээлд миний бүтээлийн палитр нь цөөн хэдэн өнгөөр хязгаарлагддаг.
Би өөрийн "суурь" гэж нэрлэдэг өнгөнөөс сүүдэр, будгийг бий болгож, илүү олон өнгө нэмэлгүйгээр палитрыг өргөжүүлдэг.
Sketch дээр би HSL өнгөний орон зайд ажилладаг тул энэ үйл явц нь үндсэн өнгөний цайвар чанарыг нэмэгдүүлэх эсвэл бууруулахад оролцдог. Үнэнийг хэлэхэд, энэ нь тийм ч хэцүү ажил биш, гэхдээ өөр суурь өнгө сонгох нь цоо шинэ сүүдэр, будгийг бий болгохыг шаарддаг. Үүнийг гараар дахин дахин хийх нь маш хурдан ажил болдог.
Би HSL - H (өнгөт), S (ханасан байдал), L (цайвар) - өнгөний орон зайг дурьдсан боловч энэ нь өнгийг тодорхойлох хэд хэдэн аргуудын нэг юм. RGB - R (улаан), G (ногоон), B (цэнхэр) - магадгүй хамгийн танил, ядаж Hex хэлбэрээрээ. Мөн LAB - L (цайвар), A (ногоон-улаан), B (цэнхэр-шар) - ба шинэ, гэхдээ одоо өргөнөөр дэмжигдсэн LCH - L (цайвар), C (chroma), H (өнгөт) - OKLCH хэлбэрийн загвар байдаг. LCH, ялангуяа CSS дэх OKLCH-ийн тусламжтайгаар би суурь өнгөний цайвар байдлын утгыг тохируулж чадна.
Эсвэл би түүний өнгийг өөрчилж болно. LCH chroma болон HSL ханалт нь өнгөний эрч хүч, баялаг байдлыг тодорхойлдог боловч үүнийг өөр өөр аргаар хийдэг. LCH нь надад илүү өргөн хүрээг хамарч, өнгөний хооронд илүү урьдчилан таамаглах боломжтой холих боломжийг олгодог.
Би мөн адил цайвар, өнгөний утгыг хуваалцах өнгөний палитр үүсгэхийн тулд өнгийг өөрчилж болно. HSL болон LCH-ийн аль алинд нь өнгөний спектр нь улаанаас эхэлж, ногоон, цэнхэр өнгөөр шилжиж, улаан өнгөтэй болдог.
OKLCH яагаад миний өнгөний талаар хэрхэн боддогийг өөрчилсөн бэ? Дизайны хэрэгслүүд, тэр дундаа Sketch-ийг гүйцээгүй байсан ч OKLCH өнгөний орон зайд зориулсан хөтөчийн дэмжлэг одоо өргөн тархсан байна. Аз болоход энэ нь таныг OKLCH ашиглахад саад болохгүй. Хөтөчүүд Hex, HSL, LAB, RGB утгуудыг OKLCH болгон хувиргах болно. Та ямар ч орон зайд үндсэн өнгө бүхий CSS хувийн шинж чанарыг тодорхойлж болно, үүнд Hex: /* Суурийн өнгө */ --суурь: #5accd6;
Үүнээс үүссэн аливаа өнгө автоматаар OKLCH руу хөрвүүлэгдэх болно: --foundation-light: oklch(var(--foundation)-аас [...]; } --foundation-mid: oklch(var(--foundation)-аас [...]; } --foundation-dark: oklch(var(--foundation)-аас [...]; }
Дизайн систем болох харьцангуй өнгө Харьцангуй өнгийг: "Энэ өнгийг аваад, өөрчил, дараа нь надад үр дүнг өг" гэж бод. Өнгийг тохируулах хоёр арга бий: үнэмлэхүй өөрчлөлт ба пропорциональ өөрчлөлт. Тэдгээр нь кодын хувьд төстэй харагддаг ч суурь өнгөө сольж эхэлмэгц маш өөр байдлаар ажиллах болно. Энэ ялгааг ойлгох нь харьцангуй өнгийг систем болгон хувиргаж чадах зүйл юм. /* Суурийн өнгө */ --суурь: #5accd6;
Жишээлбэл, миний суурь өнгөний цайвар байдлын утга нь 0.7837, харин бараан хувилбар нь 0.5837 гэсэн утгатай. Ялгааг тооцоолохын тулд би доод утгыг дээдээс нь хасаад үр дүнг calc() функцээр ашиглана. --суурь-харанхуй: oklch(var(--foundation-аас) calc(l - 0.20) c h);
Илүү цайвар өнгө авахын тулд би оронд нь ялгааг нэмнэ: --суурь-гэрэл: oklch(var(--foundation-аас) calc(l + 0.10) c h);
Хроматохируулга нь ижил процессыг дагаж мөрддөг. Суурийн өнгөний эрчмийг 0.1035-аас 0.0035 болгон бууруулахын тулд би нэг утгыг нөгөөгөөсөө хасна. oklch(var(--foundation-аас) l calc(c - 0.10) h);
Өнгөний палитрыг бий болгохын тулд би суурь өнгөний (200) болон шинэ өнгөний (260) хоорондын ялгааг тооцоолно. oklch(var(--foundation-аас) l c calc(h + 60));
Эдгээр тооцоо нь үнэмлэхүй юм. Би тогтмол дүнг хасахдаа "Үргэлж ийм ихийг хас" гэж үр дүнтэй хэлдэг. Тогтмол утгыг нэмэхэд мөн адил хамаарна: тооцоо (c - 0.10) тооцоо (c + 0.10)
Би энэ аргын хязгаарыг хэцүү замаар сурсан. Тогтмол хромын утгыг хасахад найдах үед суурийг сольсны дараа өнгө саарал болж унав. Нэг өнгөний төлөө ажиллаж байсан палитр нөгөө өнгөөр задарсан. Үржүүлэх нь өөр өөрөөр ажилладаг. Би chroma-г үржүүлэхдээ хөтөчдөө: "Энэ өнгөний эрчмийг тодорхой хэмжээгээр бууруул" гэж хэлж байна. Суурь нь өөрчлөгдсөн ч өнгө хоорондын хамаарал хэвээр үлдэнэ. тооцоо (c * 0.10)
Миний үүнийг зөөж, томруулж, эргүүлэх дүрэм
Хөнгөн байдлыг шилжүүлэх (нэмэх, хасах), Хуваарийн хрома (үржүүлэх), Өнгийг эргүүлэх (зэрэг нэмэх эсвэл хасах).
Би эрчмийн өөрчлөлтийг үндсэн өнгөтэй пропорциональ байлгахыг хүсч байгаа тул хромагийн масштабыг гаргадаг. Өнгөний хамаарал нь эргэлттэй байдаг тул өнгийг үржүүлэх нь утгагүй болно. Хөнгөн байдал нь мэдрэмжтэй бөгөөд үнэмлэхүй бөгөөд үүнийг үржүүлэх нь ихэвчлэн хачирхалтай үр дүнд хүргэдэг.
Нэг өнгөнөөс бүхэл бүтэн сэдэв хүртэл Харьцангуй өнгө нь суурь өнгийг тодорхойлж, үүнээс өөр өөр өнгө - дүүргэлт, зураас, градиент зогсолт, сүүдэр үүсгэх боломжийг олгодог. Энэ үед өнгө нь палитр байхаа больж, систем болж эхэлдэг. SVG зургууд нь дүүргэлт, зураас, градиент дээр ижил хэдэн өнгийг дахин ашиглах хандлагатай байдаг. Харьцангуй өнгө нь эдгээр харилцааг нэг удаа тодорхойлж, хаа сайгүй дахин ашиглах боломжийг олгоно. Яг л аниматорууд шинэ үзэгдэл үүсгэхийн тулд дэвсгэр зургийг дахин ашигласантай адил.
Суурийн өнгийг нэг удаа өөрчил, гараараа юу ч дахин тооцоолохгүйгээр үүссэн өнгө бүр автоматаар шинэчлэгддэг. Хөдөлгөөнт графикаас гадна би товчлуур, холбоос гэх мэт интерактив элементүүдийн төлөвийн өнгийг тодорхойлоход ижил аргыг ашиглаж болно. Миний “Бүүвэйн дуу-Бүүвэй” киноны гарчигт ашигласан суурь өнгө нь хөх өнгөтэй цэнхэр өнгөтэй. Арын дэвсгэр нь миний суурь ба бараан хувилбарын хоорондох радиаль градиент юм.
Бүтэн өөр сэтгэл санааны өөр хувилбаруудыг бий болгохын тулд би суурь өнгийг өөрчлөхөд л хангалттай. --суурь: #5accd6; --grad-end: var(--foundation); --grad-start: oklch(var(--foundation)-аас) calc(l - 0.2357) calc(c * 0.833) h);
Өнгөний утгыг давхардалгүйгээр SVG градиентдаа эдгээр тусгай шинж чанаруудыг холбохын тулд би хатуу кодлогдсон зогсолтын өнгөний утгуудыг шугаман хэв маягаар сольсон:
Дараа нь миний Toon текст миний сонгосон суурь өнгөнөөс үргэлж ялгаатай байх ёстой. Өнгөний 180 градусын эргэлт нь нэмэлт өнгө үүсгэдэг бөгөөд энэ нь мэдээжийн хэрэг гарч ирдэг боловч эвгүй чичиргээ үүсгэдэг: .текст гэрэл { дүүргэх: oklch(var(--sound)-аас) l c calc(h + 180)); }
90°-ийн шилжилт нь бүрэн нэмэлтгүйгээр тод хоёрдогч өнгө үүсгэдэг. .текст гэрэл { дүүргэх: oklch(var(--sound)-аас) l c calc(h - 90)); }
Миний 1959 онд гаргасан Quick Draw McGraw-ийн "El Kabong" нэртэй киноны гарчиг нь ижил техникийг ашигласан боловч илүү олон янзын палитртай. Жишээлбэл, суурь өнгө болон бараан өнгийн сүүдэр хооронд өөр нэг радиаль градиент байдаг.
Цаана нь байгаа барилга, мод нь ижил суурийн өнгөний өөр өөр сүүдэр юм. Эдгээр замуудын хувьд надад хоёр нэмэлт өнгө хэрэгтэй байсан: .bg-mid { дүүргэх: oklch(var(--sound)-аас) calc(l - 0.04) calc(c * 0.91) h); }
.bg-харанхуй { дүүргэх: oklch(var(--sound)-аас) calc(l - 0.12) calc(c * 0.64) h); }
Суурь хөдөлж эхлэх үед Одоогоор миний үзүүлсэн бүх зүйл хөдөлгөөнгүй байсан. Хэн нэгэн өнгө сонгогч ашиглан суурийн өнгийг өөрчилсөн ч тэр даруй өөрчлөгддөг. Гэхдээ хөдөлгөөнт графикууд зогсох нь ховор байдаг - сэжүүр нь нэрэнд байгаа юм. Тиймээс, хэрэв өнгө нь системийн нэг хэсэг бол энэ нь бас хөдөлгөөнгүй байх шалтгаан байхгүй. Суурийн өнгийг хөдөлгөөнтэй болгохын тулд эхлээд OKLCH сувагт хуваах хэрэгтэй- цайвар байдал, өнгө, өнгө. Гэхдээ нэг чухал нэмэлт алхам байна: Би эдгээр утгуудыг бичсэн захиалгат шинж чанаруудаар бүртгүүлэх хэрэгтэй. Гэхдээ энэ нь юу гэсэн үг вэ? Өгөгдмөл байдлаар, хөтөч нь CSS-ийн хувийн шинж чанарын утга нь өнгө, урт, тоо эсвэл өөр ямар нэг зүйлийг илэрхийлэх эсэхийг мэдэхгүй. Энэ нь ихэвчлэн хөдөлгөөнт дүрслэл хийх явцад тэдгээрийг интерполяци хийх боломжгүй бөгөөд нэг утгаас нөгөөд шилжих боломжгүй гэсэн үг юм. Захиалгат өмчийг бүртгэх нь хөтчид ямар төрлийн утгыг илэрхийлж, цаг хугацааны явцад хэрхэн ажиллах ёстойг хэлж өгдөг. Энэ тохиолдолд хөтчөөс миний өнгөт сувгуудыг тоо гэж үзэхийг хүсч байна, ингэснээр тэдгээрийг хөдөлгөөнгүй болгох боломжтой. @property --f-l { синтакс: "<тоо>"; өв залгамжлал: үнэн; анхны утга: 0.40; }
@property --f-c { синтакс: "<тоо>"; өв залгамжлал: үнэн; анхны утга: 0.11; }
@property --f-h { синтакс: "<тоо>"; өв залгамжлал: үнэн; анхны утга: 305; }
Бүртгүүлсний дараа эдгээр хувийн шинж чанарууд нь эх CSS шиг ажилладаг. Хөтөч нь тэдгээрийг хүрээ тус бүрээр нь интерполяци хийх боломжтой. Дараа нь би эдгээр сувгуудаас суурь өнгийг дахин бүтээдэг: --sound: oklch(var(--f-l) var(--f-c) var(--f-h));
Энэ нь суурь өнгийг бусад тоон утгын нэгэн адил хөдөлгөөнт болгодог. Цаг хугацааны явцад хөнгөн байдлыг зөөлрүүлдэг энгийн "амьсгалах" хөдөлгөөнт дүрс энд байна: @keyframes амьсгалж байна { 0%, 100% { --f-l: 0.36; } 50% { --f-l: 0.46; } }
.toon-title { хөдөлгөөнт дүрс: 10 секундын дотор хязгааргүй амьсгалах; }
Бөглөх, градиент, зураасны бусад өнгө бүр нь --foundation-аас гаралтай тул бүгд хамтдаа хөдөлгөөнд ордог бөгөөд юуг ч гараар шинэчлэх шаардлагагүй. Нэг хөдөлгөөнт өнгө, олон эффект Энэ үйл явцын эхэнд CSS-ийн харьцангуй өнгөт утгууд нь илүү олон боломжуудыг санал болгож, хэрэгжүүлэхэд хялбар болгож чадах эсэхийг би гайхаж байлаа. Би саяхан вэбсайтынхаа холбоо барих хуудсанд алтны уурхайн шинэ дэвсгэрийг нэмсэн бөгөөд эхний давталт нь гэрэлтэж, дүүжин тосон чийдэнг багтаасан.
Би CSS-ийн харьцангүй өнгийг хэрхэн хөдөлгөх нь уурхайн дотоод засал чимэглэлийг чийдэнгийн өнгөөр будах замаар илүү бодитой болгож болохыг судлахыг хүссэн. Би тэднийг эргэн тойрныхоо ертөнцөд жинхэнэ гэрэл шиг нөлөөлөөсэй гэж хүссэн. Тиймээс би олон өнгийг хөдөлгөөнтэй болгохын оронд зөвхөн нэг өнгийг хөдөлгөх жижигхэн гэрэлтүүлгийн системийг бүтээсэн.
Миний хамгийн эхний ажил бол арын дэвсгэр болон чийдэнгийн хооронд давхаргыг байрлуулах явдал байв. <зам id = "давхцах" fill = "var(--overlay-tint)" [...] style = "холимог горим: өнгө" />
Би холимог холих горимыг ашигласан: өнгө, учир нь энэ нь түүний доор байгаа зүйлийг өнгөлж, үндсэн гэрэлтүүлгийг хадгалдаг. Би зөвхөн хөдөлгөөнт дүрс асаалттай үед давхарласан давхаргыг харуулахыг хүсч байгаа тул би давхар давхаргыг идэвхжүүлсэн: .svg-mine #overlay { дэлгэц: байхгүй; }
@media (prefers-reducted-motion: no-preference) { .svg-mine[data-animations=on] #overlay { дэлгэц: блок; тунгалаг байдал: 0.5; } }
Давхардсан байсан ч дэнлүүнд хараахан холбогдоогүй байна. Надад гэрлийн эх үүсвэр хэрэгтэй байсан. Миний чийдэн нь энгийн бөгөөд тус бүр нь шүүлтүүрээр бүдгэрүүлсэн тойрог элементийг агуулдаг. Шүүлтүүр нь бүхэл бүтэн тойрог дээр маш зөөлөн бүдэгрүүлдэг.
Давхарга болон чийдэнг тусад нь хөдөлгөөнд оруулахын оронд би ганц "дөл" өнгөт тэмдэгтийг хөдөлгөөнтэй болгож, бусад бүх зүйлийг үүнээс гаргаж авдаг. Нэгдүгээрт, би OKLCH сувгийн гурван хувийн шинж чанарыг бүртгэдэг: @property --fl-l { синтакс: "<тоо>"; өв залгамжлал: үнэн; анхны утга: 0.86; } @property --fl-c { синтакс: "<тоо>"; өв залгамжлал: үнэн; анхны утга: 0.12; } @property --fl-h { синтакс: "<тоо>"; өв залгамжлал: үнэн; анхны утга: 95; }
Би эдгээр сувгуудыг хөдөлгөөнтэй болгож, зориудаар хэдэн фрэймийг улбар шар руу түлхсэн тул анивчих нь галын гэрэл мэт тод харагдана:
@keyframes дөл { 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; } }
Дараа нь би энэ хөдөлгөөнт дүрсийг SVG-д тохируулсан тул хуваалцсан хувьсагчдыг чийдэн болон миний давхаргын аль алинд нь ашиглах боломжтой:
@media (prefers-reducted-motion: no-preference) { .svg-mine[data-animations=on] { хөдөлгөөнт дүрс: дөл 3.6s хязгааргүй шугаман; тусгаарлах: тусгаарлах;
/* Хөдөлгөөнт сувгуудаас галын өнгө бүтээх */ --дөл: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Дөлөөс үүссэн чийдэнгийн өнгө */ --чийдэнгийн гол: oklch(from var(--flame) calc(l + 0.05) calc(c * 0.70) h);
/* Ижил галаас гаргаж авсан давхаргын өнгө */ --overlay-tint: oklch(var(--flame)-аас) calc(l + 0.06) calc(c * 0.65) calc(h - 10)); } }
Эцэст нь би гэрэлтдэг чийдэн болон тэдгээрийн нөлөөлөлд өртсөн өнгөлгөөнд эдгээр өнгөнүүд хэрэглэсэн. @media (prefers-reducted-motion: no-preference) { .svg-mine[data-animations=on] #mine-lamp-1 > тойрог, .svg-mine[data-animations=on] #mine-lamp-2 > тойрог { дүүргэх: var(--чийдэнгийн гол); }
.svg-mine[data-animations=on] #overlay { дэлгэц: блок; дүүргэх: var(--overlay-tint); тунгалаг байдал: 0.5; } }
Дөл улбар шар руу шилжих үед чийдэнүүд дулаарч, дүр зураг тэдэнтэй хамт дулаарна. Дөл хөргөхөд бүх зүйл нэг дор тогтдог. Хамгийн сайн тал нь гараар юу ч бичдэггүй. Хэрэв би суурийн өнгийг өөрчлөх юм уу галын хөдөлгөөнт дүрсийг өөрчлөх юм бол гэрэлтүүлгийн систем бүхэлдээ нэгэн зэрэг шинэчлэгддэг. Та эцсийн үр дүнг миний вэбсайтаас харж болно. Дахин ашиглах, дахин ашиглах, дахин үзэх Эдгээр Ханна-Барбера аниматорууд зайлшгүй шаардлагаас болж элементүүдийн зориулалтыг өөрчлөхөөс өөр аргагүй болсон ч миний ажлыг илүү тууштай, арчлахад хялбар болгодог учраас би өнгийг дахин ашигладаг. CSS-ийн харьцангуй өнгөний утгууд надад дараах боломжийг олгоно:
Нэг суурь өнгийг тодорхойлох, Бусад өнгө үүнтэй хэрхэн холбогдож байгааг тайлбарла. Эдгээр харилцааг хаа сайгүй дахин ашиглах, мөн Нэг утгыг өөрчлөх замаар системийг хөдөлгөөнтэй болгох.
Харьцангуй өнгө нь зөвхөн сэдвийг хөнгөвчлөхгүй. Хөдөлгөөн гэх мэт өнгө нь зориудаар байдаг бөгөөд нэг утгыг өөрчлөх нь түүний доорх бүтээлийг дахин бичихгүйгээр бүхэл бүтэн дүр зургийг хувиргаж чадахуйц сэтгэлгээг дэмждэг.
