میں نے حال ہی میں اپنی ویب سائٹ پر متحرک گرافکس کو ایک نئے تھیم اور اہم کرداروں کے ایک گروپ کے ساتھ تازہ کیا ہے، اس سیریز میں میں نے جو تکنیکیں شیئر کی ہیں ان کو عملی جامہ پہناتے ہوئے۔ جب کوئی ان کے ساتھ یا دن کے مختلف اوقات میں بات چیت کرتا ہے تو میری کچھ اینیمیشنز کی شکل بدل جاتی ہے۔
میرے بلاگ کے صفحات کے اوپر گرافک کے رنگ ہر روز صبح سے رات تک بدلتے رہتے ہیں۔ اس کے بعد، برف کا موڈ ہے، جو سرد رنگوں اور موسم سرما کی تھیم کو شامل کرتا ہے، بشکریہ ایک اوورلے پرت اور بلینڈنگ موڈ۔
اس پر کام کرتے ہوئے، میں نے سوچنا شروع کر دیا کہ کیا CSS کی متعلقہ رنگ کی قدریں مجھے مزید کنٹرول دے سکتی ہیں اور اس عمل کو آسان بناتی ہیں۔ نوٹ: اس ٹیوٹوریل میں، میں رنگین اقدار اور تھیمنگ گرافکس اور اینیمیشنز کے لیے OKLCH رنگ کی جگہ پر توجہ دوں گا۔ اگر آپ متعلقہ رنگوں میں گہرا غوطہ لگانا چاہتے ہیں تو احمد شید نے ایک شاندار انٹرایکٹو گائیڈ تیار کیا۔ جہاں تک رنگین جگہوں، گامٹس اور OKLCH کا تعلق ہے، ہمارے اپنے جیوف گراہم نے ان کے بارے میں لکھا ہے۔
عناصر کا بار بار استعمال کلیدی تھا۔ جب بھی ممکن ہو پس منظر کو دوبارہ استعمال کیا گیا، اسی آرٹ ورک سے نئے مناظر بنانے میں زوم اور اوورلیز کی مدد سے۔ یہ ضرورت سے پیدا ہوا تھا، لیکن اس نے انفرادی مناظر کے بجائے سیریز کے لحاظ سے سوچنے کی حوصلہ افزائی کی۔ رنگ پیلیٹ کو دستی طور پر اپ ڈیٹ کرنے میں مسئلہ آئیے سیدھے میرے چیلنج پر جائیں۔ اس طرح کے ٹون ٹائٹلز میں - 1959 کے یوگی بیئر شو کے ایپی سوڈ "لولی بائے بیئر" پر مبنی - اور میرا کام عام طور پر، پیلیٹس چند رنگوں تک محدود ہیں۔
میں اس سے شیڈز اور ٹنٹ بناتا ہوں جسے میں اپنا "فاؤنڈیشن" کلر کہتا ہوں تاکہ مزید رنگوں کو شامل کیے بغیر پیلیٹ کو بڑھایا جا سکے۔
Sketch میں، میں HSL کلر اسپیس میں کام کرتا ہوں، اس لیے اس عمل میں میرے فاؤنڈیشن کلر کی ہلکی پن کی قدر کو بڑھانا یا کم کرنا شامل ہے۔ سچ میں، یہ کوئی مشکل کام نہیں ہے — لیکن ایک مختلف فاؤنڈیشن رنگ کا انتخاب کرنے کے لیے شیڈز اور ٹنٹ کا ایک مکمل نیا سیٹ بنانے کی ضرورت ہوتی ہے۔ اسے دستی طور پر کرنا، بار بار، تیزی سے محنت طلب ہو جاتا ہے۔
میں نے HSL — H (Hue)، S (سنترپتی)، اور L (ہلکی پن) — رنگ کی جگہ کا ذکر کیا، لیکن یہ رنگ کو بیان کرنے کے کئی طریقوں میں سے صرف ایک ہے۔ آر جی بی - آر (سرخ)، جی (سبز)، بی (نیلے) - شاید سب سے زیادہ واقف ہے، کم از کم اس کی ہیکس شکل میں۔ یہاں LAB — L (ہلکا پن)، A (سبز-سرخ)، B (نیلا-پیلا) — اور جدید تر، لیکن اب وسیع پیمانے پر تعاون یافتہ LCH — L (ہلکا پن)، C (کروما)، H (hue) — ماڈل اپنی OKLCH شکل میں بھی ہے۔ LCH کے ساتھ — خاص طور پر CSS میں OKLCH — میں اپنے فاؤنڈیشن کے رنگ کی ہلکی قدر کو ایڈجسٹ کر سکتا ہوں۔
یا میں اس کے کروما کو تبدیل کر سکتا ہوں۔ LCH کروما اور HSL سنترپتی دونوں رنگ کی شدت یا بھرپوریت کو بیان کرتے ہیں، لیکن وہ ایسا مختلف طریقوں سے کرتے ہیں۔ LCH مجھے رنگوں کے درمیان ایک وسیع رینج اور زیادہ متوقع ملاوٹ فراہم کرتا ہے۔
میں رنگوں کا ایک پیلیٹ بنانے کے لیے رنگت کو بھی تبدیل کر سکتا ہوں جو یکساں ہلکے پن اور کروما کی قدروں کا اشتراک کریں۔ HSL اور LCH دونوں میں، ہیو سپیکٹرم سرخ سے شروع ہوتا ہے، سبز اور نیلے رنگ سے گزرتا ہے، اور واپس سرخ ہو جاتا ہے۔
میں رنگ کے بارے میں کیسے سوچتا ہوں کیوں OKLCH نے تبدیل کیا۔ OKLCH کلر اسپیس کے لیے براؤزر سپورٹ اب وسیع ہے، یہاں تک کہ اگر ڈیزائن ٹولز — بشمول Sketch — نے پکڑا نہیں ہے۔ خوش قسمتی سے، اس سے آپ کو OKLCH استعمال کرنے سے نہیں روکنا چاہیے۔ براؤزر خوشی سے آپ کے لیے ہیکس، ایچ ایس ایل، ایل اے بی، اور آر جی بی اقدار کو OKLCH میں تبدیل کر دیں گے۔ آپ کسی بھی جگہ میں فاؤنڈیشن کلر کے ساتھ CSS کسٹم پراپرٹی کی وضاحت کر سکتے ہیں، بشمول Hex: /* بنیاد کا رنگ*/ --فاؤنڈیشن: #5acd6؛
اس سے اخذ کردہ کوئی بھی رنگ خود بخود OKLCH میں تبدیل ہو جائیں گے: --فاؤنڈیشن-لائٹ: اوکلچ(وار(-فاؤنڈیشن) سے [...]؛ } --foundation-mid: oklch(var(-foundation) سے [...]؛ } --foundation-dark: oklch(var(-foundation) سے [...]؛ }
ایک ڈیزائن کے نظام کے طور پر رشتہ دار رنگ یہ کہتے ہوئے رشتہ دار رنگ کے بارے میں سوچیں: "یہ رنگ لے لو، اسے ٹھیک کرو، پھر مجھے نتیجہ دو۔" رنگ کو ایڈجسٹ کرنے کے دو طریقے ہیں: مطلق تبدیلیاں اور متناسب تبدیلیاں۔ وہ کوڈ میں ایک جیسے نظر آتے ہیں، لیکن جب آپ فاؤنڈیشن کے رنگوں کو تبدیل کرنا شروع کر دیتے ہیں تو بہت مختلف طریقے سے برتاؤ کرتے ہیں۔ اس فرق کو سمجھنا وہی ہے جو رشتہ دار رنگ کا استعمال کرتے ہوئے سسٹم میں بدل سکتا ہے۔ /* بنیاد کا رنگ*/ --فاؤنڈیشن: #5acd6؛
مثال کے طور پر، میرے فاؤنڈیشن کے رنگ کی ہلکی قدر 0.7837 ہے، جبکہ گہرے ورژن کی قدر 0.5837 ہے۔ فرق کا حساب لگانے کے لیے، میں اعلی سے کم قیمت کو گھٹاتا ہوں اور calc() فنکشن کا استعمال کرتے ہوئے نتیجہ لاگو کرتا ہوں: --فاؤنڈیشن ڈارک: oklch(var(--فاؤنڈیشن) سے کیلک (l - 0.20) c h)؛
ہلکا رنگ حاصل کرنے کے لیے، میں اس کے بجائے فرق شامل کرتا ہوں: --فاؤنڈیشن لائٹ: oklch(var(--فاؤنڈیشن) سے کیلک (l + 0.10) c h)؛
کروماایڈجسٹمنٹ اسی عمل کی پیروی کرتے ہیں. اپنے فاؤنڈیشن کے رنگ کی شدت کو 0.1035 سے 0.0035 تک کم کرنے کے لیے، میں ایک قدر کو دوسری سے گھٹاتا ہوں: oklch(var(--فاؤنڈیشن) سے l کیلک (c - 0.10) h)؛
رنگوں کا پیلیٹ بنانے کے لیے، میں اپنے فاؤنڈیشن کلر (200) اور اپنے نئے رنگ (260) کی ہیو ویلیو کے درمیان فرق کا حساب لگاتا ہوں: oklch(var(--فاؤنڈیشن) سے l c کیلک (h + 60))؛
وہ حسابات مطلق ہیں۔ جب میں ایک مقررہ رقم کو منہا کرتا ہوں، تو میں مؤثر طریقے سے کہہ رہا ہوں، "ہمیشہ اتنا گھٹاؤ۔" مقررہ اقدار کو شامل کرتے وقت بھی یہی لاگو ہوتا ہے: کیلک (c - 0.10) کیلک (c + 0.10)
میں نے اس نقطہ نظر کی حدود کو مشکل طریقے سے سیکھا۔ جب میں نے فکسڈ کروما ویلیوز کو گھٹانے پر انحصار کیا تو جیسے ہی میں نے فاؤنڈیشن تبدیل کی تو رنگ گرے ہو گئے۔ ایک پیلیٹ جو ایک رنگ کے لیے کام کرتا تھا دوسرے کے لیے الگ ہو گیا۔ ضرب مختلف طریقے سے برتاؤ کرتی ہے۔ جب میں کروما کو ضرب دیتا ہوں، تو میں براؤزر سے کہہ رہا ہوں: "اس رنگ کی شدت کو تناسب سے کم کریں۔" رنگوں کے درمیان تعلق برقرار رہتا ہے، یہاں تک کہ جب بنیاد بدل جائے: کیلک (c * 0.10)
مائی موو اٹ، اسکیل اٹ، روٹیٹ اٹ رولز
ہلکا پن منتقل کریں (شامل یا گھٹائیں) اسکیل کروما (ضرب) رنگت کو گھمائیں (ڈگری شامل کریں یا گھٹائیں)۔
میں کروما کی پیمائش کرتا ہوں کیونکہ میں چاہتا ہوں کہ شدت کی تبدیلیاں بنیادی رنگ کے متناسب رہیں۔ رنگت کے رشتے گردشی ہوتے ہیں، لہٰذا رنگت کو ضرب دینا کوئی معنی نہیں رکھتا۔ ہلکا پن ادراک اور مطلق ہے — اسے ضرب دینے سے اکثر عجیب نتائج برآمد ہوتے ہیں۔
ایک رنگ سے لے کر پوری تھیم تک متعلقہ رنگ مجھے فاؤنڈیشن کے رنگ کی وضاحت کرنے اور اس سے ہر دوسرے رنگ پیدا کرنے کی اجازت دیتا ہے جس کی مجھے ضرورت ہے — فلز، اسٹروک، گریڈیئنٹ اسٹاپس، شیڈو —۔ اس وقت، رنگ پیلیٹ بننا بند کر دیتا ہے اور ایک نظام بننا شروع کر دیتا ہے۔ SVG عکاسیوں میں فلز، اسٹروک اور گریڈیئنٹس میں وہی چند رنگ دوبارہ استعمال ہوتے ہیں۔ متعلقہ رنگ آپ کو ان رشتوں کی ایک بار وضاحت کرنے اور انہیں ہر جگہ دوبارہ استعمال کرنے دیتا ہے — بالکل اسی طرح جیسے اینیمیٹر نئے مناظر بنانے کے لیے پس منظر کو دوبارہ استعمال کرتے ہیں۔
فاؤنڈیشن کا رنگ ایک بار تبدیل کریں، اور ہر اخذ کردہ رنگ خود بخود اپ ڈیٹ ہوجاتا ہے، بغیر ہاتھ سے کسی چیز کا دوبارہ حساب لگائے۔ اینیمیٹڈ گرافکس کے باہر، میں بٹن اور لنکس جیسے انٹرایکٹو عناصر کی حالتوں کے لیے رنگوں کی وضاحت کرنے کے لیے یہی طریقہ استعمال کر سکتا ہوں۔ فاؤنڈیشن کا رنگ جو میں نے اپنے "Lullabye-Bye Bear" Toon ٹائٹل میں استعمال کیا ہے وہ نیلا نظر آنے والا نیلا ہے۔ پس منظر میری فاؤنڈیشن اور گہرے ورژن کے درمیان ریڈیل گریڈینٹ ہے۔
مکمل طور پر مختلف موڈ کے ساتھ متبادل ورژن بنانے کے لیے، مجھے صرف فاؤنڈیشن کا رنگ تبدیل کرنے کی ضرورت ہے: --فاؤنڈیشن: #5acd6؛ --گریڈ اینڈ: var(-فاؤنڈیشن)؛ --grad-start: oklch(var(--فاؤنڈیشن سے) calc(l - 0.2357) calc(c * 0.833) h)؛
رنگ کی قدروں کو نقل کیے بغیر ان حسب ضرورت خصوصیات کو اپنے SVG گریڈینٹ سے باندھنے کے لیے، میں نے ہارڈ کوڈڈ اسٹاپ کلر ویلیوز کو ان لائن اسٹائلز سے بدل دیا:
اس کے بعد، مجھے اس بات کو یقینی بنانے کی ضرورت ہے کہ میرا ٹون متن ہمیشہ اس فاؤنڈیشن کے رنگ سے متصادم ہو جو میں نے منتخب کیا ہے۔ ایک 180 ڈگری رنگت کی گردش ایک تکمیلی رنگ پیدا کرتی ہے جو یقینی طور پر ٹمٹمانے - لیکن غیر آرام دہ طور پر ہل سکتا ہے: متن کی روشنی { بھریں: oklch(var(--فاؤنڈیشن) سے l c کیلک (h + 180))؛ }
ایک 90° شفٹ مکمل طور پر تکمیلی ہونے کے بغیر ایک واضح ثانوی رنگ پیدا کرتا ہے: متن کی روشنی { بھریں: oklch(var(--فاؤنڈیشن) سے l c کیلک (h - 90))؛ }
Quick Draw McGraw کے 1959 Toon ٹائٹل "El Kabong" کی میری تفریح ایک ہی تکنیک کا استعمال کرتی ہے لیکن زیادہ متنوع پیلیٹ کے ساتھ۔ مثال کے طور پر، فاؤنڈیشن کے رنگ اور گہرے شیڈ کے درمیان ایک اور ریڈیل گریڈینٹ ہے۔
پس منظر میں عمارت اور درخت ایک ہی بنیاد کے رنگ کے مختلف شیڈز ہیں۔ ان راستوں کے لیے، مجھے دو اضافی بھرنے والے رنگوں کی ضرورت تھی: .bg-mid { بھریں: oklch(var(--فاؤنڈیشن) سے calc(l - 0.04) calc(c * 0.91) h)؛ }
بی جی ڈارک { بھریں: oklch(var(--فاؤنڈیشن) سے calc(l - 0.12) calc(c * 0.64) h)؛ }
جب بنیادیں حرکت کرنے لگیں۔
اب تک، میں نے جو کچھ دکھایا ہے وہ جامد ہے۔ یہاں تک کہ جب کوئی فاؤنڈیشن کا رنگ تبدیل کرنے کے لیے رنگ چننے والا استعمال کرتا ہے، تب بھی یہ تبدیلی فوراً ہو جاتی ہے۔ لیکن متحرک گرافکس شاذ و نادر ہی کھڑے رہتے ہیں - اشارہ نام میں ہے۔ لہذا، اگر رنگ سسٹم کا حصہ ہے، تو اس کی کوئی وجہ نہیں ہے کہ یہ بھی متحرک نہیں ہو سکتا۔
فاؤنڈیشن کے رنگ کو متحرک کرنے کے لیے، مجھے پہلے اسے اس کے OKLCH چینلز میں تقسیم کرنے کی ضرورت ہے۔- ہلکا پن، کروما، اور رنگت۔ لیکن ایک اہم اضافی مرحلہ ہے: مجھے ان اقدار کو ٹائپ کردہ حسب ضرورت خصوصیات کے طور پر رجسٹر کرنے کی ضرورت ہے۔ لیکن اس کا کیا مطلب ہے؟
پہلے سے طے شدہ طور پر، ایک براؤزر نہیں جانتا کہ آیا CSS کسٹم پراپرٹی ویلیو رنگ، لمبائی، نمبر، یا کسی اور چیز کو مکمل طور پر ظاہر کرتی ہے۔ اس کا اکثر مطلب یہ ہوتا ہے کہ اینیمیشن کے دوران ان کو آسانی سے انٹرپول نہیں کیا جا سکتا، اور ایک قدر سے دوسری قیمت تک چھلانگ لگانا۔
اپنی مرضی کے مطابق پراپرٹی کو رجسٹر کرنا براؤزر کو بتاتا ہے کہ وہ کس قدر کی نمائندگی کرتا ہے اور اسے وقت کے ساتھ کیسا برتاؤ کرنا چاہیے۔ اس صورت میں، میں چاہتا ہوں کہ براؤزر میرے کلر چینلز کو نمبرز کے طور پر دیکھے تاکہ وہ آسانی سے متحرک ہو سکیں۔
@property --f-l {
نحو: "
@property --f-c {
نحو: "
@property --f-h {
نحو: "
ایک بار رجسٹر ہونے کے بعد، یہ حسب ضرورت خصوصیات مقامی 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 کے متعلقہ رنگ کی قدریں زیادہ امکانات پیش کر سکتی ہیں جبکہ ان کو لاگو کرنے کے لیے آسان بھی بناتی ہیں۔ میں نے حال ہی میں اپنی ویب سائٹ کے رابطہ صفحہ میں سونے کی کان کا ایک نیا پس منظر شامل کیا ہے، اور پہلی تکرار میں تیل کے لیمپ شامل ہیں جو چمکتے اور جھومتے ہیں۔
میں یہ جاننا چاہتا تھا کہ سی ایس ایس کے متعلقہ رنگوں کو متحرک کرنے سے کان کے اندرونی حصے کو لیمپوں کے رنگوں سے رنگ کر کے مزید حقیقت پسندانہ بنایا جا سکتا ہے۔ میں چاہتا تھا کہ وہ اپنے ارد گرد کی دنیا کو متاثر کریں، جس طرح حقیقی روشنی کرتی ہے۔ لہذا، ایک سے زیادہ رنگوں کو متحرک کرنے کے بجائے، میں نے ایک چھوٹا سا لائٹنگ سسٹم بنایا جو صرف ایک رنگ کو متحرک کرتا ہے۔
میرا پہلا کام پس منظر اور میرے لیمپ کے درمیان ایک اوورلے پرت کو سلاٹ کرنا تھا: <راستہ id="overlay" fill="var(-overlay-tint)" [...] style="mix-blend-mode: color" />
میں نے 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 {
نحو: "
میں نے ان چینلز کو متحرک کیا، جان بوجھ کر کچھ فریموں کو نارنجی کی طرف دھکیل دیا تاکہ ٹمٹماہٹ واضح طور پر آگ کی روشنی کے طور پر پڑھے:
@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-reduced-motion: no-preference) { .svg-mine[data-animations=on] { حرکت پذیری: شعلہ 3.6s لامحدود لکیری؛ isolation : الگ تھلگ
/* متحرک چینلز سے شعلہ رنگ بنائیں */ --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(-flame) سے 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؛ } }
جب شعلہ نارنجی کی طرف بڑھتا ہے، تو چراغ گرم ہو جاتے ہیں، اور منظر ان کے ساتھ گرم ہو جاتا ہے۔ جب شعلہ ٹھنڈا ہوجاتا ہے تو سب کچھ ایک ساتھ حل ہوجاتا ہے۔ سب سے اچھی بات یہ ہے کہ کچھ بھی دستی طور پر نہیں لکھا جاتا۔ اگر میں فاؤنڈیشن کا رنگ تبدیل کرتا ہوں یا شعلہ اینیمیشن رینجز کو موافقت دیتا ہوں، تو پورا لائٹنگ سسٹم بیک وقت اپ ڈیٹ ہوجاتا ہے۔ آپ میری ویب سائٹ پر حتمی نتیجہ دیکھ سکتے ہیں۔ دوبارہ استعمال کریں، دوبارہ استعمال کریں، دوبارہ دیکھیں وہ Hanna-Barbera متحرک عناصر کو ضرورت کے تحت دوبارہ تیار کرنے پر مجبور کیا گیا تھا، لیکن میں رنگوں کو دوبارہ استعمال کرتا ہوں کیونکہ یہ میرے کام کو مزید مستقل اور برقرار رکھنے میں آسان بناتا ہے۔ CSS متعلقہ رنگ کی قدریں مجھے اجازت دیتی ہیں:
ایک سنگل فاؤنڈیشن رنگ کی وضاحت کریں، بیان کریں کہ دوسرے رنگوں کا اس سے کیا تعلق ہے، ان رشتوں کو ہر جگہ دوبارہ استعمال کریں، اور ایک قدر کو تبدیل کرکے نظام کو متحرک کریں۔
متعلقہ رنگ صرف تھیمنگ کو آسان نہیں بناتا ہے۔ یہ سوچنے کے اس طریقے کی حوصلہ افزائی کرتا ہے جہاں رنگ، جیسے حرکت، جان بوجھ کر ہو — اور جہاں ایک قدر کو تبدیل کرنے سے اس کے نیچے کام کو دوبارہ لکھے بغیر پورے منظر کو تبدیل کیا جا سکتا ہے۔
