متحرک پس منظر کی پٹیاں جو ہوور پر منتقل ہوتی ہیں۔

سی ایس ایس کے لیے آپ کو کتنی بار پہنچنا ہے۔ background-size جائیداد؟ اگر آپ میری طرح ہیں - اور شاید بہت سارے دوسرے فرنٹ اینڈ لوگ ہیں - تو یہ عام طور پر ہوتا ہے جب آپ background-size: cover ایک مکمل عنصر کی جگہ کو بھرنے کے لیے ایک تصویر۔

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

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

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

ایچ ٹی ایم ایل میں جسے سبز مربع کے طور پر اسٹائل کیا گیا ہے:

div {
  width: 500px;
  height: 500px;
  background: palegreen;
}

پس منظر کی پٹیوں کو ترتیب دینا

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

div {
  width: 500px;
  height: 500px;
  background: 
    linear-gradient(black, black) top right,
    linear-gradient(black, black) top 100px right,
    linear-gradient(black, black) top 200px right,
    linear-gradient(black, black) top 300px right,
    linear-gradient(black, black) top 400px right, 
    palegreen;
}

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

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
}

لہذا، --gt قدر میلان ہے اور --n ایک مستقل ہے جس کا استعمال ہم پٹیوں کو نیچے کی طرف کرنے کے لیے کر رہے ہیں تاکہ وہ عمودی طور پر آفسیٹ ہوں۔ اور آپ نے دیکھا ہو گا کہ میں نے صحیح میلان نہیں لگایا ہے، بلکہ ٹھوس سیاہ دھاریاں linear-gradient() فنکشن - یہ جان بوجھ کر ہے اور ہم یہ جان لیں گے کہ میں نے کچھ دیر میں ایسا کیوں کیا۔

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

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
  background-repeat: no-repeat;
}

ہم سیٹ کر سکتے تھے۔ background-repeat میں background شارٹ ہینڈ، لیکن میں نے چیزوں کو پڑھنے میں آسانی رکھنے کے لیے اسے یہاں سے نکالنے کا فیصلہ کیا۔

دھاریوں کو آف سیٹ کرنا

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

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

آئیے پہلے چوڑائیوں کو ترتیب دے کر آسان آغاز کریں۔ کے لیے سنگل ویلیو نحو کا استعمال background-size چوڑائی سیٹ کرتا ہے اور اونچائی کو ڈیفالٹ کرتا ہے۔ auto. میں یہاں مکمل طور پر صوابدیدی اقدار کا استعمال کر رہا ہوں، لہذا ان اقدار کو سیٹ کریں جو آپ کے ڈیزائن کے لیے بہترین کام کرتی ہیں:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
  background-repeat: no-repeat;
  background-size: 60%, 90%, 70%, 40%, 10%;
}

اگر آپ وہی اقدار استعمال کر رہے ہیں جو میں ہوں، تو آپ کو یہ ملے گا:

کیا بالکل ایسا نہیں لگتا جیسے ہم نے تمام پٹیوں کی چوڑائی مقرر کی ہے، کیا ایسا ہے؟ اس کی وجہ سے ہے۔ auto سنگل ویلیو نحو کی اونچائی کا برتاؤ۔ دوسری پٹی اس کے نیچے کی دوسری پٹیوں سے چوڑی ہے، اور یہ ان کو ڈھانپ رہی ہے۔ ہمیں اونچائیاں طے کرنی چاہئیں تاکہ ہم اپنا کام دیکھ سکیں۔ ان سب کی اونچائی ایک جیسی ہونی چاہیے اور ہم اصل میں اپنا دوبارہ استعمال کر سکتے ہیں۔ --n متغیر، دوبارہ، چیزوں کو سادہ رکھنے کے لیے:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
    background-repeat: no-repeat;
    background-size: 60% var(--n), 90% var(--n), 70% var(--n), 40% var(--n), 10% var(--n); // HIGHLIGHT 15
}

آہ، بہت بہتر!

دھاریوں کے درمیان خلا کو شامل کرنا

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

ہم اپنا استعمال جاری رکھ سکتے ہیں۔ --n متغیر، لیکن ایک چھوٹی سی رقم کو منہا کریں، کہتے ہیں۔ 5px، کا استعمال کرتے ہوئے calc() ہم جو چاہتے ہیں اسے حاصل کرنے کے لیے۔

background-size: 60% calc(var(--n) - 5px), 90% calc(var(--n) - 5px), 70% calc(var(--n) - 5px), 40% calc(var(--n) - 5px), 10% calc(var(--n) - 5px);

یہ بہت ساری تکرار ہے جسے ہم ایک اور متغیر کے ساتھ ختم کر سکتے ہیں:

div {
  --h: calc(var(--n) - 5px);
  /* etc. */
  background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}

ماسکنگ اور ملاوٹ

اب کی تبدیلی کرتے ہیں palegreen پس منظر کا رنگ ہم اس وقت تک بصری مقاصد کے لیے سفید کے لیے استعمال کرتے رہے ہیں۔

div {
  /* etc. */
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    #fff;
  /* etc. */
}

اس طرح کا سیاہ اور سفید پیٹرن ماسکنگ اور ملاوٹ کے لیے بہترین ہے۔ ایسا کرنے کے لیے، ہم سب سے پہلے اپنے کو لپیٹنے جا رہے ہیں۔

ایک نئے پیرنٹ کنٹینر میں اور ایک سیکنڈ متعارف کروائیں۔

اس کے تحت:

ہم یہاں تھوڑی سی سی ایس ایس ری فیکٹرنگ کرنے جا رہے ہیں۔ اب جب کہ ہمارے پاس ایک نیا پیرنٹ کنٹینر ہے، ہم فکسڈ کو پاس کر سکتے ہیں۔ width اور height پراپرٹیز جو ہم استعمال کر رہے تھے۔

وہاں پر:

section {
  width: 500px;
  height: 500px;
} 

میں دونوں کو پوزیشن میں لانے کے لیے CSS گرڈ بھی استعمال کرنے جا رہا ہوں۔

ایک دوسرے کے اوپر عناصر۔ یہ وہی چال ہے جو تیمانی عفیف اپنی تخلیق کے لیے استعمال کرتی ہے۔ سپر ٹھنڈی امیج گیلریاں. خیال یہ ہے کہ ہم استعمال کرتے ہوئے مکمل کنٹینر پر دونوں divs رکھتے ہیں۔ grid-area پراپرٹی اور ہر چیز کو مرکز کی طرف سیدھ کریں:

section {
  display: grid;
  align-items: center;
  justify-items: center;
  width: 500px;
  height: 500px;
} 

section > div {
  width: inherit;
  height: inherit;
  grid-area: 1 / 1;
}

اب، یہ چیک کریں. میں نے ایک ٹھوس میلان استعمال کرنے کی وجہ جو پہلے سیاہ سے سیاہ کی طرف جاتا ہے ہمیں ماسک کرنے اور دونوں کو ملانے کے لیے ترتیب دینا ہے۔

تہوں یہ اس معنی میں درست ماسکنگ نہیں ہے کہ ہم اسے کال کر رہے ہیں۔ mask پراپرٹی، لیکن تہوں کے درمیان تضاد اس بات کو کنٹرول کرتا ہے کہ کون سے رنگ نظر آتے ہیں۔ سفید سے ڈھکا ہوا علاقہ سفید ہی رہے گا، اور کالے رنگ سے ڈھکنے والا علاقہ۔ مرکب طریقوں پر MDN کی دستاویزات یہ کیسے کام کرتا ہے اس کی ایک اچھی وضاحت ہے۔

اس کو کام کرنے کے لیے، میں اصلی میلان کا اطلاق کروں گا جسے ہم پہلے دیکھنا چاہتے ہیں۔

ہمارے ابتدائی سے طرز کے اصولوں کا اطلاق کرتے وقت

نئے پر، کا استعمال کرتے ہوئے :nth-child() سیوڈو سلیکٹر:

div:nth-child(1) { 
  background: linear-gradient(to right, red, orange); 
}

div:nth-child(2)  {
  --gt: linear-gradient(black, black);
  --n: 100px;
  --h: calc(var(--n) - 5px);
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    white;
  background-repeat: no-repeat;
  background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}

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

div:nth-child(2)  {
  /* etc. */
  mix-blend-mode: screen;
}

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

ہوور کا اثر

اس پہیلی کا آخری ٹکڑا ہوور اثر ہے جو پٹیوں کو پوری چوڑائی تک چوڑا کرتا ہے۔ پہلے، آئیے اس کے لیے اپنے سلیکٹر کو لکھیں۔ ہم چاہتے ہیں کہ ایسا اس وقت ہو جب پیرنٹ کنٹینر (

ہمارے معاملے میں) منڈلا ہوا ہے۔ جب یہ ہوور ہو جائے گا، تو ہم دوسری میں موجود پٹیوں کے پس منظر کا سائز تبدیل کر دیں گے۔

:

/* When 
 is hovered, change the second div's styles */
section:hover > div:nth-child(2){
  /* styles go here */
}

ہم تبدیل کرنا چاہیں گے۔ background-size ایک ہی اونچائی کو برقرار رکھتے ہوئے کنٹینر کی پوری چوڑائی تک پٹیوں کی:

section:hover > div:nth-child(2){
  background-size: 100% var(--h);
}

یہ پس منظر کو پوری چوڑائی تک "سنیپ" کرتا ہے۔ اگر ہم تھوڑا سا اضافہ کریں۔ transition اس پر، پھر ہم دیکھتے ہیں کہ ہوور پر پٹیاں پھیلتی ہیں:

section:hover > div:nth-child(2){
  background-size: 100% var(--h);
  transition: background-size 1s;
}

یہاں ایک بار پھر آخری ڈیمو ہے:

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

یہ ایک لپیٹ ہے!

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

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