ما پدې وروستیو کې زما په ویب پا onه کې متحرک ګرافیک د یوې نوې موضوع او مخکښ کرکټرونو یوې ډلې سره تازه کړی ، د ډیری تخنیکونو په عملي کولو کې چې ما پدې لړۍ کې شریک کړی دی. زما یو څو متحرکات ظاهري بڼه بدلوي کله چې یو څوک ورسره اړیکه ونیسي یا د ورځې په مختلفو وختونو کې.
زما د بلاګ په پاڼو کې د ګرافیک رنګونه هره ورځ له سهار څخه تر شپې پورې بدلیږي. بیا ، د واورې حالت شتون لري ، کوم چې یخ رنګونه او د ژمي موضوع اضافه کوي ، د پوښښ پرت او د مخلوط حالت په واسطه.
پداسې حال کې چې پدې کار کولو کې، ما حیرانتیا پیل کړه چې ایا د CSS نسبي رنګ ارزښتونه کولی شي ما ته نور کنټرول راکړي پداسې حال کې چې د پروسې ساده کول هم. یادونه: په دې ټیوټوریل کې، زه به د اړونده رنګ ارزښتونو او د OKLCH رنګ ځای د تیمنګ ګرافیک او متحرکاتو لپاره تمرکز وکړم. که تاسو غواړئ په نسبي رنګ کې ژور ډوب کړئ، احمد شید یو عالي متقابل لارښود رامینځته کړی. لکه څنګه چې د رنګ ځایونو، ګامټونو، او OKLCH لپاره، زموږ خپل جیوف ګراهام د دوی په اړه لیکلي.
د عناصرو تکرار کارول کلیدي وه. شالیدونه هرکله چې امکان ولري بیا کارول شوي، د زومونو او پوښونو سره د ورته هنر کار څخه د نوي صحنو په جوړولو کې مرسته کوي. دا د اړتیا څخه زیږیدلی و، مګر دا د انفرادي صحنو پرځای د لړۍ په شرایطو کې فکر هم هڅولی. ستونزه په لاسي ډول د رنګ پیلټونو تازه کولو سره راځئ چې مستقیم زما ننګونې ته ورسیږو. د دې په څیر په ټون سرلیکونو کې - د 1959 یوګي بیئر شو قسط "لولابی - بای بییر" پراساس - او زما کار په عموم کې ، پیلیټونه په څو غوره رنګونو پورې محدود دي.
زه د هغه څه څخه سیوري او رنګونه رامینځته کوم چې زه یې خپل "بنسټ" رنګ بولم پرته له دې چې نور رنګونه اضافه کړم پیلیټ پراخه کړم.
په سکیچ کې، زه د HSL رنګ ځای کې کار کوم، نو پدې پروسه کې زما د بنسټ رنګ د رڼا ارزښت زیاتول یا کمول شامل دي. په ریښتیا، دا یو ستونزمن کار ندی - مګر د مختلف بنسټ رنګ غوره کول د سیوري او رنګونو بشپړ نوي سیټ رامینځته کولو ته اړتیا لري. دا په لاسي ډول ترسره کول، بیا بیا، په چټکۍ سره کارګر کیږي.
ما د HSL یادونه وکړه - H (رنګ)، S (سنتریت)، او L (روښانتیا) - د رنګ ځای، مګر دا د رنګ تشریح کولو لپاره یوازې یو له څو لارو څخه دی. RGB - R (سور)، G (شنه)، B (نیلي) - شاید ترټولو پیژندل شوی وي، لږترلږه د هغې په هیکس بڼه کې. دلته LAB - L (روښانتیا) ، A (شین - سور) ، B (نیلي - ژیړ) - او نوي هم شتون لري ، مګر اوس په پراخه کچه د LCH - L (روښانتیا) ، C (کروما) ، H (hue) - ماډل په خپل OKLCH بڼه کې ملاتړ شوی. د LCH سره - په ځانګړي توګه په CSS کې OKLCH - زه کولی شم زما د بنسټ رنګ روښانه ارزښت تنظیم کړم.
یا زه کولی شم د هغې کروما بدل کړم. LCH کروما او HSL سنتریشن دواړه د رنګ شدت یا بډایه بیانوي، مګر دوی دا په مختلفو لارو ترسره کوي. LCH ماته د رنګونو تر مینځ پراخه لړۍ او د وړاندوینې وړ ترکیب راکوي.
زه کولی شم رنګ هم بدل کړم ترڅو د رنګونو پیلیټ رامینځته کړم چې ورته روښانتیا او کروما ارزښتونه شریک کړي. په HSL او LCH دواړو کې، د رنګ سپیکٹرم په سور پیل کیږي، د شنه او نیلي له لارې حرکت کوي، او سور ته راستنیږي.
ولې OKLCH بدل شو څنګه زه د رنګ په اړه فکر کوم د OKLCH رنګ ځای لپاره د براوزر ملاتړ اوس پراخه دی ، حتی که د ډیزاین وسیلې - د سکیچ په شمول - ندي نیول شوي. خوشبختانه ، دا باید تاسو د OKLCH کارولو مخه ونه نیسي. براوزر به په خوښۍ سره ستاسو لپاره هیکس، HSL، LAB، او RGB ارزښتونه OKLCH ته واړوي. تاسو کولی شئ د CSS دودیز ملکیت په هر ځای کې د بنسټ رنګ سره تعریف کړئ، په شمول د Hex: /* د بنسټ رنګ */ --بنسټ: #5acd6;
له دې څخه اخیستل شوي رنګونه به په اتوماتيک ډول په OKLCH کې بدل شي: --بنسټ-رڼا: oklch(له var(--بنسټ) [...]؛ } --فاؤنډیشن-میډ: oklch(له var(--بنسټ) [...]؛ } --بنسټ-تور: oklch(له var(--بنسټ) [...]؛ }
نسبي رنګ د ډیزاین سیسټم په توګه د نسبي رنګ په اړه فکر وکړئ لکه څنګه چې ووایی: "دا رنګ واخلئ، ټیک کړئ، بیا ماته پایله راکړئ." د رنګ تنظیم کولو لپاره دوه لارې شتون لري: مطلق بدلونونه او متناسب بدلونونه. دوی په کوډ کې ورته ښکاري، مګر یوځل چې تاسو د بنسټ رنګونو بدلول پیل کړئ خورا مختلف چلند وکړئ. د دې توپیر پوهیدل هغه څه دي چې کولی شي د نسبي رنګ کارولو سیسټم ته واړوي. /* د بنسټ رنګ */ --بنسټ: #5acd6;
د مثال په توګه، زما د بنسټ رنګ د رڼا ارزښت 0.7837 دی، پداسې حال کې چې تیاره نسخه د 0.5837 ارزښت لري. د توپیر محاسبه کولو لپاره، زه د لوړ ارزښت څخه ټیټ ارزښت کموم او پایله د calc() فنکشن په کارولو سره پلي کوم: --بنسټ تیاره: oklch(د var(--بنسټ) څخه calc(l - 0.20) c h)؛
د روښانه رنګ ترلاسه کولو لپاره، زه د دې پرځای توپیر اضافه کړم: --بنسټ رڼا: oklch(د var(--بنسټ) څخه calc(l + 0.10) c h)؛
کروماتعدیلات ورته پروسه تعقیبوي. د دې لپاره چې زما د بنسټ رنګ شدت له 0.1035 څخه 0.0035 ته راټیټ کړي، زه یو ارزښت له بل څخه کموم: oklch(د var(--بنسټ) څخه l حساب (c - 0.10) h)؛
د رنګونو د جوړولو لپاره، زه زما د بنسټ رنګ (200) او زما د نوي رنګ (260) د رنګ ارزښت ترمنځ توپیر محاسبه کوم: oklch(د var(--بنسټ) څخه l c calc(h + 60))؛
دا حسابونه مطلق دي. کله چې زه یو ټاکلی مقدار کم کړم، زه په مؤثره توګه وایم، "تل دا ډیر کم کړئ." ورته تطبیق کیږي کله چې ثابت ارزښتونه اضافه کړئ: حساب (c - 0.10) حساب (c + 0.10)
ما د دې تګلارې حدود په سخته توګه زده کړل. کله چې ما د ثابت کروما ارزښتونو کمولو باندې تکیه وکړه، رنګونه د خړ په لور راوتلي کله چې ما بنسټ بدل کړ. یو پیلټ چې د یو رنګ لپاره کار کاوه د بل لپاره جلا شو. ضرب په مختلف ډول چلند کوي. کله چې زه کروما ضرب کړم، زه براوزر ته وایم: "د دې رنګ شدت په تناسب کم کړئ." د رنګونو تر منځ اړیکه پاتې ده، حتی کله چې بنسټ بدل شي: حساب (c * 0.10)
زما حرکت دا، اندازه یې کړئ، دا وګرځوئ قواعد
روښانتیا حرکت وکړئ (زیات یا کم کړئ) کروما پیمانه (ضرب)، رنګ وګرځوئ (درجې اضافه یا کم کړئ).
زه کروما پیمانه کوم ځکه چې زه غواړم د شدت بدلونونه د اساس رنګ سره متناسب پاتې شي. د رنګ اړیکې گردشي دي، نو د رنګ ضرب کول هیڅ معنی نلري. روښانتیا د پام وړ او مطلق دی - ضرب کول ډیری وختونه عجیب پایلې تولیدوي.
له یو رنګ څخه ټول موضوع ته نسبي رنګ ما ته اجازه راکوي چې د بنسټ رنګ تعریف کړم او هر بل رنګ چې زه ورته اړتیا لرم تولید کړم - ډک، سټروکس، تدریجي تمځایونه، سیوري - له هغې څخه. په دې وخت کې، رنګ د پیلټ کیدو مخه نیسي او د سیسټم په توګه پیل کوي. د SVG توضیحات د ډکولو، سټروکس، او ګریډینټ په اوږدو کې ورته څو رنګونه بیا کاروي. نسبي رنګ تاسو ته اجازه درکوي چې دا اړیکې یو ځل تعریف کړئ او هرچیرې یې بیا وکاروئ - لکه څنګه چې متحرک کونکي د نوي صحنو رامینځته کولو لپاره شالیدونه بیا کاروي.
یو ځل د بنسټ رنګ بدل کړئ، او هر اخیستل شوی رنګ په اتوماتيک ډول تازه کیږي، پرته له دې چې د لاس په واسطه هیڅ شی حساب کړي. د متحرک ګرافیکونو څخه بهر، زه کولی شم د متقابل عناصرو ریاستونو لکه بټونو او لینکونو لپاره د رنګونو تعریف کولو لپاره ورته ورته طریقه وکاروم. د بنسټ رنګ چې ما په خپل "لولیبای-بای بیر" ټون سرلیک کې کارولی یو سیان ښکاري نیلي دی. شالید زما د بنسټ او تیاره نسخه تر مینځ یو ریډیل تدریجي دی.
د بشپړ مختلف مزاجونو سره د بدیل نسخو رامینځته کولو لپاره ، زه یوازې د بنسټ رنګ بدلولو ته اړتیا لرم: --بنسټ: #5acd6; --grad-end: var(-- بنسټ)؛ --grad-start: oklch(له var(--بنسټ) څخه calc(l - 0.2357) calc(c * 0.833) h)؛
د رنګ ارزښتونو نقل کولو پرته زما د SVG ګریډینټ سره د دې دودیز ملکیتونو تړلو لپاره ، ما د هارډ کوډ شوي سټاپ رنګ ارزښتونه د انلاین سټایلونو سره بدل کړل:
بیا، زه اړتیا لرم چې ډاډ ترلاسه کړم چې زما د ټون متن تل د هر هغه بنسټ رنګ سره توپیر لري چې زه یې غوره کوم. د 180 درجې رنګه گردش یو بشپړونکی رنګ تولیدوي چې یقینا پاپ کوي - مګر کولی شي په نا آرامۍ سره حرکت وکړي: متن رڼا { ډکول: oklch (د var(--بنسټ) څخه l c calc(h + 180))؛ }
د 90 درجې بدلون یو روښانه ثانوي رنګ تولیدوي پرته له دې چې بشپړ بشپړ شي: متن رڼا { ډکول: oklch (د var(--بنسټ) څخه l c calc(h - 90))؛ }
زما د Quick Draw McGraw د 1959 Toon سرلیک "ایل کابونګ" ورته تخنیکونه کاروي مګر د ډیر متنوع پیلټ سره. د مثال په توګه، د بنسټ رنګ او تیاره سیوري ترمنځ یو بل ریډیل تدریجي شتون لري.
په شاليد کې ودانۍ او ونې په ساده ډول د ورته بنسټ رنګ مختلف سیوري دي. د دې لارو لپاره، ما دوه اضافي ډک رنګونو ته اړتیا درلوده: .bg-میډ { ډکول: oklch (د var(--بنسټ) څخه calc(l - 0.04) calc(c * 0.91) h)؛ }
.bg-تور { ډکول: oklch (د var(--بنسټ) څخه 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 په څیر چلند کوي. براوزر کولی شي دوی د چوکاټ له مخې چوکاټ کړي. زه بیا د دې چینلونو څخه د بنسټ رنګ بیا جوړوم: -- بنسټ: oklch(var(--f-l) var(--f-c) var(--f-h))؛
دا د بنسټ رنګ د متحرک کولو وړ کوي، لکه د نورو شمیرو ارزښتونو په څیر. دلته یو ساده "تنفس" حرکت دی چې په نرمۍ سره د وخت په تیریدو سره روښانتیا بدلوي: @keyframes تنفس { 0%، 100% { --f-l: 0.36; } 50٪ { --f-l: 0.46; } }
.toon-title { انیمیشن: د 10s تنفس په اسانۍ سره لامحدود }
ځکه چې په ډکولو، ګریډینټ، او سټروکس کې هر بل رنګ د --foundation څخه اخیستل شوی، دوی ټول یوځای متحرک کوي، او هیڅ شی په لاسي ډول نوي کولو ته اړتیا نلري. یو متحرک رنګ، ډیری اغیزې د دې پروسې په پیل کې، ما حیران کړل چې آیا د CSS نسبي رنګ ارزښتونه کولی شي ډیر امکانات وړاندې کړي پداسې حال کې چې دوی د پلي کولو لپاره ساده کوي. ما په دې وروستیو کې زما د ویب پاڼې د اړیکو پاڼې ته د سرو زرو نوی شالید اضافه کړ، او په لومړي تکرار کې د تیلو څراغونه شامل وو چې روښانه او تیریږي.
ما غوښتل وپلټم چې څنګه د CSS نسبي رنګونو متحرک کول کولی شي د لیمپونو رنګونو سره د رنګ کولو له لارې د ماین داخلي نور حقیقتي کړي. ما غوښتل چې دوی د دوی شاوخوا نړۍ اغیزه وکړي، لکه څنګه چې ریښتینې رڼا کوي. نو، د څو رنګونو د متحرک کولو پر ځای، ما د رڼا یو کوچنی سیسټم جوړ کړ چې یوازې یو رنګ متحرک کوي.
زما لومړی دنده دا وه چې د شالید او زما څراغونو ترمینځ د پوښښ پرت سلاټ کړم: < لار id="overlay" fill="var(-overlay-tint)" [...] style="mix-blend-mode: color" />
ما د مکس-بلینډ-موډ کارولی: رنګ ځکه چې دا د هغه لاندې څه رنګ کوي پداسې حال کې چې د اصلي رڼا ساتنه کوي. لکه څنګه چې زه یوازې غواړم پوښښ ښکاره شي کله چې متحرکات فعال شي، ما د پوښښ غوره کول جوړ کړل: .svg-mine #overlay { ښودنه: هیڅ نه؛ }
@media (prefers-reduced-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; } ۸۴٪ { --fl-l: 0.85; --fl-c: 0.14; --fl-h: 98; } ۹۲٪ {--fl-l: 0.80; --fl-c: 0.17; --fl-h: 74; } }
بیا ما دا حرکت SVG ته وټاکه، نو شریک شوي تغیرات دواړه لیمپونو او زما پوښښ ته شتون لري:
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] { انیمیشن: شعله 3.6s لامحدود خطي؛ جلا کول: جلا کول
/* د متحرک چینلونو څخه د شعلې رنګ جوړ کړئ */ --flame: oklch(var(-fl-l) var(-fl-c) var(--fl-h));
/* د څراغ رنګ د شعلې څخه اخیستل شوی */ -- lamp-core: oklch(from var(--flame) calc(l + 0.05) calc(c * 0.70) h)؛
/* د ورته شعلې څخه اخیستل شوي پوښښ رنګ */ --overlay-tint: oklch(له var(--شعله) څخه calc(l + 0.06) calc(c * 0.65) calc(h - 10))؛ } }
په نهایت کې ، ما دا ترلاسه شوي رنګونه په روښانه څراغونو او پوښښ کې پلي کړل چې دوی یې اغیزه کوي: @media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #mine-lamp-1 > حلقه، .svg-mine[data-animations=on] #mine-lamp-2 > حلقه { ډکول: var(--Lamp-core); }
.svg-mine[data-animations=on] #overlay { ښودنه: بلاک ډکول: var(-overlay-tint); شفافیت: 0.5؛ } }
کله چې اور د نارنجي په لور واړوي، څراغونه ګرمیږي، او صحنه ورسره ګرمیږي. کله چې اور یخ شي، هر څه یوځای حل کیږي. غوره برخه دا ده چې هیڅ شی په لاسي ډول نه لیکل کیږي. که زه د بنسټ رنګ بدل کړم یا د شعلې انیمیشن رینجونه ټیک کړم، د رڼا ټول سیسټم په ورته وخت کې تازه کیږي. تاسو کولی شئ زما په ویب پاڼه کې وروستۍ پایله وګورئ. بیا کارول، بیا کار کول، بیا کتنه د هانا - باربیرا انیمیټران دې ته اړ شوي چې د اړتیا له مخې عناصر له سره تنظیم کړي، مګر زه رنګونه بیا کاروم ځکه چې دا زما کار ډیر ثابت او ساتل اسانه کوي. د CSS اړوند رنګ ارزښتونه ما ته اجازه ورکوي:
یو واحد بنسټ رنګ تعریف کړئ، تشریح کړئ چې نور رنګونه څنګه ورسره تړاو لري، دا اړیکې هرچیرې بیا وکاروئ، او د یو ارزښت په بدلولو سره سیسټم متحرک کړئ.
نسبي رنګ یوازې د موضوع جوړول اسانه نه کوي. دا د فکر کولو یوه لاره هڅوي چیرې چې رنګ، لکه حرکت، قصدي وي - او چیرې چې د یو ارزښت بدلول کولی شي ټوله صحنه بدل کړي پرته له دې چې لاندې کار بیا لیکل شي.
