ITDCFeD – Week #16 CSS Anchor Positioning کے ساتھ Modern UI Elements

, , , , , , ,


 

ITDCFeD – Week #16

CSS Anchor Positioning کے ساتھ Modern UI Elements

Live CodePen: https://codepen.io/mmshahid73/pen/QwKrBNp

آج کے لیکچر میں ہم CSS کے ایک جدید اور دلچسپ concept Anchor Positioning کو سمجھیں گے۔
اس concept کی مدد سے ہم ایسے elements بنا سکتے ہیں جو کسی دوسرے element کے ساتھ relative طور پر naturally attached رہیں، جیسے tooltip, note, popover یا floating label۔
اس کا سب سے بڑا فائدہ یہ ہے کہ کئی UI cases میں JavaScript کی ضرورت کم ہو جاتی ہے اور layout زیادہ clean ہو جاتا ہے۔

Anchor Positioning کیا ہے؟

Anchor positioning میں ایک element کو anchor بنایا جاتا ہے، اور دوسرا element اس anchor کے مطابق position ہوتا ہے۔
یعنی اگر آپ کے پاس ایک button ہے اور آپ چاہتے ہیں کہ اس کے ساتھ ایک tooltip ظاہر ہو، تو tooltip کو manually calculate کرنے کی بجائے anchor-based positioning سے attach کیا جا سکتا ہے۔

یہ approach modern CSS میں بہت useful ہے، خاص طور پر:

  • tooltips.

  • callouts.

  • floating notes.

  • popups.

  • badge-like labels.

اس لیکچر کا مقصد

اس lecture کے بعد آپ یہ سمجھ جائیں گے:

  • anchor-name کیا کرتا ہے۔

  • position-anchor کس لیے استعمال ہوتا ہے۔

  • anchor() function کیسے کام کرتا ہے۔

  • UI elements کو JS کے بغیر کیسے attach کیا جا سکتا ہے۔

  • modern browser-safe layout کیسے بنایا جاتا ہے۔

Lecture میں کیا بنایا گیا ہے؟

اس lecture میں ہم نے دو practical demos بنائے ہیں:

1. Button Tooltip Demo

ایک button بنایا گیا ہے، اور اس کے ساتھ tooltip کو anchor positioning کے ذریعے attach کیا گیا ہے۔

2. Profile Note Demo

ایک circular profile element بنایا گیا ہے، اور اس کے ساتھ ایک floating note کو position کیا گیا ہے۔

اس طرح student کو سمجھ آتا ہے کہ CSS anchor positioning صرف theory نہیں بلکہ real UI میں بھی استعمال ہو سکتی ہے۔

اہم HTML Structure

Anchor Button Demo

xml
<div class="anchor-card">
  <button class="anchor-btn" aria-describedby="tooltip1">Hover Me</button>
  <div class="tooltip" id="tooltip1">I am positioned with CSS anchor positioning.</div>
</div>

Profile Note Demo

xml
<div class="anchor-card secondary">
  <div class="profile-anchor" tabindex="0">SS</div>
  <div class="profile-note">
    This note stays aligned to the anchor element using modern CSS.
  </div>
</div>

اہم CSS Concepts

1. anchor-name

یہ property anchor element کو ایک name دیتی ہے تاکہ دوسرے element اسے reference کر سکیں۔

css
.anchor-btn{
  anchor-name: --cta;
}

2. position-anchor

یہ target element کو بتاتی ہے کہ وہ کس anchor کے ساتھ attach ہونا ہے۔

css
.tooltip{
  position-anchor: --cta;
}

3. anchor()

یہ function element کو anchor کے edges یا center کے مطابق position کرنے میں مدد دیتا ہے۔

css
left: anchor(right);
top: anchor(center);

Code Explanation

Tooltip positioning

ہم نے button کو anchor بنایا، اور tooltip کو button کے right side پر رکھا۔

css
.tooltip{
  position: absolute;
  position-anchor: --cta;
  left: anchor(right);
  top: anchor(center);
  transform: translate(14px, -50%);
}

اس code سے tooltip button کے ساتھ naturally connected لگتا ہے۔

Floating note positioning

profile avatar کو anchor بنایا گیا، اور note کو اس کے bottom-center کے ساتھ place کیا گیا۔

css
.profile-note{
  position: absolute;
  position-anchor: --profile;
  top: anchor(bottom);
  left: anchor(center);
  transform: translate(-50%, 14px);
}

یہ style ایک clean floating effect پیدا کرتی ہے۔

Lecture سے کیا سیکھنے کو ملا؟

اس lecture کے ذریعے students نے یہ سیکھا کہ CSS اب صرف box styling تک محدود نہیں رہی، بلکہ smart positioning بھی کر سکتی ہے۔
Anchor positioning UI کو زیادہ flexible، readable، اور maintainable بناتی ہے۔
خاص طور پر tooltip systems، floating help text، اور contextual labels میں یہ بہت useful concept ہے۔

Practical Use Cases

Anchor positioning کو آپ ان جگہوں پر استعمال کر سکتے ہیں:

  • navigation hints.

  • dropdown helpers.

  • form field tips.

  • product info callouts.

  • dashboard overlays.

  • inline annotations.

Student Assignment

طلبہ کے لیے assignment:

  1. ایک button بنائیں۔

  2. اس button کے ساتھ tooltip attach کریں۔

  3. ایک avatar یا icon element بنائیں۔

  4. اس کے نیچے floating note دکھائیں۔

  5. layout کو mobile-friendly رکھیں۔

  6. اپنی choice کے مطابق colors change کریں۔

Bonus Task

ایک simple card بنائیں جس کے اندر:

  • image یا icon.

  • title.

  • floating badge.

  • tooltip-like note.

Conclusion

CSS Anchor Positioning modern UI design کا ایک بہت اہم concept ہے۔
اس سے layout زیادہ intuitive، کم complex، اور visually clean ہو جاتا ہے۔
یہ خاص طور پر اُن projects کے لیے بہترین ہے جہاں small floating elements کو precise position میں رکھنا ہو۔

Week #16 کے بعد آپ کے students modern CSS کے ایک اور advanced feature سے واقف ہو جائیں گے، اور اُن کی frontend understanding مزید strong ہوگی۔

-
Tags: , , , , , , ,

کوئی تبصرے نہیں:

ایک تبصرہ شائع کریں

سبسکرائب کریں در: تبصرے شائع کریں (Atom)