فینسی امیج ڈیکوریشن: سنگل ایلیمنٹ میجک

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

یہ ٹھیک ہے، کوئی اضافی مارک اپ، کوئی divs، اور کوئی چھدم عناصر نہیں۔ صرف ایک ٹیگ۔

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

آئیے اپنی پہلی مثال سے شروع کرتے ہیں۔

کوڈ میں کھودنے سے پہلے آئیے اسٹائل کرنے کے امکانات کو شمار کرتے ہیں۔ بغیر کسی اضافی عناصر یا چھدم عناصر کے۔ ہم استعمال کر سکتے ہیں۔ border, box-shadow, outline، اور، بالکل، background. کسی تصویر میں پس منظر شامل کرنا عجیب لگ سکتا ہے کیونکہ ہم اسے نہیں دیکھ سکتے کیونکہ یہ تصویر کے پیچھے ہوگی — لیکن چال یہ ہے کہ جگہ بنانا ارد گرد تصویر کا استعمال کرتے ہوئے padding اور / یا border اور پھر اس جگہ کے اندر ہمارا پس منظر کھینچیں۔

مجھے لگتا ہے کہ جب سے میں نے بات کی ہے آپ جانتے ہیں کہ آگے کیا ہوتا ہے۔ background، ٹھیک ہے؟ جی ہاں، میلان! تمام سجاوٹ جو ہم بنانے جا رہے ہیں وہ بہت سارے میلان پر انحصار کرتے ہیں۔ اگر آپ نے میری پیروی کی تھوڑی دیر کے لیے، مجھے لگتا ہے کہ یہ شاید آپ کے لیے کوئی تعجب کی بات نہیں ہے۔ 😁

آئیے اپنی پہلی مثال پر واپس آتے ہیں:

img {
  --s: 10px; /* control the size */
  padding: var(--s);
  border: calc(2 * var(--s)) solid #0000;
  outline: 1px solid #000;
  outline-offset: calc(-1 * var(--s));
  background: conic-gradient(from 90deg at 1px 1px, #0000 25%, #000 0);
}

ہم تعریف کر رہے ہیں۔ padding اور ایک شفاف border متغیر کا استعمال کرتے ہوئے --s ہماری تصویر کے ارد گرد اس متغیر کے تین گنا برابر جگہ بنانے کے لیے۔

ہم دونوں کو کیوں استعمال کر رہے ہیں۔ padding اور border ایک یا دوسرے کے بجائے؟ ہم ان میں سے صرف ایک کا استعمال کر کے حاصل کر سکتے ہیں لیکن مجھے اپنے میلان کے لیے اس امتزاج کی ضرورت ہے کیونکہ، بطور ڈیفالٹ، ابتدائی قدر background-clip is border-box اور background-origin مساوی ہے padding-box.

منطق کو سمجھنے کے لیے یہاں ایک مرحلہ وار مثال ہے:

ابتدائی طور پر، ہمارے پاس تصویر پر کوئی سرحدیں نہیں ہیں، لہذا ہمارا میلان اس کے ساتھ دو حصے بنائے گا 1px موٹائی کی. (میں استعمال کر رہا ہوں 3px اس مخصوص ڈیمو میں تاکہ اسے دیکھنا آسان ہو۔) ہم ایک رنگین بارڈر شامل کرتے ہیں اور میلان پھر بھی ہمیں پیڈنگ ایریا کے اندر وہی نتیجہ دیتا ہے (کی وجہ سے background-originلیکن یہ سرحد کے پیچھے دہرایا جاتا ہے۔ اگر ہم بارڈر کا رنگ شفاف بناتے ہیں تو ہم تکرار کا استعمال کر سکتے ہیں اور ہمیں مطلوبہ فریم مل جاتا ہے۔

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

یہاں صرف تدریجی حل ہے جہاں میں صرف استعمال کر رہا ہوں۔ padding جگہ کی وضاحت کرنے کے لئے. اب بھی وہی نتیجہ لیکن زیادہ پیچیدہ نحو کے ساتھ۔

آئیے ایک اور خیال آزمائیں:

اس کے لئے، میں نے پچھلی مثال کو ہٹا دیا outline، اور لاگو کیا a clip-path ہر طرف میلان کو کاٹنے کے لیے۔ دی clip-path قدر قدرے لفظی اور مبہم ہے لیکن اس کے نکات کو بہتر طور پر دیکھنے کے لیے یہاں ایک مثال ہے:

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

کونے کا صرف فریم

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

--b: 5px; /* border thickness */
background: conic-gradient(from 90deg at top var(--b) left var(--b), #0000 90deg, darkblue 0) 0 0;
background-size: 50px 50px; 
background-repeat: no-repeat;

ہم برابر سائز کے ساتھ ایک میلان کھینچنے جا رہے ہیں۔ 50px 50px اور اسے اوپر بائیں کونے میں رکھیں (0 0)۔ گریڈینٹ کی ترتیب کے لیے، یہاں ایک مرحلہ وار مثال ہے جس میں دکھایا گیا ہے کہ میں اس نتیجے تک کیسے پہنچا۔

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

#0000 25%, darkblue 0

یہ بنیادی طور پر کہہ رہا ہے: "گریڈینٹ کو شفاف رنگ سے بھریں۔ 25% کے علاقے، پھر بقیہ علاقے کو اس سے بھریں۔ darkblue.

ہو سکتا ہے آپ اس پر اپنا سر کھجا رہے ہوں۔ 0 قدر. نحو کو آسان بنانے کے لیے یہ ایک چھوٹا سا ہیک ہے۔ حقیقت میں، ہمیں اسے رنگوں کے درمیان سختی سے روکنے کے لیے استعمال کرنا چاہیے:

#0000 25%, darkblue 25%

یہ زیادہ منطقی ہے! شفاف رنگ ختم ہوتا ہے۔ 25% اور darkblue بالکل وہیں سے شروع ہوتا ہے جہاں شفافیت ختم ہوتی ہے، سخت روک لگا کر۔ اگر ہم دوسرے کو اس کے ساتھ بدل دیں۔ 0، براؤزر ہمارے لئے کام کرے گا، لہذا اس کے بارے میں جانے کا یہ قدرے زیادہ موثر طریقہ ہے۔

کہیں اندر تفصیلات، اس کا کہنا ہے:

اگر ایک رنگ روک or منتقلی کا اشارہ اس کے پاس ایسی پوزیشن ہے جو فہرست میں اس سے پہلے کسی بھی کلر اسٹاپ یا ٹرانزیشن کے اشارے کی مخصوص پوزیشن سے کم ہے، اس کی پوزیشن کو اس سے پہلے کسی بھی کلر اسٹاپ یا ٹرانزیشن کے اشارے کی سب سے بڑی مخصوص پوزیشن کے برابر مقرر کریں۔

0 کسی بھی دوسری قدر سے ہمیشہ چھوٹا ہوتا ہے، لہذا براؤزر اسے ہمیشہ اس سب سے بڑی قدر میں تبدیل کر دے گا جو اس سے پہلے اعلان میں آتی ہے۔ ہمارے معاملے میں، وہ نمبر ہے 25%.

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

img {
  --b: 5px; /* border thickness */
  --c: #0000 90deg, darkblue 0; /* define the color here */
  padding: 10px;
  background:
    conic-gradient(from 90deg  at top    var(--b) left  var(--b), var(--c)) 0 0,
    conic-gradient(from 180deg at top    var(--b) right var(--b), var(--c)) 100% 0,
    conic-gradient(from 0deg   at bottom var(--b) left  var(--b), var(--c)) 0 100%,
    conic-gradient(from -90deg at bottom var(--b) right var(--b), var(--c)) 100% 100%;
  background-size: 50px 50px; /* adjust border length here */
  background-repeat: no-repeat;
}

میں نے کچھ فالتو پن سے بچنے کے لیے CSS متغیرات متعارف کرائے ہیں کیونکہ تمام میلان ایک ہی رنگ کی ترتیب استعمال کرتے ہیں۔

ہوور اثر کے لیے، میں جو کچھ کر رہا ہوں وہ مکمل فریم بنانے کے لیے میلان کا سائز بڑھا رہا ہے:

img:hover {
  background-size: 51% 51%;
}

ہاں ، یہ ہے 51% بجائے 50% - جو ایک چھوٹا اوورلیپ بناتا ہے اور ممکنہ خلا سے بچتا ہے۔

آئیے اسی تکنیک کا استعمال کرتے ہوئے ایک اور خیال آزمائیں:

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

img {
  --b: 8px;  /* border thickness*/
  --s: 60px; /* size of the corner*/
  --g: 14px; /* the gap*/
  --c: #EDC951; 

  padding: calc(var(--b) + var(--g));
  background-image:
    conic-gradient(from  90deg at top    var(--b) left  var(--b), #0000 25%, var(--c) 0),
    conic-gradient(from -90deg at bottom var(--b) right var(--b), #0000 25%, var(--c) 0);
  background-position:
    var(--_p, 0%) var(--_p, 0%),
    calc(100% - var(--_p, 0%)) calc(100% - var(--_p, 0%));
  background-size: var(--s) var(--s);
  background-repeat: no-repeat;
  transition: 
    background-position .3s var(--_i,.3s), 
    background-size .3s calc(.3s - var(--_i, .3s));
}
img:hover {
  background-size: calc(100% - var(--g)) calc(100% - var(--g));
  --_p: calc(var(--g) / 2);
  --_i: 0s;
}

کیوں کرتے ہیں --_i اور --_p متغیرات کے نام پر انڈر سکور ہے؟ انڈر سکور نام دینے کے کنونشن کا حصہ ہیں جسے میں کوڈ کو بہتر بنانے کے لیے استعمال ہونے والے "اندرونی" متغیرات پر غور کرنے کے لیے استعمال کرتا ہوں۔ وہ کچھ خاص نہیں ہیں لیکن میں ان متغیرات کے درمیان فرق کرنا چاہتا ہوں جو ہم فریم کو کنٹرول کرنے کے لیے ایڈجسٹ کرتے ہیں (جیسے --b, --cوغیرہ) اور جن کو میں کوڈ کو چھوٹا بنانے کے لیے استعمال کرتا ہوں۔

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

مختلف اقدار کو بہتر طور پر سمجھنے کے لیے یہاں ایک مثال ہے:

فریم کا انکشاف

آئیے ایک اور قسم کی اینیمیشن آزمائیں جہاں ہم ہوور پر مکمل فریم ظاہر کرتے ہیں:

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

لیکن اس بار، تمام عنصر کو ڈھانپنے کے بجائے، میں a کی وضاحت کرکے صرف ایک چھوٹے سے حصے کا احاطہ کرتا ہوں۔ height اس طرح کچھ حاصل کرنے کے لئے:

یہ ہمارے فریم کی سب سے اوپر کی سرحد ہے۔ ہم تصویر کے ہر طرف ایک ہی عمل کو دہراتے ہیں اور ہمارا ہوور اثر ہوتا ہے:

img {
  --b: 10px; /* the border thickness*/
  --g: 5px; /* the gap on hover */
  --c: #8A9B0F; 

  padding: calc(var(--g) + var(--b));
  --_g: no-repeat linear-gradient(var(--c) 0 0);
  background: 
    var(--_g) var(--_i, 0%) 0,
    var(--_g) 100% var(--_i, 0%),
    var(--_g) calc(100% - var(--_i, 0%)) 100%,
    var(--_g) 0 calc(100% - var(--_i, 0%));
  background-size: var(--_i, 0%) var(--b),var(--b) var(--_i, 0%);
  transition: .4s, background-position 0s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
}

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

ایک دوسرا؟ چلو!

یہ تھوڑا سا مشکل لگتا ہے اور اسے یہ سمجھنے کے لیے درحقیقت کچھ تخیل کی ضرورت ہوتی ہے کہ دو مخروطی میلان اس قسم کے جادو کو کس طرح کھینچ رہے ہیں۔ میلان میں سے ایک کی وضاحت کے لیے یہاں ایک ڈیمو ہے:

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

لیکن میں نے میلان کی چوڑائی کیوں بنائی؟ 200%? آپ سوچیں گے۔ 100% کافی ہو گا، ٹھیک ہے؟

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

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

img {
  --c: #8A9B0F; /* the border color */
  --b: 10px; /* the border thickness*/
  --g: 5px;  /* the gap */

  padding: calc(var(--g) + var(--b));
  --_g: #0000 25%, var(--c) 0;
  background: 
    conic-gradient(from 180deg at top    var(--b) right var(--b), var(--_g))
     var(--_i, 200%) 0 / 200% var(--_i, var(--b))  no-repeat,
    conic-gradient(            at bottom var(--b) left  var(--b), var(--_g))
     0 var(--_i, 200%) / var(--_i, var(--b)) 200%  no-repeat;
  transition: .3s, background-position .3s .3s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
  transition: .3s, background-size .3s .3s;
}

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

فریم کی گردش

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

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

آئیے دیکھتے ہیں کہ ٹاپ گریڈینٹ کے لیے اینیمیشن کیسے بنتی ہے:

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

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

اب، ہم بقیہ کناروں کو ڈھانپنے کے لیے مزید دو گریڈینٹ شامل کرتے ہیں اور ہم کر چکے ہیں:

img {
  --g: 4px; /* the gap */
  --b: 12px; /* border thickness*/
  --c: #669706; /* the color */

  padding: calc(var(--g) + var(--b));
  --_c: #0000 0 25%, var(--c) 0 50%;
  --_g1: repeating-linear-gradient(90deg ,var(--_c)) repeat-x;
  --_g2: repeating-linear-gradient(180deg,var(--_c)) repeat-y;
  background:
    var(--_g1) var(--_p, 25%) 0, 
    var(--_g2) 0 var(--_p, 125%),
    var(--_g1) var(--_p, 125%) 100%, 
    var(--_g2) 100% var(--_p, 25%);
  background-size: 200% var(--b), var(--b) 200%;
  transition: .3s;
}
img:hover {
  --_p: 75%;
}

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

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

اپ ریپنگ

یہ ایک مضمون میں بہت سارے میلان ہے!

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

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

میں اس سیریز کے اگلے مضمون تک آپ کو روکنے کے لیے ایک آخری ڈیمو کے ساتھ چھوڑنے والا ہوں۔ اس بار، میں استعمال کر رہا ہوں۔ radial-gradient() ایک اور مضحکہ خیز ہوور اثر پیدا کرنے کے لیے۔ میں آپ کو کوڈ کو الگ کرنے دوں گا کہ یہ کیسے کام کرتا ہے۔ اگر آپ پھنس جاتے ہیں تو تبصرے میں مجھ سے سوالات پوچھیں!