سی ایس ایس گریڈیئنٹس کے بارے میں کچھ لنکس

ہر ایک بار تھوڑی دیر میں، بلاگنگ زیٹجیسٹ کسی خاص موضوع کے ارد گرد اکٹھا ہوتا دکھائی دیتا ہے اور ایسا لگتا ہے کہ میرے بُک مارکس فولڈر میں محفوظ کردہ مضامین گفتگو کر رہے ہیں۔ اب وہاں بیٹھی گفتگو سی ایس ایس گریڈیئنٹس کے بارے میں ہے اور میں نے سوچا کہ میں کچھ مزید دلچسپ ٹکڑوں کو لنک کروں گا۔

• دن 22: مخروطی میلان — Manuel Matuzovic نے جدید CSS کے بارے میں اپنی 21 روزہ سیریز کے 100 دن کونک گریڈیئنٹس کو دیکھا، جس سے رنگوں، زاویوں، جگہ کا تعین، اور رنگوں کے اسٹاپس پر ایک عمدہ اعلیٰ سطحی نظر ملتی ہے۔ پھر، پر دن 22، وہ اسے استعمال کرتا ہے۔ ::backdrop چھدم عنصر. (ویسے، ٹویٹر غیر متوقع طور پر اس کا اکاؤنٹ معطل کر دیا - اگر ہم کر سکتے ہیں تو اس جہاز کو ٹھیک کرنے میں مدد کریں۔)
• کیا آپ واقعی CSS ریڈیل گریڈینٹ کو سمجھتے ہیں؟ - پیٹرک بروسیٹ یہاں رہنمائی کے قابل کام کیا ہے اور میں ایمانداری سے اب بھی اس کے ذریعے کام کر رہا ہوں۔ لیکن میں پہلے سے اس کی واضح وضاحتوں اور چیزوں کے ڈیمو کی تعریف کرتا ہوں جو میں اب بھی مضطرب ہوں، جیسے ریڈیل گریڈینٹ کے سائز اور شکل کے لیے کلیدی الفاظ۔ میں پہلے ہی اس کو اپنے میں جوڑ رہا ہوں۔ CSS گریڈیئنٹس گائیڈ!
• انتہائی حسب ضرورت پس منظر گریڈیئنٹس - ارے، ریڈیل گریڈینٹ کی بات کرتے ہوئے، سکاٹ وینڈیےایک سے زیادہ رنگوں کے اسٹاپس کے ساتھ ایک کی ترکیب نے پچھلے ہفتے چکر لگائے۔ اس کا چیلنج ایک ایسا تدریجی نمونہ بنانا تھا جو مختلف رنگوں کی مختلف حالتوں کو سپورٹ کر سکے، جو کہ عام طور پر CSS کلاسز اور ہر تغیر کے لیے رنگ کی قدروں کا ایک گرم گڑبڑ ہو گا اگر استعمال نہ کیا جائے۔ کسٹم پراپرٹیز. اس طرح، وہ ہر کلر اسٹاپ کے لیے مختلف رنگوں اور پلیسمنٹ کی قدروں کے لیے ایک حسب ضرورت پراپرٹی تفویض کر سکتا ہے، پھر سیاق و سباق کے لحاظ سے صرف اقدار کو اپ ڈیٹ کر سکتا ہے۔ اور مزید یہ کہ جاوا اسکرپٹ کے ساتھ کسٹم پراپرٹیز کو اپ ڈیٹ کرنے کا طریقہ سکاٹ کو اجازت دی گئی۔ اس کے میلان پیٹرن کو اپنی مرضی کے مطابق بنانے کے لیے ایک ٹول بنائیں، جسے پوسٹ کے آخر میں دل کھول کر شیئر کیا گیا ہے۔
• سی ایس ایس ہاف ٹون پیٹرنز - مشیل بارکر اینا ٹیوڈر کے "ہالفٹون" پیٹرن کی تفصیلی خرابی کے ساتھ۔ اس کا اثر اسکول کے پرانے اخبارات کی سیاہی کے نشان کی طرح ہے۔ جبکہ اینا استعمال کرتی ہے۔ Houdini اینیمیشن اور ہوور ایفیکٹس کے لیے ہڈ کے نیچے، مشیل خاص طور پر ہاف ٹون اثر کو خود دیکھتی ہے اور یہ کہ اسے ریڈیل گریڈینٹ کے ساتھ کیسے بنایا گیا ہے۔ مجھے خاص طور پر مشیل کا یہ طریقہ پسند ہے کہ نقطوں کے سیدھے سادے گرڈ سے اس جگہ تک کیسے جانا ہے جہاں پیٹرن تھوڑا سا لڑکھڑا ہوا ہے۔ اور یہ دیکھنے کے لیے کہ وہ کس طرح اثر کو a کے ساتھ وقفے وقفے سے ختم کرتی ہے۔ mask-image جو دھندلاہٹ اثر پیدا کرنے کے لیے لکیری میلان کا استعمال کرتا ہے۔ میں اس پیٹرن کے ساتھ تھوڑا سا riffed, بھی، اور کسی ایسی صاف ستھری چیز سے زخم لگائیں جو بہتی ہوئی سیاہی کے دھبے کے فلٹر کی طرح نظر آتی ہے۔
• ایک تیز نوبار حل — ایرک میئر کو ایک مینو کے لیے ایک دلچسپ ڈیزائن چیلنج دیا گیا تھا جہاں ایک نقطے والی لائن "موجودہ صفحہ" کے لنک سے نکلتی ہے اور مواد کے کنٹینر کے بائیں کنارے کے ساتھ ایک بڑے نقطے والے بارڈر کا حصہ بن جاتی ہے۔ ایرک ہمیشہ کی ایک بہترین مثال ہے۔ فرنٹ اینڈ ڈویلپر کی طرح سوچنے کا طریقہ، اور وہ اسے یہاں کرتا ہے جیسا کہ وہ اس متبادل راستے کی وضاحت کرتا ہے جو اس نے ایک لکیری گریڈینٹ کا استعمال کرتے ہوئے لیا تھا جب اس نے ترتیب کے معیاری نقطہ نظر کے ساتھ ایک چھینٹا مارا تھا۔ border-style: dotted عنصر پر.
• نقاب پوش گریڈینٹ ڈیشڈ لائنز — ایرک اس آخری لنک کے فالو اپ کے ساتھ نہ صرف یہ دکھاتا ہے کہ اس نے کس طرح بائیں بارڈر کے ڈیشوں کو ایک راسٹر امیج کے ڈیشوں سے جوڑا، بلکہ کس طرح اس کی پرسنکیٹی ڈیزائن آئی نے اسے اس بات پر قائل کیا کہ وہ اس کے حل کو تبدیل کرنے کے لیے اس کے نچلے ریزولوشن کی نقل کرے۔ تصویر کے ڈیشز دو دہرائے جانے والے لکیری پس منظر کے میلان کو بطور a mask-image پس منظر کے میلان پر۔ اتنا بیوقوف اور زبردست!