CSS Border Radius کا بنیادی طریقہ کار
CSS میں border-radius پراپرٹی کسی بھی باکس کے کونوں کی گولائی کو کنٹرول کرنے کے لیے استعمال ہوتی ہے۔ یہ ٹول آپ کو ایک بصری انٹرفیس فراہم کرتا ہے جس کے ذریعے آپ باکس کے کونوں کو اپنی مرضی کے مطابق ڈھال سکتے ہیں۔ آپ ہر کونے کو انفرادی طور پر ایڈجسٹ کر سکتے ہیں یا انہیں آپس میں لنک کر کے ایک ساتھ تبدیل کر سکتے ہیں۔ اس کے علاوہ، یہ ٹول پکسل (px) اور فیصد (%) دونوں یونٹس کو سپورٹ کرتا ہے۔
جب آپ اس ٹول کو پہلی بار کھولتے ہیں، تو سلائیڈر کی ابتدائی ویلیو 24 ہوتی ہے، جس کے نتیجے میں درج ذیل CSS کوڈ تیار ہوتا ہے:
border-radius: 24px;
یہ ٹول آپ کے ڈیزائن کے مطابق فوری طور پر CSS کوڈ تیار کرتا ہے جسے آپ براہ راست اپنے ویب پروجیکٹس میں استعمال کر سکتے ہیں۔
ان پٹ کنٹرولز اور ان کا استعمال
ٹول کے انٹرفیس میں ڈیزائن کو کنٹرول کرنے کے لیے درج ذیل ان پٹ کنٹرولز فراہم کیے گئے ہیں:
- سلائیڈرز: ان سلائیڈرز کی رینج 0 سے 100 تک ہوتی ہے۔ جب تمام کونے آپس میں لنک ہوں، تو ایک ہی سلائیڈر جس کا لیبل "تمام کونے" ہے، چاروں کونوں کو کنٹرول کرتا ہے۔ جب کونے ان لنک ہوں، تو چار الگ سلائیڈرز دستیاب ہوتے ہیں جن کے لیبل "اوپر بائیں"، "اوپر دائیں"، "نیچے دائیں"، اور "نیچے بائیں" ہیں۔ بیضوی موڈ میں، ہر کونے کے لیے "افقی" اور "عمودی" سلائیڈرز بھی فعال ہو جاتے ہیں۔
- یونٹ سلیکٹر: اس کی مدد سے آپ پکسل "px" اور فیصد "%" کے درمیان سوئچ کر سکتے ہیں۔
- تمام کونوں کو لنک کریں ٹوگل: اس بٹن کے ذریعے آپ کونوں کی ایڈجسٹمنٹ کو آپس میں جوڑ یا الگ کر سکتے ہیں۔
- بیضوی (Elliptical) کونے ٹوگل: اس ٹوگل کی مدد سے بیضوی موڈ کو آن یا آف کیا جا سکتا ہے۔
- پری سیٹس: فوری ڈیزائننگ کے لیے پانچ بٹن فراہم کیے گئے ہیں جن کے لیبل "نوک دار"، "گول"، "دائرہ"، "Blob"، اور "پتا" ہیں。
آؤٹ پٹ اور کوڈ کا حصول
ٹول کے ذریعے حاصل ہونے والے نتائج کو دو حصوں میں دیکھا جا سکتا ہے:
- پری ویو: ایک بصری باکس جو آپ کی منتخب کردہ ترتیبات اور بارڈر ریڈیس کے مطابق فوری طور پر اپنی شکل تبدیل کرتا ہے۔
- CSS کوڈ: یہ کوڈ "CSS" ہیڈنگ کے نیچے ظاہر ہوتا ہے۔ اس کوڈ کو کاپی کرنے کے لیے "CSS کاپی کریں" کا بٹن فراہم کیا گیا ہے جس پر کلک کر کے آپ کوڈ کو کلپ بورڈ پر منتقل کر سکتے ہیں۔
پکسل اور فیصد یونٹس کا فرق
بارڈر ریڈیس میں یونٹ کا انتخاب ڈیزائن کے برتاؤ پر گہرا اثر ڈالتا ہے۔ پکسل (px) یونٹ استعمال کرنے سے کونا ایک مقررہ حد تک گول ہوتا ہے اور باکس کا سائز تبدیل ہونے سے اس کی گولائی پر کوئی فرق نہیں پڑتا۔
اس کے برعکس، فیصد (%) یونٹ باکس کے مجموعی سائز کے تناسب سے کام کرتا ہے۔ اس میں افقی فیصد باکس کی چوڑائی (width) کے مطابق اور عمودی فیصد باکس کی اونچائی (height) کے مطابق لاگو ہوتا ہے۔ اگر آپ ایک چوکور (square) باکس کے تمام کونوں کو 50% پر سیٹ کریں گے، تو وہ مکمل طور پر ایک دائرے میں تبدیل ہو جائے گا۔
بیضوی (Elliptical) موڈ کی وضاحت
عام حالات میں جب بیضوی موڈ آف ہوتا ہے، تو ہر کونا ایک دائرے کا چوتھائی حصہ ہوتا ہے جس کا صرف ایک ہی ریڈیس ہوتا ہے۔ لیکن جب آپ بیضوی موڈ کو آن کرتے ہیں، تو ہر کونے کو الگ افقی اور عمودی ریڈیس مل جاتا ہے۔
اس موڈ میں، CSS کوڈ لکھنے کا طریقہ کار تبدیل ہو جاتا ہے اور یہ دو ویلیوز والی سلیش (/) فارم میں کوڈ تیار کرتا ہے۔ جیسے ہی آپ بیضوی موڈ کو بند کرتے ہیں اور کونے دوبارہ عام گول شکل میں آتے ہیں، تو جنریٹر خود بخود مختصر فارم (short form) پر واپس آ جاتا ہے۔ اس موڈ کا استعمال کر کے آپ غیر متناسب اور نامیاتی "blob" شکلیں بنا سکتے ہیں۔
دائرہ اور گولی نما (Pill) شکلیں بنانے کی تکنیک
ویب ڈیزائننگ میں دائرے اور گولی نما بٹن بنانے کے لیے مخصوص اصول کام کرتے ہیں:
- کامل دائرہ (Perfect Circle): ایک چوکور عنصر کو دائرہ بنانے کے لیے، کونوں کو آپس میں لنک کریں، یونٹ کو فیصد (%) پر سیٹ کریں، اور سلائیڈر کو 50% پر لے جائیں۔ ٹول میں موجود "دائرہ" کا پری سیٹ بھی تمام کونوں کو فوری طور پر 50% پر سیٹ کر دیتا ہے۔
- گولی نما بٹن (Pill-shaped Button): اس شکل کے لیے یونٹ کو پکسلز (px) پر رکھیں اور سلائیڈر کو بٹن کی کل اونچائی کے آدھے حصے سے زیادہ کی ویلیو پر سیٹ کریں۔ اس طریقے سے بٹن کی چوڑائی جتنی بھی زیادہ ہو، اس کے اطراف ہمیشہ مکمل طور پر گول رہیں گے اور ڈیزائن خراب نہیں ہوگا۔
ڈیٹا پروسیسنگ اور رازداری
اس ٹول میں رازداری کا مکمل خیال رکھا گیا ہے۔ ہر کونا براہ راست آپ کے براؤزر میں تیار کیا جاتا ہے۔ آپ کی سیٹ کی ہوئی کوئی بھی چیز BroBroGo پر اپ لوڈ نہیں کی جاتی، جس کا مطلب ہے کہ تمام پروسیسنگ مقامی طور پر آپ کے اپنے کمپیوٹر پر ہوتی ہے۔
اکثر پوچھے گئے سوالات (FAQ)
چاروں کونے اور px بمقابلہ % کیسے کام کرتے ہیں؟
چاروں سلائیڈرز گھڑی کی سمت میں اوپر بائیں، اوپر دائیں، نیچے دائیں اور نیچے بائیں کونوں پر لاگو ہوتے ہیں۔ پکسلز (px) میں کونا ایک مقررہ حد تک گول ہوتا ہے؛ فیصد (%) میں یہ باکس کے تناسب سے گول ہوتا ہے — افقی فیصد چوڑائی کے مطابق اور عمودی فیصد اونچائی کے مطابق کام کرتا ہے، اس لیے 50% ایک چوکور کو دائرے میں بدل دیتا ہے۔
بیضوی (elliptical) موڈ کیا کرتا ہے؟
آف ہونے پر، ہر کونا ایک ہی رداس (radius) کے ساتھ دائرے کا چوتھائی حصہ ہوتا ہے۔ اسے آن کریں تو ہر کونے کو الگ افقی اور عمودی رداس مل جاتا ہے، جس کی مدد سے آپ نرم، نامیاتی "blob" شکلیں بنا سکتے ہیں۔ جنریٹر آپ کے لیے دو ویلیوز والی سلیش فارم لکھتا ہے اور کونے دوبارہ گول ہونے پر خود بخود مختصر فارم پر واپس آ جاتا ہے۔
میں ایک بہترین دائرہ یا گولی نما (pill) شکل کیسے بناؤں؟
کونوں کو آپس میں لنک کریں، فیصد (%) پر سوئچ کریں اور اسے 50% پر سیٹ کریں: ایک چوکور دائرہ بن جائے گا۔ گولی نما (pill-shaped) بٹن کے لیے، پکسلز (px) کو برقرار رکھیں اور کسی ایک کونے کو بٹن کی آدھی اونچائی سے آگے تک کھینچیں — چوڑائی کچھ بھی ہو، اطراف مکمل طور پر گول رہیں گے۔ Circle کا پری سیٹ ایک کلک میں پہلا طریقہ سیٹ کر دیتا ہے۔