سٹائل ویب سائٹ عناصر ایک سی ایس ایس بیک گراؤنڈ گریڈینٹ کے ساتھ۔

اگر آپ انٹرنیٹ پر چند منٹ سے زیادہ عرصے سے موجود ہیں تو ، امکانات یہ ہیں کہ آپ کو ایک CSS میلان ملا ہے۔ CSS بیک گراؤنڈ پراپرٹی کو مختلف سٹائل کی ایک رینج بنانے کے لیے استعمال کیا جا سکتا ہے ، اور سب سے زیادہ دلچسپ اقسام میں سے ایک یہ ہے کہ یہ میلان قدر کے ساتھ کیا کر سکتا ہے۔

مختلف سی ایس ایس گریڈینٹس کو ڈیزائن اور بنانے کا طریقہ جاننا کسی بھی سافٹ وئیر ڈیزائنر یا ڈویلپر کے لیے ایک اثاثہ ہے۔ اس آرٹیکل سے ، آپ اپنے پروجیکٹس میں سی ایس ایس گریڈینٹس کو شامل کرنا شروع کرنے کے لیے ہر وہ چیز سیکھیں گے جو آپ کو جاننے کی ضرورت ہے۔

سی ایس ایس گریڈینٹ کیا ہے؟

سی ایس ایس میلان بنیادی طور پر دو یا زیادہ رنگوں کا مجموعہ ہے جو ایک سے دوسرے میں آسانی سے منتقل ہوتا ہے۔ سی ایس ایس میلان کی عبوری حالت استعمال شدہ میلان کی قسم پر منحصر ہے۔ عام طور پر سافٹ وئیر ڈیزائن میں استعمال ہونے والی دو اہم اقسام ہیں: لکیری اور شعاعی۔

تاہم ، ایک تیسری قسم کا میلان ہے جو کم مقبول اور شنک میلان کے نام سے جانا جاتا ہے۔

سی ایس ایس گریڈینٹس نحو۔

Background-image: gradient-type (direction, color1, color2);

CSS میلان کو پس منظر کی تصویر والی CSS پراپرٹی کو تفویض کیا جانا چاہیے۔ میلان کی قسم کئی میں سے ایک ہو سکتی ہے لکیری میلان ، شعاعی میلان ، یا مخروطی میلان۔ میلان کی قسم کے بعد بریکٹ کو کھولنا اور بند کرنا ہے جس میں میلان کی عبوری سمت کے ساتھ ساتھ میلان میں شامل ہونے والے رنگ بھی شامل ہیں۔

مندرجہ بالا مثال دو رنگ دکھاتی ہے ، لیکن ایک میلان کئی مختلف رنگوں پر مشتمل ہو سکتا ہے۔ ضرورت صرف یہ ہے کہ فہرست میں ہر رنگ کوما سے الگ کیا جائے۔

لکیری میلان کیا ہے؟

لکیری میلان سی ایس ایس کا سب سے مشہور میلان ہے۔ یہ دو یا زیادہ رنگوں کا استعمال کرتے ہوئے ایک افقی ، عمودی یا اخترن منتقلی میلان بناتا ہے۔

سی ایس ایس لکیری گریڈینٹ کی مثال

Background-image: linear-gradient(#00A4CCFF, #F95700FF);

مندرجہ بالا کوڈ درج ذیل CSS میلان پیدا کرے گا:

تدریجی نحو کا ایک بڑا جزو اوپر کی مثال سے خارج ہے۔ یہ جزو میلان کی عبوری سمت ہے ، اور اسے چھوڑ دیا گیا کیونکہ لکیری میلان کی پہلے سے طے شدہ سیدھ عمودی (اوپر سے نیچے) ہے؛ اس مثال میں مطلوبہ آؤٹ پٹ ہے۔

مندرجہ بالا کوڈ درج ذیل کوڈ کی طرح نتیجہ پیدا کرتا ہے۔ دونوں کے درمیان فرق صرف کوڈ کا سمت سیکشن ہے۔

نیچے لکیری گریڈینٹ مثال کا استعمال

Background-image: linear-gradient(to bottom, #00A4CCFF, #F95700FF);

جیسا کہ آپ آؤٹ پٹ سے دیکھ سکتے ہیں کہ اوپر کا کوڈ ایک میلان بناتا ہے جو اوپر سے نیلے رنگ سے شروع ہوتا ہے پھر آہستہ آہستہ نیچے اورنج میں منتقل ہوتا ہے۔ اگر آپ رنگوں کی ترتیب کو پلٹنا چاہتے ہیں تو آپ اسے تبدیل کر سکتے ہیں نیچے تک کے ساتھ اوپر تک اور یہ میلان کی سمت کو پلٹ دے گا ، مندرجہ ذیل آؤٹ پٹ تیار کرے گا:

عمودی سیدھ کی طرح ، میلان کی افقی سیدھ دو سمت مطلوبہ الفاظ کے استعمال سے حاصل کی جا سکتی ہے۔ بائیں جانب اور دائیں ، جو بالترتیب درج ذیل آؤٹ پٹ تیار کرے گا۔

استعمال شدہ میک بک خریدنے کے لیے بہترین جگہ۔

اخترن لکیری میلان۔

لکیری میلان کی کسی بھی سمت میں اخترن لکیری میلان کی منتقلی حاصل کرنا ممکن ہے۔ مطلوبہ الفاظ کی صرف چار مخصوص فہرستیں ہیں جو آپ کو یہ ممکن بنانے کے لیے جاننے کی ضرورت ہے۔

نیچے دائیں طرف۔
نیچے بائیں طرف۔
اوپر دائیں طرف۔
اوپر بائیں طرف۔

اخترن لکیری گریڈینٹ مثال کا استعمال

Background-image: linear-gradient(to bottom right, #00A4CCFF, #F95700FF);

مندرجہ بالا مثال درج ذیل آؤٹ پٹ تیار کرتی ہے۔

جیسا کہ آپ مندرجہ بالا آؤٹ پٹ سے دیکھ سکتے ہیں ، لکیری میلان اس کی منتقلی کو اخترن سمت میں اوپر بائیں سے نیچے دائیں طرف میلان کے دائیں حصے میں منتقل کرتا ہے۔

رنگین لکیری میلان۔

ایک لکیری میلان میں دو یا زیادہ رنگ ہوسکتے ہیں ، لیکن میلان میں زیادہ رنگ کس طرح نظر آتے ہیں؟ ایک کثیر رنگی لکیری میلان رنگ ترتیب اس کی سمت پر منحصر ہے۔ افقی سمت میں منتقل ہونے والے لکیری میلان کی صحیح سمت پر منحصر ہے ، ہر نیا رنگ لکیری میلان کے بائیں یا دائیں دکھائی دے گا۔

رنگین لکیری میلان کی مثال

Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);

مندرجہ بالا کوڈ کی لائن درج ذیل آؤٹ پٹ تیار کرے گی:

جیسا کہ آپ دیکھ سکتے ہیں کہ ہر نیا رنگ میلان کے دائیں طرف شامل کیا جاتا ہے ، جس سے بالآخر ایک قوس قزح بن جاتا ہے۔ ایک ہی آؤٹ پٹ عمودی سمت میں حاصل کیا جا سکتا ہے۔ تاہم ، لکیری میلان پر مخصوص رنگ کا انتظام عمودی سمت کلیدی لفظ (اوپر یا نیچے) پر منحصر ہوگا۔

ریڈیل گریڈینٹ کیا ہے؟

ریڈیل میلان تخلیق کرتا ہے دو کی ایک سرپلنگ میلان زیادہ رنگ ہیں جو بطور ڈیفالٹ شروع ہوتے ہیں۔ جہاں لکیری میلان ایک سیدھا میلان پیدا کرتا ہے جو عمودی یا افقی طور پر بہتا ہے ، ریڈیل میلان ایک سرکلر میلان پیدا کرتا ہے جو مرکز سے بیرونی کناروں تک بہتا ہے۔

ریڈیل گریڈینٹ مثال کا استعمال

Background-image: radial-gradient( circle, #00A4CCFF, #F95700FF);

مندرجہ بالا کوڈ کی لائن درج ذیل آؤٹ پٹ تیار کرے گی:

ریڈیل گریڈینٹ سنٹر کو تبدیل کرنا۔

ڈیفالٹ طور پر ایک شعاعی میلان میلان کے مرکز سے شروع ہوتا ہے۔ تاہم ، چند مطلوبہ الفاظ کے تعارف کے ساتھ نقطہ اصل کو تبدیل کرنا ممکن ہے۔

USB پورٹ ونڈوز 10 پر کام نہیں کررہا ہے۔

ریڈیل گریڈینٹ اسٹارٹ پوزیشن کی مثال تبدیل کرنا۔

Background-image: radial-gradient(circle at top right, #00A4CCFF, #F95700FF);

مندرجہ بالا کوڈ کی لائن درج ذیل آؤٹ پٹ تیار کرے گی:

جیسا کہ آپ میلان کے اوپر کی پیداوار سے دیکھ سکتے ہیں اب مرکز کے بجائے اوپر دائیں کونے سے شروع ہوتا ہے۔ مطلوبہ الفاظ کو شامل کرنے کی وجہ سے یہ تبدیلی ممکن ہے۔ اوپر سے دایاں اوپر کوڈ میں. مطلوبہ الفاظ کی درج ذیل فہرست ریڈیل میلان کے نقطہ نظر کو تبدیل کرنے کے لیے بھی استعمال کی جا سکتی ہے۔

سب سے اوپر بائیں
نیچے دائیں طرف
نیچے بائیں

رنگین ریڈیل گریڈینٹس۔

لکیری میلان کی طرح ، ریڈیل میلان بھی استعمال کر سکتا ہے دو زیادہ رنگ ہیں ، بڑا فرق یہ ہے کہ جہاں لکیری میلان سیدھی لکیر میں میلان میں اضافہ کرتا ہے ، ریڈیل میلان بیرونی کنارے پر نئے رنگوں کا اضافہ کرتا ہے۔

رنگین ریڈیل گریڈینٹ کی مثال

  
Background-image: radial-gradient(circle, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);

مندرجہ بالا کوڈ کی لائن درج ذیل آؤٹ پٹ تیار کرے گی:

گریڈینٹس کو حسب ضرورت بنانا۔

اب تک آپ نے دیکھا ہے کہ میلان کی سمت اور مرکزی نقطہ کو کیسے تبدیل کیا جائے ، لیکن آپ نے نہیں دیکھا کہ میلان کو کس طرح اپنی مرضی کے مطابق بنایا جائے۔ میلان کی تخصیص کرنا بہت زیادہ کام کی طرح لگ سکتا ہے ، لیکن ایک بار جب آپ سی ایس ایس بیک گراؤنڈ گریڈینٹ بنانے کی بنیادی باتوں کو سمجھ لیں تو اگلا واضح مرحلہ یہ سیکھنا ہے کہ اپنے سی ایس ایس گریڈینٹس کو مزید منفرد کیسے بنایا جائے۔

ایمیزون پر کسی کی خواہش کی فہرست کیسے تلاش کریں۔

پہلے سے طے شدہ طور پر ، میلان میں رنگ یکساں طور پر تقسیم شدہ جگہ پر قبضہ کرتے ہیں جس کے ساتھ ہر رنگ آسانی سے اس کے بعد ایک میں منتقل ہو جاتا ہے۔ لہذا اگر دو رنگ مل کر ایک میلان بناتے ہیں تو ، ہر رنگ دستیاب جگہ کا نصف حصہ لے گا جبکہ ایک سے دوسرے میں منتقل ہو جائے گا۔ اگر تین رنگ مل جائیں تو ہر رنگ دستیاب جگہ کے ایک تہائی حصے پر قبضہ کر لے گا۔

اپنی مرضی کے مطابق میلان کے ساتھ ، آپ واضح طور پر تفویض کرکے ایک رنگ کو میلان میں کس جگہ پر قبضہ کریں گے اس کی وضاحت کریں گے رنگ سٹاپ پوزیشن .

لکیری میلان کی تخصیص مثال 1۔

Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF 30%);

مندرجہ بالا کوڈ کی لائن درج ذیل آؤٹ پٹ تیار کرے گی:

مندرجہ بالا آؤٹ پٹ لکیری میلان میں دوسرا رنگ ظاہر کرتا ہے جو میلان میں پہلے رنگ کے 30 point نقطہ پر رک جاتا ہے ، اس کی روایتی پوزیشن کے بجائے ، اور چونکہ دوسرا رنگ بھی میلان میں آخری رنگ ہے یہ قدرتی طور پر اختتام تک پھیلا ہوا ہے .

اگر آپ پہلے رنگ کے اختتام پر مندرجہ بالا کوڈ میں 30 place رکھنا چاہتے ہیں تو چیزیں واضح ہوجائیں۔

لکیری میلان کی تخصیص مثال 2۔

Background-image: linear-gradient( to right, #00A4CCFF 30%, #F95700FF );

مندرجہ بالا کوڈ مندرجہ ذیل آؤٹ پٹ تیار کرے گا۔

مندرجہ بالا آؤٹ پٹ واضح طور پر میلان میں پہلا رنگ دکھاتا ہے جو میلان میں دوسرے رنگ کے 30 point پوائنٹ پر رکتا ہے۔ مذکورہ بالا مثال کے ساتھ یہ مثال آپ کو سمجھنے کے لیے کلر سٹاپ حسب ضرورت کو آسان بنانے میں مدد دے گی۔

ایک ریڈیل میلان کو حسب ضرورت اسی طرح کیا جاتا ہے جیسے لکیری میلان۔ ایک ہی چیز جو آپ کو ریڈیل میلان میں مندرجہ بالا نتائج حاصل کرنے کے لیے کرنے کی ضرورت ہے وہ ہے میلان کی قسم اور سمت کو تبدیل کرنا۔

سی ایس ایس گریڈینٹس بنانا کبھی بھی آسان نہیں تھا۔

یہ ٹیوٹوریل آرٹیکل آپ کو لکیری اور ریڈیل گریڈینٹس کی شناخت اور تخلیق کرنے کے اوزار فراہم کرتا ہے۔ اگر آپ اس مقام تک پہنچ گئے ہیں تو ، آپ نے سمت اور میلان کے مرکز کو تبدیل کرنے کا طریقہ سیکھا ہے۔ مزید برآں ، اب آپ کے پاس سی ایس ایس گریڈینٹس کو اپنی مرضی کے مطابق کرنے اور منفرد بیک گراؤنڈ گریڈینٹس بنانے کی مہارت ہے۔

تاہم ، اگر آپ نئے اور انوکھے میلان بنانے میں سیدھے نہیں جانا چاہتے ہیں تو ، آپ پہلے سے موجود کچھ عمدہ شکلیں بنا کر شروع کر سکتے ہیں۔

بانٹیں بانٹیں ٹویٹ ای میل۔ 27 سجیلا سی ایس ایس پس منظر گریڈینٹ مثالیں۔

ٹھوس رنگ پچھلے سال کے ہیں۔ گریڈینٹس میں ہیں! لیکن آپ انہیں CSS میں کیسے بناتے ہیں؟

اگلا پڑھیں۔ متعلقہ موضوعات۔

پروگرامنگ۔
ویب سازی
ویب ڈیزائن
سی ایس ایس

مصنف کے بارے میں کدیشا کیان۔(21 مضامین شائع ہوئے)

کدیشا کین ایک مکمل اسٹیک سافٹ ویئر ڈویلپر اور ٹیکنیکل/ٹیکنالوجی رائٹر ہیں۔ وہ کچھ انتہائی پیچیدہ تکنیکی تصورات کو آسان بنانے کی مخصوص صلاحیت رکھتی ہے۔ ایسا مواد تیار کرنا جسے کسی بھی ٹیکنالوجی کے نوآموز آسانی سے سمجھ سکیں۔ وہ لکھنے ، دلچسپ سافٹ وئیر تیار کرنے اور دنیا کا سفر کرنے کے بارے میں پرجوش ہے (ڈاکومنٹریز کے ذریعے)

Kadeisha Kean سے مزید

ہماری نیوز لیٹر کو سبسکرائب کریں

ٹیک ٹپس ، جائزے ، مفت ای بکس ، اور خصوصی سودوں کے لیے ہمارے نیوز لیٹر میں شامل ہوں!

سبسکرائب کرنے کے لیے یہاں کلک کریں۔