CSS گرڈ اور حسب ضرورت شکلیں، حصہ 2

ٹھیک ہے، تو آخری بار جب ہم نے چیک ان کیا تھا۔، ہم CSS گرڈ استعمال کر رہے تھے اور انہیں CSS کے ساتھ ملا رہے تھے۔ clip-path اور mask فینسی شکلوں کے ساتھ گرڈ بنانے کی تکنیک۔

یہاں صرف ایک شاندار گرڈ ہے جو ہم نے مل کر بنایا ہے:

دوسرے راؤنڈ کے لیے تیار ہیں؟ ہم اب بھی CSS گرڈ کے ساتھ کام کر رہے ہیں، clip-path، اور maskلیکن اس مضمون کے اختتام تک، ہم گرڈ پر تصاویر کو ترتیب دینے کے مختلف طریقوں کے ساتھ ختم کریں گے، بشمول کچھ ریڈ ہوور اثرات جو تصاویر دیکھنے کے لیے ایک مستند، انٹرایکٹو تجربہ فراہم کرتے ہیں۔

اور اندازہ کرو کہ کیا؟ ہم استعمال کر رہے ہیں۔ وہی مارک اپ جو ہم نے پچھلی بار استعمال کیا تھا۔. یہ پھر ہے:

<div class="gallery">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <!-- as many times as we want -->
</div>

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

نیسٹڈ امیج گرڈ

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

آئیے گرڈ کے بیچ میں ایک تصویر بنانے کی کوشش کریں:

ہم چار تصاویر کے لیے 2✕2 گرڈ ترتیب دے کر شروع کرتے ہیں:

.gallery {
  --s: 200px; /* controls the image size */
  --g: 10px; /* controls the gap between images */

  display: grid;
  gap: var(--g);
  grid-template-columns: repeat(2, auto);
}
.gallery > img {
  width: var(--s);
  aspect-ratio: 1;
  object-fit: cover;
}

ابھی تک کچھ بھی پیچیدہ نہیں ہے۔ اگلا مرحلہ ہماری تصویروں کے کونے کو کاٹ کر اندر کی تصویر کے لیے جگہ بنانا ہے۔ میرے پاس پہلے ہی ایک تفصیلی مضمون موجود ہے۔ کا استعمال کرتے ہوئے کونوں کو کیسے کاٹنا ہے clip-path اور mask. آپ میرا بھی استعمال کر سکتے ہیں۔ آن لائن جنریٹر ماسکنگ کونوں کے لیے سی ایس ایس حاصل کرنے کے لیے۔

ہمیں یہاں ضرورت کے برابر زاویہ پر کونوں کو کاٹنا ہے۔ 90deg. ہم وہی استعمال کر سکتے ہیں۔ مخروطی تدریجی تکنیک اس مضمون سے ایسا کرنے کے لیے:

.gallery > img {
   mask: conic-gradient(from var(--_a), #0000 90deg, #000 0);
}
.gallery > img:nth-child(1) { --_a: 90deg; }
.gallery > img:nth-child(2) { --_a: 180deg; }
.gallery > img:nth-child(3) { --_a: 0deg; }
.gallery > img:nth-child(4) { --_a:-90deg; }

ہم استعمال کر سکتے ہیں clip-path اسی مضمون سے کونوں کو کاٹنے کا طریقہ، لیکن میلان کے ساتھ ماسکنگ یہاں زیادہ موزوں ہے کیونکہ ہمارے پاس تمام امیجز کے لیے ایک ہی ترتیب ہے — ہمیں صرف ایک گردش کی ضرورت ہے (متغیر کے ساتھ بیان کیا گیا ہے) --_a) اثر حاصل کریں، لہذا ہم باہر کے کناروں کی بجائے اندر سے ماسک کر رہے ہیں۔

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

<div class="gallery">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
</div>

ہم اسے وہاں رکھنے کے لیے اچھی ol' مطلق پوزیشننگ پر انحصار کرنے جا رہے ہیں:

.gallery > img:nth-child(5) {
  position: absolute;
  inset: calc(50% - .5*var(--s));
  clip-path: inset(calc(var(--g) / 4));
}

۔ inset پراپرٹی ہمیں ایک اعلان کا استعمال کرتے ہوئے تصویر کو مرکز میں رکھنے کی اجازت دیتی ہے۔ ہم تصویر کا سائز جانتے ہیں (متغیر کے ساتھ بیان کیا گیا ہے۔ --s)، اور ہم جانتے ہیں کہ کنٹینر کا سائز 100% کے برابر ہے۔ ہم کچھ ریاضی کرتے ہیں، اور ہر کنارے سے فاصلہ برابر ہونا چاہیے۔ (100% - var(--s))/2.

آپ سوچ رہے ہوں گے کہ ہم کیوں استعمال کر رہے ہیں۔ clip-path یہاں بالکل. ہم اسے مستقل فرق رکھنے کے لیے نیسٹڈ امیج کے ساتھ استعمال کر رہے ہیں۔ اگر ہم اسے ہٹاتے ہیں، تو آپ دیکھیں گے کہ ہمارے پاس تمام تصاویر کے درمیان ایک جیسا فرق نہیں ہے۔ اس طرح، ہم پانچویں تصویر سے تھوڑا سا کاٹ رہے ہیں تاکہ اس کے ارد گرد مناسب جگہ حاصل کی جا سکے۔

مکمل کوڈ دوبارہ:

.gallery {
  --s: 200px; /* controls the image size */
  --g: 10px;  /* controls the gap between images */
  
  display: grid;
  gap: var(--g);
  grid-template-columns: repeat(2, auto);
  position: relative;
}

.gallery > img {
  width: var(--s);
  aspect-ratio: 1;
  object-fit: cover;
  mask: conic-gradient(from var(--_a), #0000 90deg, #000 0);
}

.gallery > img:nth-child(1) {--_a: 90deg}
.gallery > img:nth-child(2) {--_a:180deg}
.gallery > img:nth-child(3) {--_a:  0deg}
.gallery > img:nth-child(4) {--_a:-90deg}
.gallery > img:nth-child(5) {
  position: absolute;
  inset: calc(50% - .5*var(--s));
  clip-path: inset(calc(var(--g) / 4));
}

اب، آپ میں سے بہت سے لوگ یہ بھی سوچ رہے ہوں گے: جب ہم آخری تصویر کو اوپر رکھ سکتے ہیں اور اس میں ایک بارڈر لگا سکتے ہیں تو تمام پیچیدہ چیزیں کیوں؟ یہ ماسک کے بغیر نیسٹڈ امیج کے نیچے تصاویر کو چھپا دے گا، ٹھیک ہے؟

یہ سچ ہے، اور ہمیں درج ذیل ملے گا:

نہیں maskمیں clip-path. ہاں، کوڈ کو سمجھنا آسان ہے، لیکن اس میں ایک چھوٹی سی خرابی ہے: وہم کو کامل بنانے کے لیے بارڈر کا رنگ مرکزی پس منظر جیسا ہونا ضروری ہے۔ یہ چھوٹی سی خرابی میرے لیے پس منظر سے آزاد حقیقی شفافیت کے بدلے کوڈ کو مزید پیچیدہ بنانے کے لیے کافی ہے۔ میں یہ نہیں کہہ رہا ہوں کہ سرحدی نقطہ نظر برا یا غلط ہے۔ میں اس کی سفارش زیادہ تر معاملات میں کروں گا جہاں پس منظر معلوم ہے۔ لیکن ہم یہاں نئی ​​چیزیں دریافت کرنے اور سب سے اہم، ایسے اجزاء بنانے کے لیے ہیں جو ان کے ماحول پر منحصر نہیں ہیں۔

آئیے اس بار ایک اور شکل آزمائیں:

اس بار، ہم نے نیسٹڈ امیج کو مربع کی بجائے ایک دائرہ بنایا۔ اس کے ساتھ ایک آسان کام ہے۔ border-radius لیکن ہمیں ایک استعمال کرنے کی ضرورت ہے۔ سرکلر کٹ آؤٹ دوسری تصاویر کے لیے۔ اس بار، اگرچہ، ہم ایک پر بھروسہ کریں گے radial-gradient() کے بجائے a conic-gradient() وہ اچھی گول شکل حاصل کرنے کے لیے۔

.gallery > img {
  mask: 
    radial-gradient(farthest-side at var(--_a),
      #0000 calc(50% + var(--g)/2), #000 calc(51% + var(--g)/2));
}
.gallery > img:nth-child(1) { --_a: calc(100% + var(--g)/2) calc(100% + var(--g)/2); }
.gallery > img:nth-child(2) { --_a: calc(0%   - var(--g)/2) calc(100% + var(--g)/2); }
.gallery > img:nth-child(3) { --_a: calc(100% + var(--g)/2) calc(0%   - var(--g)/2); }
.gallery > img:nth-child(4) { --_a: calc(0%   - var(--g)/2) calc(0%   - var(--g)/2); }

تمام تصاویر پچھلی مثال کی طرح ایک ہی ترتیب کا استعمال کرتی ہیں، لیکن ہم ہر بار سینٹر پوائنٹ کو اپ ڈیٹ کرتے ہیں۔

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

اب جب کہ ہمارے پاس اپنی ترتیب ہے آئیے ہوور اثر کے بارے میں بات کرتے ہیں۔ اگر آپ نے نوٹس نہیں کیا تو، ایک ٹھنڈا ہوور اثر نیسٹڈ امیج کے سائز کو بڑھاتا ہے اور اس کے مطابق ہر چیز کو ایڈجسٹ کرتا ہے۔ سائز کو بڑھانا نسبتاً آسان کام ہے، لیکن گریڈیئنٹ کو اپ ڈیٹ کرنا زیادہ پیچیدہ ہے کیونکہ، ڈیفالٹ کے لحاظ سے، گریڈیئنٹس کو متحرک نہیں کیا جا سکتا۔ اس پر قابو پانے کے لیے، میں استعمال کروں گا a font-size ریڈیل گریڈینٹ کو متحرک کرنے کے لیے ہیک کریں۔

اگر آپ میلان کا کوڈ چیک کرتے ہیں، تو آپ دیکھ سکتے ہیں کہ میں شامل کر رہا ہوں۔ 1em:

mask: 
    radial-gradient(farthest-side at var(--_a),
      #0000 calc(50% + var(--g)/2 + 1em), #000 calc(51% + var(--g)/2 + 1em));

یہ معلوم ہے کہ em یونٹس والدین کے عنصر سے متعلق ہیں۔ font-size، تو تبدیل کرنا font-size کی .gallery کمپیوٹیڈ کو بھی بدل دے گا۔ em قدر - یہ وہ چال ہے جسے ہم استعمال کر رہے ہیں۔ ہم متحرک کر رہے ہیں۔ font-size کی قدر سے 0 ایک دی گئی قدر پر اور، نتیجے کے طور پر، گریڈینٹ متحرک ہو جاتا ہے، جس سے کٹ آؤٹ حصہ بڑا ہوتا ہے، نیسٹڈ امیج کے سائز کے بعد جو بڑی ہو رہی ہے۔

یہاں وہ کوڈ ہے جو ہوور اثر میں شامل حصوں کو نمایاں کرتا ہے:

.gallery {
  --s: 200px; /* controls the image size */
  --g: 10px; /* controls the gaps between images */

  font-size: 0; /* initially we have 1em = 0 */
  transition: .5s;
}
/* we increase the cut-out by 1em */
.gallery > img {
  mask: 
    radial-gradient(farthest-side at var(--_a),
      #0000 calc(50% + var(--g)/2 + 1em), #000 calc(51% + var(--g)/2 + 1em));
}
/* we increase the size by 2em */
.gallery > img:nth-child(5) {
  width: calc(var(--s) + 2em);
}
/* on hover 1em = S/5 */
.gallery:hover {
  font-size: calc(var(--s) / 5);
}

۔ font-size چال مددگار ہے اگر ہم گریڈینٹ یا دیگر خصوصیات کو متحرک کرنا چاہتے ہیں جو متحرک نہیں ہوسکتی ہیں۔ @property کے ساتھ بیان کردہ حسب ضرورت خصوصیات اس طرح کے مسئلے کو حل کر سکتی ہیں، لیکن اس کے لئے حمایت لکھنے کے وقت اب بھی کمی ہے۔

میں نے دریافت کیا۔ font-size سے چال @SelenIT2 حل کرنے کی کوشش کرتے ہوئے ٹویٹر پر ایک چیلنج.

ایک اور شکل؟ چلو!

اس بار ہم نے گھونسلے کی تصویر کو رومبس کی شکل میں تراشا۔ میں آپ کو کوڈ کو ایک مشق کے طور پر الگ کرنے دوں گا تاکہ یہ معلوم کیا جا سکے کہ ہم یہاں کیسے پہنچے۔ آپ دیکھیں گے کہ ڈھانچہ وہی ہے جو ہماری مثالوں میں ہے۔ فرق صرف یہ ہے کہ ہم شکل بنانے کے لیے میلان کا استعمال کیسے کر رہے ہیں۔ کھودیں اور سیکھیں!

سرکلر امیج گرڈ

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

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

ہم استعمال کرنے جا رہے ہیں clip-path اور اس کی circle() فنکشن - آپ نے اندازہ لگایا! - تصاویر میں سے ایک دائرہ کاٹ دیں۔

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

دوسری تصاویر کے لیے، ہم دائرے کے مرکز کو اپ ڈیٹ کر سکتے ہیں (70% 70%) درج ذیل کوڈ حاصل کرنے کے لیے:

.gallery > img:hover {
  --_c: 50%; /* same as "50% at 50% 50%" */
}
.gallery > img:nth-child(1) {
  clip-path: circle(var(--_c, 55% at 70% 70%));
}
.gallery > img:nth-child(2) {
  clip-path: circle(var(--_c, 55% at 30% 70%));
}
.gallery > img:nth-child(3) {
  clip-path: circle(var(--_c, 55% at 70% 30%));
}
.gallery > img:nth-child(4) {
  clip-path: circle(var(--_c, 55% at 30% 30%));
}

نوٹ کریں کہ ہم کس طرح کی تعریف کر رہے ہیں۔ clip-path اقدار کے اندر فال بیک کے طور پر var(). اس طرح سے ہمیں ہوور پر قدر کو سیٹ کرکے آسانی سے اپ ڈیٹ کرنے کی اجازت ملتی ہے۔ --_c متغیر استعمال کرتے وقت circle()، سینٹر پوائنٹ کی ڈیفالٹ پوزیشن ہے۔ 50% 50%، لہذا ہمیں مزید جامع کوڈ کے لئے اسے چھوڑنا پڑتا ہے۔ اس لیے آپ دیکھتے ہیں کہ ہم صرف ترتیب دے رہے ہیں۔ 50% بجائے 50% at 50% 50%.

پھر ہم ہوور پر اپنی تصویر کے سائز کو گرڈ کے مجموعی سائز تک بڑھاتے ہیں تاکہ ہم دوسری تصاویر کا احاطہ کر سکیں۔ ہم یہ بھی یقینی بناتے ہیں۔ z-index ہوورڈ امیج پر اس کی قدر زیادہ ہے، لہذا یہ ہماری تصویر میں سب سے اوپر ہے۔ اسٹیکنگ سیاق و سباق.

.gallery {
  --s: 200px; /* controls the image size */
  --g: 8px;   /* controls the gap between images */

  display: grid;
  grid: auto-flow var(--s) / repeat(2, var(--s));
  gap: var(--g);
}

.gallery > img {
  width: 100%; 
  aspect-ratio: 1;
  cursor: pointer;
  z-index: 0;
  transition: .25s, z-index 0s .25s;
}
.gallery > img:hover {
  --_c: 50%; /* change the center point on hover */
  width: calc(200% + var(--g));
  z-index: 1;
  transition: .4s, z-index 0s;
}

.gallery > img:nth-child(1){
  clip-path: circle(var(--_c, 55% at 70% 70%));
  place-self: start;
}
.gallery > img:nth-child(2){
  clip-path: circle(var(--_c, 55% at 30% 70%));
  place-self: start end;
}
.gallery > img:nth-child(3){
  clip-path: circle(var(--_c, 55% at 70% 30%));
  place-self: end start;
}
.gallery > img:nth-child(4){
  clip-path: circle(var(--_c, 55% at 30% 30%));
  place-self: end;
}

کے ساتھ کیا ہو رہا ہے۔ place-self جائیداد؟ ہمیں اس کی ضرورت کیوں ہے اور ہر تصویر کی ایک خاص قدر کیوں ہے؟

کیا آپ کو وہ مسئلہ یاد ہے جب ہم نے پچھلے مضمون میں کیا تھا۔ پہیلی کے ٹکڑوں کا گرڈ بنانا? ہم نے اوور فلو بنانے کے لیے امیجز کا سائز بڑھایا، لیکن کچھ امیجز کا اوور فلو غلط تھا۔ ہم نے ان کو استعمال کرتے ہوئے ٹھیک کیا۔ place-self جائیداد.

یہاں بھی وہی مسئلہ۔ ہم امیجز کے سائز میں اضافہ کر رہے ہیں تاکہ ہر ایک اپنے گرڈ سیل کو اوور فلو کرے۔ لیکن اگر ہم کچھ نہیں کرتے ہیں تو یہ سب گرڈ کے دائیں اور نیچے کی طرف بہہ جائیں گے۔ ہمیں کیا ضرورت ہے:

1. نیچے دائیں کنارے کو اوور فلو کرنے والی پہلی تصویر (پہلے سے طے شدہ سلوک)،
2. دوسری تصویر جو نیچے کے بائیں کنارے کو اوور فلو کرتی ہے،
3. اوپری دائیں کنارے کو اوور فلو کرنے والی تیسری تصویر، اور
4. چوتھی تصویر جو اوپر کے بائیں کنارے کو اوور فلو کرتی ہے۔

اسے حاصل کرنے کے لیے، ہمیں ہر تصویر کو صحیح طریقے سے استعمال کرنے کی ضرورت ہے۔ place-self جائیداد.

اگر آپ واقف نہیں ہیں۔ place-self، یہ اس کے لیے شارٹ ہینڈ ہے۔ justify-self اور align-self عنصر کو افقی اور عمودی طور پر رکھنا۔ جب یہ ایک قدر لیتا ہے، تو دونوں صف بندی ایک ہی قدر کا استعمال کرتی ہیں۔

تصویری پینلز کو پھیلانا

پچھلے مضمون میںمیں نے ایک ٹھنڈا زوم اثر بنایا ہے جو امیجز کے گرڈ پر لاگو ہوتا ہے جہاں ہم ہر چیز کو کنٹرول کر سکتے ہیں: قطاروں کی تعداد، کالموں کی تعداد، سائز، پیمانے کا عنصر، وغیرہ۔

ایک خاص معاملہ کلاسک توسیعی پینلز کا تھا، جہاں ہمارے پاس صرف ایک قطار اور ایک مکمل چوڑائی والا کنٹینر ہے۔

ہم اس مثال کو لیں گے اور اسے شکلوں کے ساتھ جوڑیں گے!

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

سب سے پہلے، آئیے کوڈ کو آسان بنا کر اور کچھ متغیرات کو ہٹا کر شروع کریں۔

ہمیں صرف ایک قطار کی ضرورت ہے اور کالموں کی تعداد تصاویر کی تعداد کی بنیاد پر ایڈجسٹ ہونی چاہیے۔ اس کا مطلب ہے کہ ہمیں قطاروں کی تعداد کے لیے متغیر کی ضرورت نہیں ہے (--n) اور کالم (--m ) لیکن ہمیں استعمال کرنے کی ضرورت ہے۔ grid-auto-flow: columnجب ہم نئی تصاویر شامل کرتے ہیں تو گرڈ کو کالموں کو خودکار طور پر تخلیق کرنے کی اجازت دیتا ہے۔ ہم اپنے کنٹینر کے لیے ایک مقررہ اونچائی پر غور کریں گے۔ پہلے سے طے شدہ طور پر، یہ پوری چوڑائی ہوگی۔

آئیے تصاویر کو ترچھی شکل میں کلپ کرتے ہیں:

ایک بار پھر، ہر تصویر اس کے گرڈ سیل میں موجود ہے، لہذا تصاویر کے درمیان ہماری خواہش سے زیادہ جگہ ہے:

ہمیں اوورلیپ بنانے کے لیے امیجز کی چوڑائی بڑھانے کی ضرورت ہے۔ ہم بدل دیتے ہیں۔ min-width: 100% ساتھ min-width: calc(100% + var(--s))، کہاں --s ایک نیا متغیر ہے جو شکل کو کنٹرول کرتا ہے۔

اب ہمیں پہلی اور آخری تصاویر کو ٹھیک کرنے کی ضرورت ہے، تاکہ وہ بغیر کسی خلا کے صفحہ سے خون بہہ جائیں۔ دوسرے الفاظ میں، ہم پہلی تصویر کے بائیں جانب سے ترچھا اور آخری تصویر کے دائیں جانب سے ترچھا ہٹا سکتے ہیں۔ ہمیں ایک نئی ضرورت ہے۔ clip-path خاص طور پر ان دو تصاویر کے لیے۔

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

.gallery > img:first-child {
  min-width: calc(100% + var(--s)/2);
  place-self: start;
  clip-path: polygon(0 0,100% 0,calc(100% - var(--s)) 100%,0 100%);
}
.gallery > img:last-child {
  min-width: calc(100% + var(--s)/2);
  place-self: end;
  clip-path: polygon(var(--s) 0,100% 0,100% 100%,0 100%);
}

حتمی نتیجہ ترچھی تصاویر کا ایک عمدہ توسیعی پینل ہے!

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

ہم فلیکس باکس کے ساتھ اسی ترتیب کو بنا سکتے تھے کیونکہ ہم عناصر کی ایک قطار کے ساتھ کام کر رہے ہیں۔ یہاں ہے میرا نفاذ.

یقینی طور پر، ترچھی تصاویر اچھی ہیں، لیکن زیگ زگ پیٹرن کا کیا ہوگا؟ میں نے پہلے ہی اس کو چھیڑا ہے۔ آخری مضمون کا اختتام.

میں یہاں جو کچھ کر رہا ہوں وہ بدل رہا ہے۔ clip-path ساتھ mask… اور اندازہ کرو کہ کیا؟ میرے پاس پہلے ہی ایک تفصیلی مضمون موجود ہے۔ وہ زگ زیگ شکل بنانا - آن لائن کا ذکر نہ کرنا کوڈ حاصل کرنے کے لیے جنریٹر. دیکھیں سب کچھ کیسے اکٹھا ہوتا ہے؟

یہاں سب سے مشکل حصہ یہ یقینی بنانا ہے کہ زگ زگ بالکل سیدھ میں ہیں، اور اس کے لیے ہمیں ہر ایک کے لیے ایک آفسیٹ شامل کرنے کی ضرورت ہے۔ :nth-child(odd) تصویر کا عنصر

.gallery > img {
  mask: 
    conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg) 
      100% calc(50% + var(--_p, 0%))/51% calc(2*var(--s)) repeat-y,
    conic-gradient(from   45deg at left,  #0000, #000 1deg 89deg, #0000 90deg) 
      0%   calc(50% + var(--_p, 0%))/51% calc(2*var(--s)) repeat-y;
}
/* we add an offset to the odd elements */
.gallery > img:nth-child(odd) {
  --_p: var(--s);
}
.gallery > img:first-child {
  mask: 
    conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg) 
      0 calc(50% + var(--_p, 0%))/100% calc(2*var(--s));
}
.gallery > img:last-child {
  mask: 
    conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg) 
      0 calc(50% + var(--_p, 0%)) /100% calc(2*var(--s));
}

کے استعمال کو نوٹ کریں۔ --_p متغیر، جو واپس گر جائے گا 0% لیکن کے برابر ہو جائے گا --_s عجیب تصویروں کے لیے۔

یہاں ایک ڈیمو ہے جو اس مسئلے کی وضاحت کرتا ہے۔ یہ دیکھنے کے لیے ہوور کریں کہ آفسیٹ کیسے ہوتا ہے — کی طرف سے وضاحت کی گئی ہے۔ --_p - صف بندی کو ٹھیک کر رہا ہے۔

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

اور گول اطراف کیوں نہیں؟ چلو کرتے ہیں!

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

اگر آپ کو یاد ہے کہ ہم نے zig-zag کے لیے کیا کیا تھا، تو ہم نے تمام تصاویر کے لیے ایک ہی ماسک استعمال کیا تھا لیکن پھر ایک کامل اوورلیپ بنانے کے لیے طاق امیجز میں ایک آفسیٹ شامل کرنا پڑا۔ اس صورت میں، ہمیں طاق نمبر والی تصاویر کے لیے ایک مختلف ماسک کی ضرورت ہے۔

پہلا ماسک:

mask: 
  linear-gradient(-90deg,#0000 calc(2*var(--s)),#000 0) var(--s),
  radial-gradient(var(--s),#000 98%,#0000) 50% / calc(2*var(--s)) calc(1.8*var(--s)) space repeat;

دوسرا:

mask:
  radial-gradient(calc(var(--s) + var(--g)) at calc(var(--s) + var(--g)) 50%,#0000 98% ,#000) 
  calc(50% - var(--s) - var(--g)) / 100% calc(1.8*var(--s))

میں نے یہاں صرف ایک ہی کوشش کی ہے کہ گیپ متغیر کو شامل کرنے کے لیے دوسرے ماسک کو اپ ڈیٹ کریں (--g) تصاویر کے درمیان اس جگہ کو بنانے کے لیے۔

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

پہلی تصویر کے لیے، ہم ہمیشہ جانتے ہیں کہ اسے کس ماسک کی ضرورت ہے، جو کہ درج ذیل ہے:

.gallery > img:first-child {
  mask: 
    radial-gradient(calc(var(--s) + var(--g)) at right, #0000 98%, #000) 50% / 100% calc(1.8 * var(--s));
}

آخری تصویر کے لیے، یہ عناصر کی تعداد پر منحصر ہے، لہذا اس سے فرق پڑتا ہے کہ آیا وہ عنصر ہے۔ :nth-child(odd) or :nth-child(even).

.gallery > img:last-child:nth-child(even) {
  mask: 
    linear-gradient(to right,#0000 var(--s),#000 0),
    radial-gradient(var(--s),#000 98%,#0000) left / calc(2*var(--s)) calc(1.8*var(--s)) repeat-y
}

.gallery > img:last-child:nth-child(odd) {
  mask: 
    radial-gradient(calc(var(--s) + var(--g)) at left,#0000 98%,#000) 50% / 100% calc(1.8*var(--s))
}

بس! تین مختلف لے آؤٹ لیکن ہر بار ایک ہی سی ایس ایس ٹرکس:

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

اور یہاں ان سب کے ساتھ ایک بڑا ڈیمو ہے۔ آپ جس ترتیب کو دیکھنا چاہتے ہیں اسے چالو کرنے کے لیے آپ کو صرف ایک کلاس شامل کرنے کی ضرورت ہے۔

اور یہاں Flexbox کے نفاذ کے ساتھ ایک ہے۔

اپ ریپنگ

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

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

ختم کرنے سے پہلے، میں آپ کو ایک آخری مثال کے ساتھ چھوڑوں گا۔ یہ ایک "بمقابلہ" ہے دو anime کرداروں کے درمیان ایک ٹھنڈے ہوور اثر کے ساتھ۔

آپ کے بارے میں کیا خیال ہے؟ کیا آپ اس کی بنیاد پر کچھ بنا سکتے ہیں جو آپ نے سیکھا ہے؟ اسے پیچیدہ ہونے کی ضرورت نہیں ہے — کسی ٹھنڈی یا مضحکہ خیز چیز کا تصور کریں جیسا کہ میں نے اس anime میچ اپ کے ساتھ کیا تھا۔ یہ آپ کے لیے ایک اچھی مشق ہو سکتی ہے، اور ہم تبصرے کے سیکشن میں ایک بہترین مجموعہ کے ساتھ ختم کر سکتے ہیں۔