گریڈینٹ جنریٹر کا تعارف اور بنیادی کام
"گریڈینٹ جنریٹر" ایک ایسا آن لائن ٹول ہے جو آپ کو اپنی مرضی کے مطابق CSS گریڈینٹ تیار کرنے کی سہولت دیتا ہے۔ اس ٹول کی مدد سے آپ گریڈینٹ کی قسم منتخب کر سکتے ہیں، اس کی سمت یا شکل کو ایڈجسٹ کر سکتے ہیں، اور آٹھ تک کلر اسٹاپس شامل کر سکتے ہیں۔ جیسے جیسے آپ ٹول میں تبدیلیاں کرتے ہیں، آپ کو گریڈینٹ کا لائیو پری ویو (Preview) نظر آتا ہے اور آپ صرف ایک کلک کے ذریعے تیار کردہ CSS کوڈ کو کاپی کر سکتے ہیں۔
یہ ٹول مختلف صارفین کی ضروریات کو پورا کرتا ہے:
- ایسے افراد جو اپنی ویب سائٹ کے لیے CSS بیک گراؤنڈ بنانا چاہتے ہیں۔
- ایسے صارفین جنہیں گریڈینٹ کے لیے صرف دو رنگوں اور ایک سمت کو ایڈجسٹ کرنے کی ضرورت ہوتی ہے۔
- ایسے ڈیزائنرز یا فرنٹ اینڈ ڈویلپرز جنہیں گریڈینٹ کی قسم، پوزیشن، اور متعدد کلر اسٹاپس کو باریک بینی سے ایڈجسٹ کرنے کی ضرورت پیش آتی ہے۔
جب آپ اس ٹول کو پہلی بار کھولتے ہیں، تو ابتدائی گریڈینٹ میں دو کلر اسٹاپس شامل ہوتے ہیں جو کہ #6366f1 0% اور #ec4899 100% پر مشتمل ہوتے ہیں۔
ان پٹ اور کنٹرولز کی تفصیلات
گریڈینٹ جنریٹر میں اپنی پسند کا ڈیزائن تیار کرنے کے لیے درج ذیل ان پٹس اور کنٹرولز فراہم کیے گئے ہیں:
- گریڈینٹ کی قسم: آپ تین اقسام میں سے کسی ایک کا انتخاب کر سکتے ہیں جن میں "خطی"، "شعاعی"، یا "مخروطی" شامل ہیں۔
- زاویہ (Angle): یہ ایک عددی ویلیو ہے جو خطی (linear) یا مخروطی (conic) گریڈینٹس کے لیے استعمال ہوتی ہے۔
- شکل: شعاعی (radial) گریڈینٹس کے لیے آپ "بیضوی" یا "دائرہ" کی شکل منتخب کر سکتے ہیں۔
- کلر اسٹاپس: آپ گریڈینٹ میں زیادہ سے زیادہ آٹھ کلر اسٹاپس شامل کر سکتے ہیں۔ ہر اسٹاپ کے لیے درج ذیل کنٹرولز ہوتے ہیں:
- اسٹاپ کا رنگ: رنگ کی ایک مخصوص ویلیو۔
- پوزیشن: 0% سے لے کر 100% تک کی فیصد ویلیو۔ جب بھی آپ کوئی نیا کلر اسٹاپ شامل کرتے ہیں، تو ڈیفالٹ طور پر اس کی پوزیشن 50% سیٹ ہوتی ہے۔
آؤٹ پٹ اور کوڈ کا حصول
ٹول کا استعمال کرتے ہوئے آپ کو فوری طور پر دو قسم کے آؤٹ پٹ حاصل ہوتے ہیں:
- پری ویو (Preview): یہ گریڈینٹ کی ایک بصری شکل پیش کرتا ہے جس سے آپ کو فوری اندازہ ہوتا ہے کہ آپ کا ڈیزائن کیسا دکھ رہا ہے۔
- CSS: یہ گریڈینٹ کے لیے تیار کردہ حتمی CSS کوڈ ہوتا ہے۔
جب آپ کا ڈیزائن مکمل ہو جائے تو آپ "CSS کاپی کریں" بٹن پر کلک کر کے کوڈ کاپی کر سکتے ہیں۔ کلک کرنے کے بعد، بٹن کی حالت تبدیل ہو کر "Copied" ہو جاتی ہے جس سے یہ تصدیق ہوتی ہے کہ کوڈ کامیابی سے کاپی ہو چکا ہے۔
گریڈینٹ کی اقسام اور ان کے اصول
مختلف ڈیزائنز بنانے کے لیے گریڈینٹ کی تینوں اقسام کے کام کرنے کا طریقہ کار درج ذیل ہے:
- خطی گریڈینٹ: یہ رنگوں کو ایک سیدھی لکیر میں آپس میں ملاتا ہے۔ اس لکیر کی سمت کا تعین زاویے (angle) سے ہوتا ہے۔
- شعاعی گریڈینٹ: یہ رنگوں کو مرکز سے باہر کی طرف دائرے یا بیضوی شکل میں پھیلاتا ہے۔ شعاعی گریڈینٹس میں زاویے کا استعمال نہیں ہوتا، بلکہ اس کی جگہ آپ کو دائرہ یا بیضوی شکل منتخب کرنی ہوتی ہے۔
- مخروطی گریڈینٹ: یہ رنگوں کو ایک کلر وہیل کی طرح مرکز کے گرد گھماتا ہے۔
زاویہ سیٹ کرنے کے لیے اینگل سلائیڈر کا استعمال کیا جاتا ہے۔ اس سلائیڈر میں 0° کا مطلب اوپر کی طرف اشارہ ہے، جبکہ 90° دائیں طرف اشارہ کرتا ہے۔
کلر اسٹاپس کے قوانین اور حد بندی
کلر اسٹاپس گریڈینٹ کے ڈیزائن میں بنیادی کردار ادا کرتے ہیں:
- ہر کلر اسٹاپ دراصل ایک رنگ ہوتا ہے جو گریڈینٹ کے ساتھ ایک مخصوص پوزیشن پر پن کیا جاتا ہے۔ اس میں 0% گریڈینٹ کے آغاز کو اور 100% گریڈینٹ کے اختتام کو ظاہر کرتا ہے۔
- آپ اس ٹول میں زیادہ سے زیادہ آٹھ کلر اسٹاپس استعمال کر سکتے ہیں۔
- جیسے ہی کلر اسٹاپس کی تعداد آٹھ تک پہنچتی ہے، تو مزید اسٹاپس شامل کرنے والا بٹن یعنی "اسٹاپ شامل کریں" غیر فعال (disabled) ہو جاتا ہے۔
رازداری اور ڈیٹا پروسیسنگ
اس ٹول کو استعمال کرتے ہوئے آپ کی رازداری کا مکمل خیال رکھا جاتا ہے۔ ہر گریڈینٹ براہ راست آپ کے براؤزر میں تیار کیا جاتا ہے، اور آپ جو کچھ بھی ٹول میں سیٹ کرتے ہیں، اس میں سے کوئی بھی چیز BroBroGo پر اپ لوڈ نہیں کی جاتی۔
اکثر پوچھے گئے سوالات (FAQ)
linear، radial اور conic گریڈینٹس میں کیا فرق ہے؟
لکیری (linear) گریڈینٹ رنگوں کو ایک سیدھی لکیر میں ملاتا ہے جسے آپ زاویے سے کنٹرول کرتے ہیں۔ ریڈیل (radial) گریڈینٹ انہیں مرکز سے باہر کی طرف دائرے یا بیضوی شکل میں پھیلاتا ہے۔ مخروطی (conic) گریڈینٹ انہیں کلر وہیل کی طرح مرکز کے گرد گھماتا ہے۔
کلر اسٹاپس (color stops) کیا ہیں؟
ہر کلر اسٹاپ گریڈینٹ کے ساتھ ایک مخصوص پوزیشن پر پن کیا گیا رنگ ہوتا ہے — شروع میں 0%، آخر میں 100%۔ کسی رنگ کے عروج کی جگہ کو تبدیل کرنے کے لیے اسٹاپ کو منتقل کریں، یا مزیدار امتزاج کے لیے مزید اسٹاپس شامل کریں۔ آپ زیادہ سے زیادہ آٹھ استعمال کر سکتے ہیں۔
میں سمت کو کیسے کنٹرول کروں؟
لکیری (linear) یا مخروطی (conic) گریڈینٹ کے لیے، اینگل سلائیڈر سمت کا تعین کرتا ہے — 0° اوپر کی طرف اور 90° دائیں طرف اشارہ کرتا ہے۔ ریڈیل (radial) گریڈینٹ کا کوئی زاویہ نہیں ہوتا؛ اس کے پھیلاؤ کو تبدیل کرنے کے لیے دائرہ یا بیضوی شکل منتخب کریں۔