ایک خالص سی ایس ایس گیلری، نگارخانہ فوکس اثر کے ساتھ :نہیں

ماضی میں اکثر، مجھے یہ جاننے کی ضرورت تھی کہ کنٹینر کے اندر موجود تمام عناصر میں سٹائل کیسے شامل کیے جائیں لیکن نوٹ منڈلا ہوا.

اس اثر کے لیے ہوورڈ عنصر کے بہن بھائیوں کو منتخب کرنے کی ضرورت ہے۔ میں اس کے لیے جاوا اسکرپٹ کا اطلاق کرتا تھا، اس کلاس کو شامل یا ہٹاتا تھا جس نے CSS کے مناسب اصولوں کی وضاحت کی تھی۔ mouseenter اور mouseleave اس سے ملتے جلتے واقعات:

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

کچھ مہینے پہلے میں اپنی کمپنی کی ویب سائٹ پر گرڈ پر مبنی فیڈ کے لیے اسی نقطہ نظر کو نافذ کرنے کی کوشش کر رہا تھا اور — بوم — یہ عناصر کے درمیان فرق کی وجہ سے کام نہیں کر سکا!

خوش قسمتی سے میرے لیے، یہ ظاہر ہوا کہ اسے اس طرح رہنے کی ضرورت نہیں ہے، اور ایک بار پھر مجھے اس کے لیے جاوا اسکرپٹ کی ضرورت نہیں تھی۔

مارک اپ اور بیس CSS

آئیے مناسب مارک اپ تیار کرکے کوڈنگ شروع کریں:

• .grid ایک گرڈ پر مبنی ہے

  فہرست؛

• اور .grid__child عناصر ہیں

وہ بچے جن کے ساتھ ہم بات چیت کرنا چاہتے ہیں۔

مارک اپ اس طرح لگتا ہے:

انداز اس طرح نظر آنا چاہئے:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 15rem);
  grid-gap: 1rem;
}

.grid__child {
  background: rgba(0, 0, 0, .1);
  border-radius: .5rem;
  aspect-ratio: 1/1;
}

یہ مثالی کوڈ گرڈ میں تین کالموں پر مشتمل تین فہرست اشیاء بنائے گا۔

سی ایس ایس سلیکٹرز کی طاقت

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

1. کنٹینر پر منڈلانے سے اندر کے تمام عناصر کے انداز کو تبدیل کر دینا چاہیے…  
2. …سوائے اس کے جس کا کرسر اس وقت منڈلا رہا ہے۔

آئیے ہر بچے کو پکڑنے کے ساتھ شروع کریں جب کرسر کنٹینر پر منڈلا رہا ہو:

.grid:hover .grid__child {
  /* ... */
}

دوم، آئیے فی الحال منڈائے ہوئے شے کو خارج کر دیں اور کم کریں۔ opacity کسی دوسرے بچے کی:

.grid:hover .grid__child:not(:hover) {
  opacity: 0.3;
}

اور یہ بچوں کے عناصر کے درمیان فرق کے بغیر کنٹینرز کے لئے بالکل کافی ہوگا:

تاہم، میرے معاملے میں، میں ان خلا کو دور نہیں کر سکا:

جب میں ماؤس کو ٹائلوں کے درمیان منتقل کر رہا تھا تو بچوں کے تمام عناصر ختم ہو رہے تھے۔

خلاء کو نظر انداز کرنا

ہم فرض کر سکتے ہیں کہ خلا کنٹینر کے وہ حصے ہیں جو اس کے بچوں کے ذریعہ نہیں چڑھائے گئے ہیں۔ جب بھی کرسر کنٹینر میں داخل ہوتا ہے تو ہم اثر کو نہیں چلانا چاہتے، بلکہ جب یہ اندر کے کسی ایک عنصر پر منڈلاتا ہے۔ کیا ہم اس وقت خلا کے اوپر جانے والے کرسر کو نظر انداز کر سکتے ہیں؟ 

جی ہاں، ہم کر سکتے ہیں، استعمال کرتے ہوئے pointer-events: none پر .grid کنٹینر اور انہیں واپس لانا pointer-events: auto اس کے بچوں پر:

.grid {
  /* ... */
  pointer-events: none;
}

/* ... */

.grid__child {
  /* ... */
  pointer-events: auto;
}

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

جب ہم مزید ٹائلیں شامل کرتے ہیں اور 2-جہتی لے آؤٹ بناتے ہیں تو یہ شاید اور بھی ٹھنڈا ہوتا ہے:

فائنل سی ایس ایس اس طرح لگتا ہے:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 15rem);
  grid-gap: 3rem;
  pointer-events: none;
}

.grid:hover .grid__child:not(:hover) {
  opacity: 0.3;
}

.grid__child {
  background: rgba(0, 0, 0, .1);
  border-radius: .5rem;
  aspect-ratio: 1/1;
  pointer-events: auto;
  transition: opacity 300ms;
}

کوڈ کی صرف 2 اضافی لائنوں کے ساتھ ہم نے فرق کے مسئلے پر قابو پالیا!

ممکنہ مسائل

اگرچہ یہ ایک کمپیکٹ حل ہے، لیکن کچھ ایسے حالات ہیں جہاں اسے کچھ کام کرنے کی ضرورت پڑسکتی ہے۔

بدقسمتی سے، یہ چال اس وقت کام نہیں کرے گی جب آپ چاہتے ہیں کہ کنٹینر اسکرول کے قابل ہو، جیسے کہ کسی قسم کے افقی سلائیڈر میں۔ دی pointer-events: none سٹائل نہ صرف ہوور ایونٹ کو نظر انداز کر دے گا بلکہ دیگر تمام کو بھی نظر انداز کر دے گا۔ ایسے حالات میں، آپ لپیٹ سکتے ہیں .grid دوسرے کنٹینر میں، اس طرح:

خلاصہ

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

مجھے امید ہے کہ آپ کو یہ مختصر ٹیوٹوریل پسند آیا ہوگا اور آپ کو یہ مفید معلوم ہوا ہوگا۔ شکریہ!

مصنف نے منتخب کیا۔ ٹیک تعلیم کے حصے کے طور پر عطیہ وصول کرنا عطیات کے لیے لکھیں۔ پروگرام.