31 KiB

Raw Blame History Unescape Escape

ٹیریریم پروجیکٹ حصہ 2: CSS کا تعارف

اسکیچ نوٹ Tomomi Imura کی جانب سے

یاد ہے آپ کا HTML ٹیریریم کتنا سادہ نظر آتا تھا؟ CSS وہ جگہ ہے جہاں ہم اس سادہ ڈھانچے کو بصری طور پر دلکش چیز میں تبدیل کرتے ہیں۔

اگر HTML کو ایک گھر کا فریم بنانے جیسا سمجھا جائے، تو CSS وہ سب کچھ ہے جو اسے گھر جیسا محسوس کراتا ہے - رنگ، فرنیچر کی ترتیب، روشنی، اور کمرے کیسے ایک دوسرے سے جڑے ہوئے ہیں۔ سوچیں کہ کیسے ورسائی کا محل ایک سادہ شکار کے لاج سے شروع ہوا، لیکن سجاوٹ اور ترتیب پر توجہ نے اسے دنیا کی سب سے شاندار عمارتوں میں سے ایک میں تبدیل کر دیا۔

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

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

پری لیکچر کوئز

CSS کے ساتھ شروعات

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

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

💡 پرو ٹپ: CSS مسلسل نئے فیچرز اور صلاحیتوں کے ساتھ ترقی کر رہا ہے۔ پروڈکشن پروجیکٹس میں استعمال کرنے سے پہلے جدید CSS فیچرز کے لیے براؤزر سپورٹ کی تصدیق کرنے کے لیے ہمیشہ CanIUse.com چیک کریں۔

اس سبق میں ہم یہ حاصل کریں گے:

مکمل بصری ڈیزائن بنائیں گے اپنے ٹیریریم کے لیے جدید CSS تکنیکوں کا استعمال کرتے ہوئے
بنیادی تصورات جیسے cascade، inheritance، اور CSS selectors کو دریافت کریں گے
جوابی پوزیشننگ اور لے آؤٹ حکمت عملیوں کو نافذ کریں گے
ٹریریم کنٹینر کو CSS shapes اور اسٹائلنگ کے ذریعے بنائیں گے

پیشگی شرط

آپ کو اپنے ٹیریریم کے لیے HTML ڈھانچہ مکمل کرنا چاہیے جو پچھلے سبق میں بنایا گیا تھا اور اسے اسٹائل کے لیے تیار ہونا چاہیے۔

📺 ویڈیو وسائل: اس مددگار ویڈیو واک تھرو کو دیکھیں

اپنے CSS فائل کو سیٹ اپ کرنا

اسٹائلنگ شروع کرنے سے پہلے، ہمیں CSS کو اپنے HTML سے جوڑنا ہوگا۔ یہ کنکشن براؤزر کو بتاتا ہے کہ ہمارے ٹیریریم کے لیے اسٹائلنگ ہدایات کہاں سے حاصل کرنی ہیں۔

اپنے ٹیریریم فولڈر میں، ایک نئی فائل بنائیں جس کا نام style.css ہو، پھر اسے اپنے HTML دستاویز کے <head> سیکشن میں لنک کریں:

<link rel="stylesheet" href="./style.css" />

یہ کوڈ کیا کرتا ہے:

HTML اور CSS فائلز کے درمیان کنکشن بناتا ہے
براؤزر کو بتاتا ہے کہ style.css سے اسٹائلز لوڈ اور لاگو کریں
rel="stylesheet" ایٹریبیوٹ استعمال کرتا ہے تاکہ یہ بتا سکے کہ یہ CSS فائل ہے
فائل کا راستہ href="./style.css" کے ساتھ حوالہ دیتا ہے

CSS Cascade کو سمجھنا

کبھی سوچا کہ CSS کو "Cascading" Style Sheets کیوں کہا جاتا ہے؟ اسٹائلز ایک آبشار کی طرح نیچے گرتے ہیں، اور کبھی کبھی وہ ایک دوسرے سے متصادم ہوتے ہیں۔

سوچیں کہ فوجی کمانڈ ڈھانچے کیسے کام کرتے ہیں - ایک جنرل آرڈر کہہ سکتا ہے "تمام فوجی سبز پہنیں"، لیکن آپ کی یونٹ کے لیے ایک مخصوص آرڈر کہہ سکتا ہے "تقریب کے لیے نیلے لباس پہنیں"۔ زیادہ مخصوص ہدایت کو ترجیح دی جاتی ہے۔ CSS اسی منطق کی پیروی کرتا ہے، اور اس درجہ بندی کو سمجھنا ڈیبگنگ کو بہت زیادہ قابل انتظام بناتا ہے۔

Cascade Priority کے ساتھ تجربہ کرنا

آئیے ایک اسٹائل تنازعہ پیدا کرکے cascade کو عمل میں دیکھتے ہیں۔ پہلے، اپنے <h1> ٹیگ میں ایک inline style شامل کریں:

<h1 style="color: red">My Terrarium</h1>

یہ کوڈ کیا کرتا ہے:

سرخ رنگ کو براہ راست <h1> عنصر پر لاگو کرتا ہے inline اسٹائلنگ کا استعمال کرتے ہوئے
style ایٹریبیوٹ استعمال کرتا ہے تاکہ CSS کو براہ راست HTML میں شامل کیا جا سکے
اس مخصوص عنصر کے لیے سب سے زیادہ ترجیحی اسٹائل رول بناتا ہے

پھر، اپنے style.css فائل میں یہ رول شامل کریں:

h1 {
  color: blue;
}

اوپر دیے گئے میں ہم نے:

CSS رول کی وضاحت کی جو تمام <h1> عناصر کو ہدف بناتا ہے
ٹیکسٹ کا رنگ نیلا مقرر کیا ایک بیرونی اسٹائل شیٹ کا استعمال کرتے ہوئے
ایک کم ترجیحی رول بنایا inline اسٹائلز کے مقابلے میں

✅ علمی جانچ: آپ کے ویب ایپ میں کون سا رنگ ظاہر ہوتا ہے؟ وہ رنگ کیوں جیتتا ہے؟ کیا آپ ایسے منظرنامے سوچ سکتے ہیں جہاں آپ اسٹائلز کو اوور رائیڈ کرنا چاہیں؟

💡 CSS ترجیحی ترتیب (سب سے زیادہ سے کم):

Inline styles (style attribute)

IDs (#myId)

Classes (.myClass) اور attributes

Element selectors (h1, div, p)

براؤزر ڈیفالٹس

CSS Inheritance کو عمل میں دیکھنا

CSS inheritance جینیات کی طرح کام کرتا ہے - عناصر اپنے پیرنٹ عناصر سے کچھ پراپرٹیز وراثت میں حاصل کرتے ہیں۔ اگر آپ نے body عنصر پر فونٹ فیملی سیٹ کی ہے، تو اندر کا تمام ٹیکسٹ خود بخود وہی فونٹ استعمال کرتا ہے۔ یہ بالکل ویسا ہی ہے جیسے ہبسبرگ خاندان کی منفرد جبڑے کی ساخت نسلوں میں ظاہر ہوئی بغیر ہر فرد کے لیے مخصوص کیے۔

تاہم، ہر چیز وراثت میں نہیں ملتی۔ ٹیکسٹ اسٹائلز جیسے فونٹس اور رنگ وراثت میں ملتے ہیں، لیکن لے آؤٹ پراپرٹیز جیسے margins اور borders نہیں ملتے۔ جیسے بچے جسمانی خصوصیات وراثت میں حاصل کر سکتے ہیں لیکن اپنے والدین کے فیشن انتخاب نہیں۔

فونٹ وراثت کا مشاہدہ

آئیے وراثت کو عمل میں دیکھتے ہیں <body> عنصر پر فونٹ فیملی سیٹ کرکے:

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

یہاں کیا ہوتا ہے:

فونٹ فیملی پورے صفحے کے لیے سیٹ کرتا ہے <body> عنصر کو ہدف بنا کر
فونٹ اسٹیک استعمال کرتا ہے بہتر براؤزر مطابقت کے لیے
جدید سسٹم فونٹس لاگو کرتا ہے جو مختلف آپریٹنگ سسٹمز پر اچھے لگتے ہیں
یقین دہانی کراتا ہے کہ تمام چائلڈ عناصر یہ فونٹ وراثت میں حاصل کریں جب تک کہ خاص طور پر اوور رائیڈ نہ کیا جائے

اپنے براؤزر کے ڈیولپر ٹولز (F12) کھولیں، Elements ٹیب پر جائیں، اور اپنے <h1> عنصر کا معائنہ کریں۔ آپ دیکھیں گے کہ یہ فونٹ فیملی کو body سے وراثت میں حاصل کرتا ہے:

✅ تجربہ کا وقت: <body> پر دیگر وراثت میں ملنے والی پراپرٹیز جیسے color, line-height, یا text-align سیٹ کرنے کی کوشش کریں۔ آپ کی ہیڈنگ اور دیگر عناصر کے ساتھ کیا ہوتا ہے؟

📝 وراثت میں ملنے والی پراپرٹیز شامل ہیں: color, font-family, font-size, line-height, text-align, visibility

غیر وراثت میں ملنے والی پراپرٹیز شامل ہیں: margin, padding, border, width, height, position

CSS Selectors کو مہارت سے سمجھنا

CSS selectors آپ کے لیے مخصوص عناصر کو اسٹائل کرنے کا طریقہ ہیں۔ یہ بالکل درست ہدایات دینے جیسا کام کرتے ہیں - "گھر" کہنے کے بجائے، آپ کہہ سکتے ہیں "نیلے دروازے والا گھر میپل اسٹریٹ پر۔"

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

عنصر کے سلیکٹرز (Tags)

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

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  color: #3a241d;
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

ان اسٹائلز کو سمجھنا:

پورے صفحے پر مستقل ٹائپوگرافی سیٹ کرتا ہے body سلیکٹر کے ساتھ
ڈیفالٹ براؤزر margins اور padding ہٹاتا ہے بہتر کنٹرول کے لیے
تمام ہیڈنگ عناصر کو اسٹائل کرتا ہے رنگ، الائنمنٹ، اور اسپیسنگ کے ساتھ
rem یونٹس استعمال کرتا ہے قابل پیمائش، قابل رسائی فونٹ سائز کے لیے

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

منفرد عناصر کے لیے ID سلیکٹرز

ID سلیکٹرز # علامت استعمال کرتے ہیں اور عناصر کو مخصوص id attributes کے ساتھ ہدف بناتے ہیں۔ چونکہ IDs صفحے پر منفرد ہونے چاہیئے، یہ انفرادی، خاص عناصر کو اسٹائل کرنے کے لیے بہترین ہیں جیسے ہمارے بائیں اور دائیں پودوں کے کنٹینرز۔

آئیے اپنے ٹیریریم کے سائیڈ کنٹینرز کے لیے اسٹائلنگ بنائیں جہاں پودے رہیں گے:

#left-container {
  background-color: #f5f5f5;
  width: 15%;
  left: 0;
  top: 0;
  position: absolute;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}

#right-container {
  background-color: #f5f5f5;
  width: 15%;
  right: 0;
  top: 0;
  position: absolute;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}

یہ کوڈ کیا حاصل کرتا ہے:

کنٹینرز کو پوزیشن کرتا ہے اسکرین کے بائیں اور دائیں کناروں پر absolute پوزیشننگ کا استعمال کرتے ہوئے
vh یونٹس استعمال کرتا ہے جوابی اونچائی کے لیے جو اسکرین کے سائز کے مطابق ڈھلتی ہے
box-sizing: border-box لاگو کرتا ہے تاکہ padding کل چوڑائی میں شامل ہو
غیر ضروری px یونٹس ہٹاتا ہے صفر ویلیوز سے صاف کوڈ کے لیے
ایک ہلکا پس منظر رنگ سیٹ کرتا ہے جو آنکھوں پر سخت گرے کے مقابلے میں آسان ہے

✅ کوڈ کوالٹی چیلنج: نوٹ کریں کہ یہ CSS DRY (Don't Repeat Yourself) اصول کی خلاف ورزی کرتا ہے۔ کیا آپ اسے ID اور کلاس دونوں کا استعمال کرتے ہوئے ریفیکٹر کر سکتے ہیں؟

بہتر طریقہ:

<div id="left-container" class="container"></div>
<div id="right-container" class="container"></div>

.container {
  background-color: #f5f5f5;
  width: 15%;
  top: 0;
  position: absolute;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}

#left-container {
  left: 0;
}

#right-container {
  right: 0;
}

کلاس سلیکٹرز کے لیے دوبارہ استعمال ہونے والے اسٹائلز

کلاس سلیکٹرز . علامت استعمال کرتے ہیں اور بہترین ہیں جب آپ ایک جیسے اسٹائلز کو متعدد عناصر پر لاگو کرنا چاہتے ہیں۔ IDs کے برعکس، کلاسز آپ کے HTML میں دوبارہ استعمال کی جا سکتی ہیں، جو انہیں مستقل اسٹائلنگ پیٹرنز کے لیے مثالی بناتی ہیں۔

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

ہر پودے کے لیے HTML ڈھانچہ یہ ہے:

<div class="plant-holder">
  <img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.ur.png" />
</div>

اہم عناصر کی وضاحت:

class="plant-holder" استعمال کرتا ہے مستقل کنٹینر اسٹائلنگ کے لیے تمام پودوں میں
class="plant" لاگو کرتا ہے مشترکہ تصویر اسٹائلنگ اور رویے کے لیے
منفرد id="plant1" شامل کرتا ہے انفرادی پوزیشننگ اور جاوا اسکرپٹ تعامل کے لیے
وضاحتی alt ٹیکسٹ فراہم کرتا ہے اسکرین ریڈر کی رسائی کے لیے

اب یہ اسٹائلز اپنے style.css فائل میں شامل کریں:

.plant-holder {
  position: relative;
  height: 13%;
  left: -0.6rem;
}

.plant {
  position: absolute;
  max-width: 150%;
  max-height: 150%;
  z-index: 2;
  transition: transform 0.3s ease;
}

.plant:hover {
  transform: scale(1.05);
}

ان اسٹائلز کو توڑ کر سمجھنا:

کنٹینر کے لیے رشتہ دار پوزیشننگ بناتا ہے پوزیشننگ سیاق و سباق قائم کرنے کے لیے
ہر پودے کے کنٹینر کو 13% اونچائی پر سیٹ کرتا ہے تاکہ تمام پودے عمودی طور پر فٹ ہوں بغیر اسکرولنگ کے
کنٹینرز کو تھوڑا سا بائیں طرف منتقل کرتا ہے تاکہ پودے اپنے کنٹینرز کے اندر بہتر مرکز میں ہوں
پودوں کو جوابی طور پر اسکیل کرنے کی اجازت دیتا ہے max-width اور max-height پراپرٹیز کے ساتھ
z-index استعمال کرتا ہے تاکہ پودے ٹیریریم کے دیگر عناصر کے اوپر تہہ ہوں
ایک ہلکا hover اثر شامل کرتا ہے CSS ٹرانزیشنز کے ساتھ بہتر صارف تعامل کے لیے

✅ تنقیدی سوچ: ہمیں .plant-holder اور .plant سلیکٹرز دونوں کی ضرورت کیوں ہے؟ کیا ہوگا اگر ہم صرف ایک استعمال کرنے کی کوشش کریں؟

💡 ڈیزائن پیٹرن: کنٹینر (.plant-holder) لے آؤٹ اور پوزیشننگ کو کنٹرول کرتا ہے، جبکہ مواد (.plant) ظاہری شکل اور اسکیلنگ کو کنٹرول کرتا ہے۔ یہ علیحدگی کوڈ کو زیادہ قابل انتظام اور لچکدار بناتی ہے۔

CSS پوزیشننگ کو سمجھنا

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

ایک بار جب آپ پوزیشننگ کو سمجھ لیں، بہت سے لے آؤٹ چیلنجز قابل انتظام ہو جاتے ہیں۔ کیا آپ کو ایک نیویگیشن بار کی ضرورت ہے جو صارفین کے اسکرول کرتے وقت اوپر رہتا ہے؟ پوزیشننگ اس کا انتظام کرتی ہے۔ کیا آپ کو ایک ٹول ٹپ چاہیے جو مخصوص جگہ پر ظاہر ہو؟ یہ بھی پوزیشننگ ہے۔

پانچ پوزیشن ویلیوز

پوزیشن ویلیو	رویہ	استعمال کا کیس
`static`	ڈیفالٹ فلو، top/left/right/bottom کو نظر انداز کرتا ہے	عام دستاویز لے آؤٹ
`relative`	اپنی معمول کی پوزیشن کے لحاظ سے پوزیشنڈ	چھوٹے ایڈجسٹمنٹس، پوزیشننگ سیاق و سباق بنانا
`absolute`	قریب ترین پوزیشنڈ ancestor کے لحاظ سے پوزیشنڈ	درست جگہ، overlays
`fixed`	viewport کے لحاظ سے پوزیشنڈ	نیویگیشن بارز، فلوٹنگ عناصر
`sticky`	اسکرول کے لحاظ سے relative اور fixed کے درمیان سوئچ کرتا ہے	اسکرول کرتے وقت چپکنے والے ہیڈرز

ہمارے ٹیریریم میں پوزیشننگ

ہمارا ٹیریریم مطلوبہ لے آؤٹ بنانے کے لیے پوزیشننگ کی اقسام کا اسٹریٹجک مجموعہ استعمال کرتا ہے:

/* Container positioning */
.container {
  position: absolute; /* Removes from normal flow */
  /* ... other styles ... */
}

/* Plant holder positioning */
.plant-holder {
  position: relative; /* Creates positioning context */
  /* ... other styles ... */
}

/* Plant positioning */
.plant {
  position: absolute; /* Allows precise placement within holder */
  /* ... other styles ... */
}

پوزیشننگ حکمت عملی کو سمجھنا:

Absolute کنٹینرز عام دستاویز فلو سے ہٹا دیے جاتے ہیں اور اسکرین کے کناروں پر پن کیے جاتے ہیں
Relative plant holders پوزیشننگ سیاق و سباق بناتے ہیں جبکہ دستاویز فلو میں رہتے ہیں
Absolute plants کو ان کے relative کنٹینرز کے اندر درست طریقے سے پوزیشن کیا جا سکتا ہے
یہ مجموعہ پودوں کو عمودی طور پر اسٹیک کرنے کی اجازت دیتا ہے جبکہ انفرادی طور پر پوزیشن ایبل ہوتا ہے

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

.jar-walls {
  height: 80%;
  width: 60%;
  background: #d1e1df;
  border-radius: 1rem;
  position: absolute;
  bottom: 0.5%;
  left: 20%;
  opacity: 0.5;
  z-index: 1;
  box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
}

.jar-top {
  width: 50%;
  height: 5%;
  background: #d1e1df;
  position: absolute;
  bottom: 80.5%;
  left: 25%;
  opacity: 0.7;
  z-index: 1;
  border-radius: 0.5rem 0.5rem 0 0;
}

.jar-bottom {
  width: 50%;
  height: 1%;
  background: #d1e1df;
  position: absolute;
  bottom: 0;
  left: 25%;
  opacity: 0.7;
  border-radius: 0 0 0.5rem 0.5rem;
}

.dirt {
  width: 60%;
  height: 5%;
  background: #3a241d;
  position: absolute;
  border-radius: 0 0 1rem 1rem;
  bottom: 1%;
  left: 20%;
  opacity: 0.7;
  z-index: -1;
}

ٹیریریم کی تعمیر کو سمجھنا:

استعمال کرتا ہے فیصد پر مبنی ڈائمینشنز تاکہ تمام اسکرین سائزز پر ریسپانسیو اسکیلنگ ہو سکے
پوزیشن کرتا ہے عناصر کو مطلق طور پر تاکہ انہیں درست طریقے سے اسٹیک اور الائن کیا جا سکے
لگاتا ہے مختلف اوپیسٹی ویلیوز تاکہ شیشے کی شفافیت کا اثر پیدا ہو
نافذ کرتا ہے z-index لیئرنگ تاکہ پودے جار کے اندر نظر آئیں
شامل کرتا ہے ہلکا باکس شیڈو اور نفیس بارڈر-ریڈیئس تاکہ زیادہ حقیقت پسندانہ شکل دی جا سکے

فیصد کے ساتھ ریسپانسیو ڈیزائن

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

یہ کیوں اہم ہے:

یقینی بناتا ہے کہ ٹیریریم کسی بھی اسکرین سائز پر تناسبی طور پر اسکیل کرے
برقرار رکھتا ہے جار کے اجزاء کے درمیان بصری تعلقات
فراہم کرتا ہے موبائل فونز سے لے کر بڑے ڈیسک ٹاپ مانیٹرز تک ایک مستقل تجربہ
اجازت دیتا ہے ڈیزائن کو بغیر بصری ترتیب کو توڑے ایڈجسٹ کرنے کی

CSS یونٹس کا استعمال

ہم بارڈر-ریڈیئس کے لیے rem یونٹس استعمال کر رہے ہیں، جو روٹ فونٹ سائز کے مطابق اسکیل کرتے ہیں۔ یہ زیادہ قابل رسائی ڈیزائنز بناتا ہے جو صارف کے فونٹ ترجیحات کا احترام کرتے ہیں۔ CSS relative units کے بارے میں مزید جانیں آفیشل اسپیسفیکیشن میں۔

✅ بصری تجربہ کاری: ان ویلیوز کو تبدیل کریں اور اثرات کا مشاہدہ کریں:

جار کی اوپیسٹی کو 0.5 سے 0.8 میں تبدیل کریں – شیشے کی شکل پر اس کا کیا اثر پڑتا ہے؟
مٹی کے رنگ کو #3a241d سے #8B4513 میں ایڈجسٹ کریں – اس کا بصری اثر کیا ہوتا ہے؟
مٹی کے z-index کو 2 میں تبدیل کریں – لیئرنگ پر کیا اثر پڑتا ہے؟

GitHub Copilot Agent Challenge 🚀

ایجنٹ موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:

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

پرومپٹ: CSS کی فریم اینیمیشنز شامل کریں تاکہ ٹیریریم کے پودے آہستہ آہستہ ایک طرف سے دوسری طرف جھومیں۔ ایک جھومنے والی اینیمیشن بنائیں جو ہر پودے کو تھوڑا سا (2-3 ڈگری) بائیں اور دائیں گھمائے، جس کی مدت 3-4 سیکنڈ ہو، اور اسے .plant کلاس پر لاگو کریں۔ یقینی بنائیں کہ اینیمیشن لامتناہی طور پر لوپ کرے اور قدرتی حرکت کے لیے ایزنگ فنکشن ہو۔

ایجنٹ موڈ کے بارے میں مزید جانیں۔

🚀 چیلنج: شیشے کی عکاسی شامل کرنا

کیا آپ اپنے ٹیریریم میں حقیقت پسندانہ شیشے کی عکاسی شامل کرنے کے لیے تیار ہیں؟ یہ تکنیک ڈیزائن میں گہرائی اور حقیقت پسندی کا اضافہ کرے گی۔

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

آپ کا چیلنج:

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

لیکچر کے بعد کا کوئز

اپنے CSS علم کو بڑھائیں

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

آپ کے اگلے CSS سیکھنے کے علاقے:

Flexbox - عناصر کی سیدھ اور تقسیم کو آسان بناتا ہے
CSS Grid - پیچیدہ لے آؤٹس بنانے کے لیے طاقتور ٹولز فراہم کرتا ہے
CSS Variables - تکرار کو کم کرتا ہے اور مینٹین ایبلٹی کو بہتر بناتا ہے
Responsive design - یقینی بناتا ہے کہ سائٹس مختلف اسکرین سائزز پر اچھی طرح کام کریں

انٹرایکٹو لرننگ ریسورسز

ان تصورات کو ان دلچسپ، عملی گیمز کے ساتھ مشق کریں:

🐸 Flexbox Froggy - Flexbox کو تفریحی چیلنجز کے ذریعے سیکھیں
🌱 Grid Garden - CSS Grid کو ورچوئل گاجروں کو اگا کر سیکھیں
🎯 CSS Battle - کوڈنگ چیلنجز کے ساتھ اپنے CSS مہارتوں کو آزمائیں

اضافی سیکھنا

CSS کے بنیادی اصولوں کے لیے، یہ Microsoft Learn ماڈیول مکمل کریں: اپنے HTML ایپ کو CSS کے ساتھ اسٹائل کریں

اسائنمنٹ

CSS Refactoring

ڈسکلیمر:
یہ دستاویز AI ترجمہ سروس Co-op Translator کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے لیے ہم ذمہ دار نہیں ہیں۔

31 KiB Raw Blame History Unescape Escape