میرے پاس بھی ایسا ہی خیال ہے لیکن ایک مختلف طریقے سے اور حرکت پذیری کے چھڑکاؤ سے نمٹا گیا۔ میرے خیال میں یہ کافی عملی ہے اور ایک صاف ہوور اثر کے لیے بناتا ہے جسے آپ اپنے اوتار جیسی کسی چیز پر استعمال کر سکتے ہیں۔
اسکو دیکھو؟ ہم ایک اسکیلنگ اینیمیشن بنانے جا رہے ہیں جہاں لگتا ہے کہ اوتار جس دائرے میں ہے اس سے بالکل باہر نکلتا ہے۔ اچھا، ٹھیک ہے؟ کوڈ کو مت دیکھیں اور آئیے اس اینیمیشن کو مل کر مرحلہ وار بنائیں۔
HTML: صرف ایک عنصر
اگر آپ نے ڈیمو کا کوڈ چیک نہیں کیا ہے اور آپ سوچ رہے ہیں کہ کتنے ہیں۔ divیہ لے جائے گا، پھر وہیں رک جائیں، کیونکہ ہمارا مارک اپ ایک تصویری عنصر کے سوا کچھ نہیں ہے:
<img src="" alt="">
جی ہاں، ایک عنصر! اس مشق کا سب سے مشکل حصہ کوڈ کی سب سے چھوٹی مقدار کا استعمال کرنا ہے۔ اگر آپ ہو چکے ہیں۔ میرے پیچھے تھوڑی دیر کے لیے، آپ کو اس کی عادت ڈالنی چاہیے۔ میں CSS حل تلاش کرنے کی پوری کوشش کرتا ہوں جو سب سے چھوٹے، سب سے زیادہ برقرار رکھنے کے قابل کوڈ کے ساتھ حاصل کیا جا سکتا ہے۔
میں نے لکھا مضامین کی ایک سیریز یہاں CSS-Tricks پر جہاں میں ایک ہی عنصر پر مشتمل ایک ہی HTML مارک اپ کا استعمال کرتے ہوئے مختلف ہوور اثرات تلاش کرتا ہوں۔ میں گریڈیئنٹس، ماسکنگ، کلپنگ، آؤٹ لائنز، اور یہاں تک کہ لے آؤٹ تکنیکوں پر تفصیل سے جاتا ہوں۔ میں ان کو چیک کرنے کی انتہائی سفارش کرتا ہوں کیونکہ میں اس پوسٹ میں بہت سی چالوں کو دوبارہ استعمال کروں گا۔
ایک تصویری فائل جو شفاف پس منظر کے ساتھ مربع ہے جو ہم کر رہے ہیں اس کے لیے بہترین کام کرے گی۔ اگر آپ اس کے ساتھ شروع کرنا چاہتے ہیں تو میں یہاں استعمال کر رہا ہوں۔
میں حقیقی تصاویر کا استعمال کرتے ہوئے اس کی بہت سی مثالیں دیکھنے کی امید کر رہا ہوں — لہذا جب آپ کام کر لیں تو براہ کرم اپنے حتمی نتائج کو تبصروں میں شیئر کریں تاکہ ہم ایک مجموعہ بنا سکیں!
سی ایس ایس میں کودنے سے پہلے، آئیے سب سے پہلے اثر کو الگ کرتے ہیں۔ ہوور پر تصویر بڑی ہو جاتی ہے، لہذا ہم یقینی طور پر استعمال کریں گے۔ transform: scale() اس میں. اوتار کے پیچھے ایک دائرہ ہے، اور ایک ریڈیل گریڈینٹ کو چال کرنا چاہیے۔ آخر میں، ہمیں دائرے کے نیچے ایک بارڈر بنانے کا ایک طریقہ درکار ہے جو دائرے کے پیچھے اوتار کی شکل پیدا کرے۔
ابھی تک کچھ بھی پیچیدہ نہیں ہے، ٹھیک ہے؟ آئیے آگے بڑھیں۔
دائرہ
ہم نے کہا کہ پس منظر ریڈیل گریڈینٹ ہوگا۔ یہ کامل ہے کیونکہ ہم ریڈیل گریڈینٹ کے رنگوں کے درمیان سخت اسٹاپس بنا سکتے ہیں، جس سے ایسا لگتا ہے کہ ہم ٹھوس لکیروں کے ساتھ ایک دائرہ کھینچ رہے ہیں۔
سی ایس ایس متغیر کو نوٹ کریں، --bمیں وہاں استعمال کر رہا ہوں۔ یہ "بارڈر" کی موٹائی کی نمائندگی کرتا ہے جو واقعی صرف ریڈیل گریڈینٹ کے سرخ حصے کے لیے سخت رنگ کے اسٹاپس کی وضاحت کے لیے استعمال ہو رہا ہے۔
اگلا مرحلہ ہوور پر گریڈینٹ سائز کے ساتھ کھیلنا ہے۔ تصویر کے بڑھنے کے ساتھ ہی دائرے کو اپنا سائز برقرار رکھنے کی ضرورت ہے۔ چونکہ ہم درخواست دے رہے ہیں۔ scale() تبدیلی، ہمیں اصل میں ضرورت ہے کمی دائرے کا سائز کیونکہ یہ دوسری صورت میں اوتار کے ساتھ بڑھ جاتا ہے۔ لہذا، جب تصویر کی پیمائش ہوتی ہے، تو ہمیں نیچے کی پیمائش کرنے کے لیے میلان کی ضرورت ہوتی ہے۔
آئیے ایک CSS متغیر کی وضاحت کرتے ہوئے شروع کریں، --f، جو "اسکیل فیکٹر" کی وضاحت کرتا ہے، اور اسے دائرے کا سائز سیٹ کرنے کے لیے استعمال کریں۔ میں استعمال کر رہا ہوں 1 پہلے سے طے شدہ قدر کے طور پر، جیسا کہ اس میں تصویر اور اس دائرے کا ابتدائی پیمانہ ہے جس سے ہم تبدیل ہوتے ہیں۔
چال کو واضح کرنے کے لیے یہاں ایک ڈیمو ہے۔ پردے کے پیچھے کیا ہو رہا ہے یہ دیکھنے کے لیے ہوور کریں:
میں نے تیسرا رنگ شامل کیا۔ radial-gradient ہوور پر میلان کے علاقے کی بہتر شناخت کرنے کے لیے:
اب ہمیں اپنے پس منظر کو دائرے کے مرکز میں رکھنا ہے اور اس بات کو یقینی بنانا ہے کہ یہ پوری اونچائی تک لے جاتا ہے۔ میں براہ راست پر ہر چیز کا اعلان کرنا پسند کرتا ہوں۔ background شارٹ ہینڈ پراپرٹی، تاکہ ہم اپنی بیک گراؤنڈ پوزیشننگ کو شامل کر سکیں اور اس بات کو یقینی بنا سکیں کہ اس کے بعد ان اقدار پر ٹیک لگا کر یہ دہرایا نہ جائے۔ radial-gradient():
پس منظر مرکز میں رکھا گیا ہے (50%) کے برابر چوڑائی ہے۔ calc(100%/var(--f))، اور اس کی اونچائی کے برابر ہے۔ 100%.
کچھ بھی نہیں ترازو جب --f مساوی ہے 1 - دوبارہ، ہمارا ابتدائی پیمانہ۔ دریں اثنا، میلان کنٹینر کی پوری چوڑائی کو لے لیتا ہے۔ جب ہم اضافہ کرتے ہیں۔ --f، عنصر کا سائز بڑھتا ہے — کا شکریہ scale() تبدیلی - اور میلان کا سائز کم ہو جاتا ہے۔
جب ہم ان سب کو اپنے ڈیمو پر لاگو کرتے ہیں تو ہمیں کیا ملتا ہے:
ہم قریب آ رہے ہیں! ہمارے پاس اوور فلو اثر سب سے اوپر ہے، لیکن ہمیں اب بھی تصویر کے نیچے والے حصے کو چھپانے کی ضرورت ہے، لہذا ایسا لگتا ہے کہ یہ سامنے بیٹھنے کے بجائے دائرے سے باہر نکل رہا ہے۔ یہ اس ساری چیز کا مشکل حصہ ہے اور ہم آگے کیا کرنے جا رہے ہیں۔
نیچے کی سرحد
میں نے پہلے اس سے نمٹنے کی کوشش کی۔ border-bottom پراپرٹی، لیکن میں بارڈر کے سائز کو دائرے کے سائز سے ملنے کا کوئی طریقہ تلاش کرنے سے قاصر تھا۔ یہ سب سے بہتر ہے جو مجھے مل سکتا ہے اور آپ فوری طور پر دیکھ سکتے ہیں کہ یہ غلط ہے:
اصل حل استعمال کرنا ہے۔ outline جائیداد جی ہاں، outline، نہیں borderہے. میں ایک پچھلا مضمون، میں دکھاتا ہوں کہ کیسے outline طاقتور ہے اور ہمیں ٹھنڈے ہوور اثرات پیدا کرنے کی اجازت دیتا ہے۔ کے ساتھ مل کر outline-offset، ہمارے پاس بالکل وہی ہے جو ہمیں اپنے اثر کے لئے درکار ہے۔
خیال یہ ہے کہ ایک سیٹ کریں۔ outline تصویر پر اور نیچے کی سرحد بنانے کے لیے اس کے آفسیٹ کو ایڈجسٹ کریں۔ آفسیٹ اسکیلنگ فیکٹر پر اسی طرح منحصر ہوگا جس طرح گریڈینٹ سائز نے کیا تھا۔
اب ہمارے پاس ہماری نچلی "بارڈر" ہے (دراصل ایک outline) مکمل دائرہ بنانے کے لیے گریڈینٹ کے ذریعے تخلیق کردہ "بارڈر" کے ساتھ مل کر۔ ہمیں اب بھی کے کچھ حصے چھپانے کی ضرورت ہے۔ outline (اوپر سے اور اطراف سے)، جسے ہم ایک لمحے میں حاصل کر لیں گے۔
یہاں ہمارا اب تک کا کوڈ ہے، جس میں کچھ اور سی ایس ایس متغیرات بھی شامل ہیں جنہیں آپ تصویر کے سائز کو ترتیب دینے کے لیے استعمال کر سکتے ہیں (--s) اور "بارڈر" رنگ (--c):
چونکہ ہمیں ایک سرکلر نیچے کی سرحد کی ضرورت ہے، ہم نے ایک شامل کیا۔ border-radius نیچے کی طرف، اجازت دیتا ہے outline میلان کے گھماؤ سے ملنے کے لیے۔
پر استعمال کیا جاتا حساب outline-offset یہ دیکھنے سے کہیں زیادہ سیدھا ہے۔ پہلے سے طے شدہ طور پر، outline تیار کیا گیا ہے باہر عنصر کے خانے کا۔ اور ہمارے معاملے میں، ہمیں اس کی ضرورت ہے۔ اوورلیپ عنصر مزید واضح طور پر، ہمیں میلان کے ذریعہ بنائے گئے دائرے کی پیروی کرنے کی ضرورت ہے۔
جب ہم عنصر کی پیمائش کرتے ہیں، تو ہمیں دائرے اور کنارے کے درمیان خلا نظر آتا ہے۔ آئیے یہ نہ بھولیں کہ اسکیل ٹرانسفارمیشن چلنے کے بعد دائرے کو ایک ہی سائز میں رکھنا ہے، جس سے ہمارے پاس وہ جگہ باقی رہ جاتی ہے جسے ہم اوپر والے اعداد و شمار میں بیان کردہ خاکہ کے آفسیٹ کی وضاحت کے لیے استعمال کریں گے۔
آئیے یہ نہ بھولیں کہ دوسرا عنصر چھوٹا ہے، لہذا ہمارا نتیجہ بھی پیمانہ ہے… جس کا مطلب ہے کہ ہمیں نتیجہ کو تقسیم کرنے کی ضرورت ہے f حقیقی آفسیٹ ویلیو حاصل کرنے کے لیے:
Offset = ((f - 1) * S/2) / f = (1 - 1/f) * S/2
ہم ایک منفی نشان شامل کرتے ہیں کیونکہ ہمیں باہر سے اندر جانے کے لیے خاکہ کی ضرورت ہوتی ہے:
Offset = (1/f - 1) * S/2
یہاں ایک فوری ڈیمو ہے جو ظاہر کرتا ہے کہ خاکہ کس طرح میلان کی پیروی کرتا ہے:
آپ اسے پہلے ہی دیکھ سکتے ہیں، لیکن ہمیں پھر بھی دائرے کو اوورلیپ کرنے کے لیے نیچے کی خاکہ کی ضرورت ہے بجائے اس کے کہ اس میں خون بہنے دیں۔ ہم آفسیٹ سے بارڈر کے سائز کو ہٹا کر ایسا کر سکتے ہیں:
اس ٹاپ پیڈنگ کی کوئی خاص منطق نہیں ہے۔ خیال یہ ہے کہ اس بات کو یقینی بنایا جائے کہ خاکہ اوتار کے سر کو نہ چھوئے۔ میں نے عنصر کے سائز کو اس جگہ کی وضاحت کرنے کے لیے استعمال کیا تاکہ ہمیشہ ایک ہی تناسب ہو۔
نوٹ کریں کہ میں نے شامل کیا ہے۔ content-box کی قدر background:
ہمیں اس کی ضرورت ہے کیونکہ ہم نے پیڈنگ شامل کی ہے اور ہم صرف پس منظر کو مواد کے خانے میں سیٹ کرنا چاہتے ہیں، لہذا ہمیں واضح طور پر پس منظر کو وہاں رکنے کے لیے بتانا چاہیے۔
مکس میں CSS ماسک شامل کرنا
ہم آخری حصے میں پہنچ گئے! ہمیں بس کچھ ٹکڑوں کو چھپانے کی ضرورت ہے، اور ہم ہو چکے ہیں۔ اس کے لیے ہم پر بھروسہ کریں گے۔ mask پراپرٹی اور یقیناً میلان۔
یہاں ایک اعداد و شمار ہے جس کی وضاحت کرنے کے لیے ہمیں کیا چھپانے کی ضرورت ہے یا ہمیں زیادہ درست ہونے کے لیے کیا دکھانے کی ضرورت ہے۔
بائیں تصویر وہی ہے جو ہمارے پاس ہے، اور دائیں وہ ہے جو ہم چاہتے ہیں۔ سبز حصہ اس ماسک کی وضاحت کرتا ہے جسے حتمی نتیجہ حاصل کرنے کے لیے ہمیں اصل تصویر پر لاگو کرنا چاہیے۔
ہم اپنے ماسک کے دو حصوں کی شناخت کر سکتے ہیں:
نچلے حصے میں ایک گول حصہ جس کا طول و عرض اور گھماؤ وہی ہے جو ریڈیل گریڈینٹ ہے جسے ہم اوتار کے پیچھے دائرہ بنانے کے لیے استعمال کرتے تھے۔
سب سے اوپر ایک مستطیل جو آؤٹ لائن کے اندر کے علاقے کا احاطہ کرتا ہے۔ دیکھیں کہ خاکہ اوپر کے سبز علاقے سے باہر کیسے ہے - یہ سب سے اہم حصہ ہے، کیونکہ یہ آؤٹ لائن کو کاٹنے کی اجازت دیتا ہے تاکہ صرف نیچے والا حصہ نظر آئے۔
آئیے اس کو توڑتے ہیں۔ mask جائیداد شروع کرنے والوں کے لیے، نوٹس ہے کہ اسی طرح radial-gradient() سے background جائیداد وہاں ہے. میں نے ایک نیا متغیر بنایا، --_g، چیزوں کو کم بے ترتیبی بنانے کے لئے عام حصوں کے لئے۔
یہ ماسک کا مستطیل حصہ بناتا ہے۔ اس کی چوڑائی ریڈیل گریڈینٹ کی چوڑائی مائنس بارڈر موٹائی کے دو گنا کے برابر ہے:
calc(100% / var(--f) - 2 * var(--b))
مستطیل کی اونچائی نصف کے برابر ہے، 50%، عنصر کے سائز کا۔
ہمیں افقی مرکز میں خطی میلان کی بھی ضرورت ہے50%) اور آؤٹ لائن کے آفسیٹ کے طور پر اسی قدر سے اوپر سے آفسیٹ کریں۔ میں نے ایک اور CSS متغیر بنایا، --_o، آفسیٹ کے لئے ہم نے پہلے بیان کیا تھا:
یہاں مبہم چیزوں میں سے ایک یہ ہے کہ ہمیں ایک کی ضرورت ہے۔ منفی آؤٹ لائن کے لیے آفسیٹ (اسے باہر سے اندر منتقل کرنے کے لیے) لیکن a مثبت گریڈینٹ کے لیے آفسیٹ (اوپر سے نیچے کی طرف جانے کے لیے)۔ لہذا، اگر آپ سوچ رہے ہیں کہ ہم آفسیٹ کو کیوں ضرب دیتے ہیں، --_o، کی طرف سے -1ٹھیک ہے، اب آپ جانتے ہیں!
ماسک کی تدریجی ترتیب کو واضح کرنے کے لیے یہاں ایک ڈیمو ہے:
اوپر ہوور کریں اور دیکھیں کہ سب کچھ ایک ساتھ کیسے چلتا ہے۔ درمیانی باکس ماسک کی پرت کی وضاحت کرتا ہے جو دو گریڈینٹ پر مشتمل ہے۔ اسے بائیں تصویر کے مرئی حصے کے طور پر تصور کریں، اور آپ کو حتمی نتیجہ دائیں طرف ملے گا!
اپ ریپنگ
اوف، ہم نے کر لیا! اور نہ صرف ہم نے ایک سلک ہوور اینیمیشن کے ساتھ سمیٹ لیا، بلکہ ہم نے یہ سب ایک ہی ایچ ٹی ایم ایل کے ساتھ کیا۔ <img> عنصر بس اتنا ہی اور CSS کی 20 لائنوں سے بھی کم چالیں!
یقینی طور پر، ہم نے اس طرح کے پیچیدہ اثر تک پہنچنے کے لیے کچھ چھوٹی چالوں اور ریاضی کے فارمولوں پر انحصار کیا۔ لیکن ہم بالکل جانتے تھے کہ کیا کرنا ہے کیونکہ ہم نے ان ٹکڑوں کی نشاندہی کی جن کی ہمیں سامنے کی ضرورت تھی۔
اگر ہم خود کو مزید ایچ ٹی ایم ایل کی اجازت دیتے تو کیا ہم سی ایس ایس کو آسان بنا سکتے تھے؟ بالکل۔ لیکن ہم یہاں CSS کی نئی ترکیبیں سیکھنے کے لیے موجود ہیں! سی ایس ایس گریڈینٹ، ماسکنگ، کو دریافت کرنے کے لیے یہ ایک اچھی مشق تھی۔ outline جائیداد کا رویہ، تبدیلیاں، اور بہت کچھ۔ اگر آپ کسی بھی وقت کھوئے ہوئے محسوس کرتے ہیں، تو ضرور دیکھیں میری سیریز جو ایک ہی عام تصورات کا استعمال کرتا ہے۔ یہ کبھی کبھی مزید مثالوں کو دیکھنے میں مدد کرتا ہے اور ایک پوائنٹ کو گھر چلانے کے لیے کیسز کا استعمال کرتا ہے۔
میں آپ کو ایک آخری ڈیمو کے ساتھ چھوڑوں گا جو مشہور CSS ڈویلپرز کی تصاویر کا استعمال کرتا ہے۔ مجھے اپنی تصویر کے ساتھ ایک ڈیمو دکھانا نہ بھولیں تاکہ میں اسے مجموعہ میں شامل کر سکوں!
آپ کے اوتار کے لیے ایک فینسی ہوور اثر
افلاطون کے ذریعہ دوبارہ شائع کیا گیا۔
کیا آپ جانتے ہیں کہ اس قسم کا اثر جہاں کسی کا سر دائرے یا سوراخ سے نکلتا ہے؟ مشہور پورکی پگ اینیمیشن جہاں وہ سرخ رنگوں کی ایک سیریز سے باہر نکلتے ہوئے الوداع لہراتا ہے اس کی بہترین مثال ہے، اور Kilian Valkhof نے اصل میں اسے دوبارہ CSS-Tricks پر کچھ دیر پہلے بنایا تھا۔.
میرے پاس بھی ایسا ہی خیال ہے لیکن ایک مختلف طریقے سے اور حرکت پذیری کے چھڑکاؤ سے نمٹا گیا۔ میرے خیال میں یہ کافی عملی ہے اور ایک صاف ہوور اثر کے لیے بناتا ہے جسے آپ اپنے اوتار جیسی کسی چیز پر استعمال کر سکتے ہیں۔
اسکو دیکھو؟ ہم ایک اسکیلنگ اینیمیشن بنانے جا رہے ہیں جہاں لگتا ہے کہ اوتار جس دائرے میں ہے اس سے بالکل باہر نکلتا ہے۔ اچھا، ٹھیک ہے؟ کوڈ کو مت دیکھیں اور آئیے اس اینیمیشن کو مل کر مرحلہ وار بنائیں۔
HTML: صرف ایک عنصر
اگر آپ نے ڈیمو کا کوڈ چیک نہیں کیا ہے اور آپ سوچ رہے ہیں کہ کتنے ہیں۔
divیہ لے جائے گا، پھر وہیں رک جائیں، کیونکہ ہمارا مارک اپ ایک تصویری عنصر کے سوا کچھ نہیں ہے:جی ہاں، ایک عنصر! اس مشق کا سب سے مشکل حصہ کوڈ کی سب سے چھوٹی مقدار کا استعمال کرنا ہے۔ اگر آپ ہو چکے ہیں۔ میرے پیچھے تھوڑی دیر کے لیے، آپ کو اس کی عادت ڈالنی چاہیے۔ میں CSS حل تلاش کرنے کی پوری کوشش کرتا ہوں جو سب سے چھوٹے، سب سے زیادہ برقرار رکھنے کے قابل کوڈ کے ساتھ حاصل کیا جا سکتا ہے۔
میں نے لکھا مضامین کی ایک سیریز یہاں CSS-Tricks پر جہاں میں ایک ہی عنصر پر مشتمل ایک ہی HTML مارک اپ کا استعمال کرتے ہوئے مختلف ہوور اثرات تلاش کرتا ہوں۔ میں گریڈیئنٹس، ماسکنگ، کلپنگ، آؤٹ لائنز، اور یہاں تک کہ لے آؤٹ تکنیکوں پر تفصیل سے جاتا ہوں۔ میں ان کو چیک کرنے کی انتہائی سفارش کرتا ہوں کیونکہ میں اس پوسٹ میں بہت سی چالوں کو دوبارہ استعمال کروں گا۔
ایک تصویری فائل جو شفاف پس منظر کے ساتھ مربع ہے جو ہم کر رہے ہیں اس کے لیے بہترین کام کرے گی۔ اگر آپ اس کے ساتھ شروع کرنا چاہتے ہیں تو میں یہاں استعمال کر رہا ہوں۔
میں حقیقی تصاویر کا استعمال کرتے ہوئے اس کی بہت سی مثالیں دیکھنے کی امید کر رہا ہوں — لہذا جب آپ کام کر لیں تو براہ کرم اپنے حتمی نتائج کو تبصروں میں شیئر کریں تاکہ ہم ایک مجموعہ بنا سکیں!
سی ایس ایس میں کودنے سے پہلے، آئیے سب سے پہلے اثر کو الگ کرتے ہیں۔ ہوور پر تصویر بڑی ہو جاتی ہے، لہذا ہم یقینی طور پر استعمال کریں گے۔
transform: scale()اس میں. اوتار کے پیچھے ایک دائرہ ہے، اور ایک ریڈیل گریڈینٹ کو چال کرنا چاہیے۔ آخر میں، ہمیں دائرے کے نیچے ایک بارڈر بنانے کا ایک طریقہ درکار ہے جو دائرے کے پیچھے اوتار کی شکل پیدا کرے۔چلو کام کرنے کے لئے حاصل کریں!
پیمانے کا اثر
آئیے ٹرانسفارم کو شامل کرکے شروع کریں:
ابھی تک کچھ بھی پیچیدہ نہیں ہے، ٹھیک ہے؟ آئیے آگے بڑھیں۔
دائرہ
ہم نے کہا کہ پس منظر ریڈیل گریڈینٹ ہوگا۔ یہ کامل ہے کیونکہ ہم ریڈیل گریڈینٹ کے رنگوں کے درمیان سخت اسٹاپس بنا سکتے ہیں، جس سے ایسا لگتا ہے کہ ہم ٹھوس لکیروں کے ساتھ ایک دائرہ کھینچ رہے ہیں۔
سی ایس ایس متغیر کو نوٹ کریں،
--bمیں وہاں استعمال کر رہا ہوں۔ یہ "بارڈر" کی موٹائی کی نمائندگی کرتا ہے جو واقعی صرف ریڈیل گریڈینٹ کے سرخ حصے کے لیے سخت رنگ کے اسٹاپس کی وضاحت کے لیے استعمال ہو رہا ہے۔اگلا مرحلہ ہوور پر گریڈینٹ سائز کے ساتھ کھیلنا ہے۔ تصویر کے بڑھنے کے ساتھ ہی دائرے کو اپنا سائز برقرار رکھنے کی ضرورت ہے۔ چونکہ ہم درخواست دے رہے ہیں۔
scale()تبدیلی، ہمیں اصل میں ضرورت ہے کمی دائرے کا سائز کیونکہ یہ دوسری صورت میں اوتار کے ساتھ بڑھ جاتا ہے۔ لہذا، جب تصویر کی پیمائش ہوتی ہے، تو ہمیں نیچے کی پیمائش کرنے کے لیے میلان کی ضرورت ہوتی ہے۔آئیے ایک CSS متغیر کی وضاحت کرتے ہوئے شروع کریں،
--f، جو "اسکیل فیکٹر" کی وضاحت کرتا ہے، اور اسے دائرے کا سائز سیٹ کرنے کے لیے استعمال کریں۔ میں استعمال کر رہا ہوں1پہلے سے طے شدہ قدر کے طور پر، جیسا کہ اس میں تصویر اور اس دائرے کا ابتدائی پیمانہ ہے جس سے ہم تبدیل ہوتے ہیں۔چال کو واضح کرنے کے لیے یہاں ایک ڈیمو ہے۔ پردے کے پیچھے کیا ہو رہا ہے یہ دیکھنے کے لیے ہوور کریں:
میں نے تیسرا رنگ شامل کیا۔
radial-gradientہوور پر میلان کے علاقے کی بہتر شناخت کرنے کے لیے:اب ہمیں اپنے پس منظر کو دائرے کے مرکز میں رکھنا ہے اور اس بات کو یقینی بنانا ہے کہ یہ پوری اونچائی تک لے جاتا ہے۔ میں براہ راست پر ہر چیز کا اعلان کرنا پسند کرتا ہوں۔
backgroundشارٹ ہینڈ پراپرٹی، تاکہ ہم اپنی بیک گراؤنڈ پوزیشننگ کو شامل کر سکیں اور اس بات کو یقینی بنا سکیں کہ اس کے بعد ان اقدار پر ٹیک لگا کر یہ دہرایا نہ جائے۔radial-gradient():پس منظر مرکز میں رکھا گیا ہے (
50%) کے برابر چوڑائی ہے۔calc(100%/var(--f))، اور اس کی اونچائی کے برابر ہے۔100%.کچھ بھی نہیں ترازو جب
--fمساوی ہے1- دوبارہ، ہمارا ابتدائی پیمانہ۔ دریں اثنا، میلان کنٹینر کی پوری چوڑائی کو لے لیتا ہے۔ جب ہم اضافہ کرتے ہیں۔--f، عنصر کا سائز بڑھتا ہے — کا شکریہscale()تبدیلی - اور میلان کا سائز کم ہو جاتا ہے۔جب ہم ان سب کو اپنے ڈیمو پر لاگو کرتے ہیں تو ہمیں کیا ملتا ہے:
ہم قریب آ رہے ہیں! ہمارے پاس اوور فلو اثر سب سے اوپر ہے، لیکن ہمیں اب بھی تصویر کے نیچے والے حصے کو چھپانے کی ضرورت ہے، لہذا ایسا لگتا ہے کہ یہ سامنے بیٹھنے کے بجائے دائرے سے باہر نکل رہا ہے۔ یہ اس ساری چیز کا مشکل حصہ ہے اور ہم آگے کیا کرنے جا رہے ہیں۔
نیچے کی سرحد
میں نے پہلے اس سے نمٹنے کی کوشش کی۔
border-bottomپراپرٹی، لیکن میں بارڈر کے سائز کو دائرے کے سائز سے ملنے کا کوئی طریقہ تلاش کرنے سے قاصر تھا۔ یہ سب سے بہتر ہے جو مجھے مل سکتا ہے اور آپ فوری طور پر دیکھ سکتے ہیں کہ یہ غلط ہے:اصل حل استعمال کرنا ہے۔
outlineجائیداد جی ہاں،outline، نہیںborderہے. میں ایک پچھلا مضمون، میں دکھاتا ہوں کہ کیسےoutlineطاقتور ہے اور ہمیں ٹھنڈے ہوور اثرات پیدا کرنے کی اجازت دیتا ہے۔ کے ساتھ مل کرoutline-offset، ہمارے پاس بالکل وہی ہے جو ہمیں اپنے اثر کے لئے درکار ہے۔خیال یہ ہے کہ ایک سیٹ کریں۔
outlineتصویر پر اور نیچے کی سرحد بنانے کے لیے اس کے آفسیٹ کو ایڈجسٹ کریں۔ آفسیٹ اسکیلنگ فیکٹر پر اسی طرح منحصر ہوگا جس طرح گریڈینٹ سائز نے کیا تھا۔اب ہمارے پاس ہماری نچلی "بارڈر" ہے (دراصل ایک
outline) مکمل دائرہ بنانے کے لیے گریڈینٹ کے ذریعے تخلیق کردہ "بارڈر" کے ساتھ مل کر۔ ہمیں اب بھی کے کچھ حصے چھپانے کی ضرورت ہے۔outline(اوپر سے اور اطراف سے)، جسے ہم ایک لمحے میں حاصل کر لیں گے۔یہاں ہمارا اب تک کا کوڈ ہے، جس میں کچھ اور سی ایس ایس متغیرات بھی شامل ہیں جنہیں آپ تصویر کے سائز کو ترتیب دینے کے لیے استعمال کر سکتے ہیں (
--s) اور "بارڈر" رنگ (--c):چونکہ ہمیں ایک سرکلر نیچے کی سرحد کی ضرورت ہے، ہم نے ایک شامل کیا۔
border-radiusنیچے کی طرف، اجازت دیتا ہےoutlineمیلان کے گھماؤ سے ملنے کے لیے۔پر استعمال کیا جاتا حساب
outline-offsetیہ دیکھنے سے کہیں زیادہ سیدھا ہے۔ پہلے سے طے شدہ طور پر،outlineتیار کیا گیا ہے باہر عنصر کے خانے کا۔ اور ہمارے معاملے میں، ہمیں اس کی ضرورت ہے۔ اوورلیپ عنصر مزید واضح طور پر، ہمیں میلان کے ذریعہ بنائے گئے دائرے کی پیروی کرنے کی ضرورت ہے۔جب ہم عنصر کی پیمائش کرتے ہیں، تو ہمیں دائرے اور کنارے کے درمیان خلا نظر آتا ہے۔ آئیے یہ نہ بھولیں کہ اسکیل ٹرانسفارمیشن چلنے کے بعد دائرے کو ایک ہی سائز میں رکھنا ہے، جس سے ہمارے پاس وہ جگہ باقی رہ جاتی ہے جسے ہم اوپر والے اعداد و شمار میں بیان کردہ خاکہ کے آفسیٹ کی وضاحت کے لیے استعمال کریں گے۔
آئیے یہ نہ بھولیں کہ دوسرا عنصر چھوٹا ہے، لہذا ہمارا نتیجہ بھی پیمانہ ہے… جس کا مطلب ہے کہ ہمیں نتیجہ کو تقسیم کرنے کی ضرورت ہے
fحقیقی آفسیٹ ویلیو حاصل کرنے کے لیے:ہم ایک منفی نشان شامل کرتے ہیں کیونکہ ہمیں باہر سے اندر جانے کے لیے خاکہ کی ضرورت ہوتی ہے:
یہاں ایک فوری ڈیمو ہے جو ظاہر کرتا ہے کہ خاکہ کس طرح میلان کی پیروی کرتا ہے:
آپ اسے پہلے ہی دیکھ سکتے ہیں، لیکن ہمیں پھر بھی دائرے کو اوورلیپ کرنے کے لیے نیچے کی خاکہ کی ضرورت ہے بجائے اس کے کہ اس میں خون بہنے دیں۔ ہم آفسیٹ سے بارڈر کے سائز کو ہٹا کر ایسا کر سکتے ہیں:
اب ہمیں آؤٹ لائن سے اوپر والے حصے کو ہٹانے کا طریقہ تلاش کرنے کی ضرورت ہے۔ دوسرے الفاظ میں، ہم صرف تصویر کا نیچے والا حصہ چاہتے ہیں۔
outline.سب سے پہلے، آئیے سب سے اوپر کے اوورلیپ سے بچنے کے لیے پیڈنگ کے ساتھ اوپر جگہ شامل کریں:
اس ٹاپ پیڈنگ کی کوئی خاص منطق نہیں ہے۔ خیال یہ ہے کہ اس بات کو یقینی بنایا جائے کہ خاکہ اوتار کے سر کو نہ چھوئے۔ میں نے عنصر کے سائز کو اس جگہ کی وضاحت کرنے کے لیے استعمال کیا تاکہ ہمیشہ ایک ہی تناسب ہو۔
نوٹ کریں کہ میں نے شامل کیا ہے۔
content-boxکی قدرbackground:ہمیں اس کی ضرورت ہے کیونکہ ہم نے پیڈنگ شامل کی ہے اور ہم صرف پس منظر کو مواد کے خانے میں سیٹ کرنا چاہتے ہیں، لہذا ہمیں واضح طور پر پس منظر کو وہاں رکنے کے لیے بتانا چاہیے۔
مکس میں CSS ماسک شامل کرنا
ہم آخری حصے میں پہنچ گئے! ہمیں بس کچھ ٹکڑوں کو چھپانے کی ضرورت ہے، اور ہم ہو چکے ہیں۔ اس کے لیے ہم پر بھروسہ کریں گے۔
maskپراپرٹی اور یقیناً میلان۔یہاں ایک اعداد و شمار ہے جس کی وضاحت کرنے کے لیے ہمیں کیا چھپانے کی ضرورت ہے یا ہمیں زیادہ درست ہونے کے لیے کیا دکھانے کی ضرورت ہے۔
بائیں تصویر وہی ہے جو ہمارے پاس ہے، اور دائیں وہ ہے جو ہم چاہتے ہیں۔ سبز حصہ اس ماسک کی وضاحت کرتا ہے جسے حتمی نتیجہ حاصل کرنے کے لیے ہمیں اصل تصویر پر لاگو کرنا چاہیے۔
ہم اپنے ماسک کے دو حصوں کی شناخت کر سکتے ہیں:
یہاں ہمارا آخری CSS ہے:
آئیے اس کو توڑتے ہیں۔
maskجائیداد شروع کرنے والوں کے لیے، نوٹس ہے کہ اسی طرحradial-gradient()سےbackgroundجائیداد وہاں ہے. میں نے ایک نیا متغیر بنایا،--_g، چیزوں کو کم بے ترتیبی بنانے کے لئے عام حصوں کے لئے۔اگلا، وہاں ایک ہے
linear-gradient()وہاں بھی:یہ ماسک کا مستطیل حصہ بناتا ہے۔ اس کی چوڑائی ریڈیل گریڈینٹ کی چوڑائی مائنس بارڈر موٹائی کے دو گنا کے برابر ہے:
مستطیل کی اونچائی نصف کے برابر ہے،
50%، عنصر کے سائز کا۔ہمیں افقی مرکز میں خطی میلان کی بھی ضرورت ہے
50%) اور آؤٹ لائن کے آفسیٹ کے طور پر اسی قدر سے اوپر سے آفسیٹ کریں۔ میں نے ایک اور CSS متغیر بنایا،--_o، آفسیٹ کے لئے ہم نے پہلے بیان کیا تھا:یہاں مبہم چیزوں میں سے ایک یہ ہے کہ ہمیں ایک کی ضرورت ہے۔ منفی آؤٹ لائن کے لیے آفسیٹ (اسے باہر سے اندر منتقل کرنے کے لیے) لیکن a مثبت گریڈینٹ کے لیے آفسیٹ (اوپر سے نیچے کی طرف جانے کے لیے)۔ لہذا، اگر آپ سوچ رہے ہیں کہ ہم آفسیٹ کو کیوں ضرب دیتے ہیں،
--_o، کی طرف سے-1ٹھیک ہے، اب آپ جانتے ہیں!ماسک کی تدریجی ترتیب کو واضح کرنے کے لیے یہاں ایک ڈیمو ہے:
اوپر ہوور کریں اور دیکھیں کہ سب کچھ ایک ساتھ کیسے چلتا ہے۔ درمیانی باکس ماسک کی پرت کی وضاحت کرتا ہے جو دو گریڈینٹ پر مشتمل ہے۔ اسے بائیں تصویر کے مرئی حصے کے طور پر تصور کریں، اور آپ کو حتمی نتیجہ دائیں طرف ملے گا!
اپ ریپنگ
اوف، ہم نے کر لیا! اور نہ صرف ہم نے ایک سلک ہوور اینیمیشن کے ساتھ سمیٹ لیا، بلکہ ہم نے یہ سب ایک ہی ایچ ٹی ایم ایل کے ساتھ کیا۔
<img>عنصر بس اتنا ہی اور CSS کی 20 لائنوں سے بھی کم چالیں!یقینی طور پر، ہم نے اس طرح کے پیچیدہ اثر تک پہنچنے کے لیے کچھ چھوٹی چالوں اور ریاضی کے فارمولوں پر انحصار کیا۔ لیکن ہم بالکل جانتے تھے کہ کیا کرنا ہے کیونکہ ہم نے ان ٹکڑوں کی نشاندہی کی جن کی ہمیں سامنے کی ضرورت تھی۔
اگر ہم خود کو مزید ایچ ٹی ایم ایل کی اجازت دیتے تو کیا ہم سی ایس ایس کو آسان بنا سکتے تھے؟ بالکل۔ لیکن ہم یہاں CSS کی نئی ترکیبیں سیکھنے کے لیے موجود ہیں! سی ایس ایس گریڈینٹ، ماسکنگ، کو دریافت کرنے کے لیے یہ ایک اچھی مشق تھی۔
outlineجائیداد کا رویہ، تبدیلیاں، اور بہت کچھ۔ اگر آپ کسی بھی وقت کھوئے ہوئے محسوس کرتے ہیں، تو ضرور دیکھیں میری سیریز جو ایک ہی عام تصورات کا استعمال کرتا ہے۔ یہ کبھی کبھی مزید مثالوں کو دیکھنے میں مدد کرتا ہے اور ایک پوائنٹ کو گھر چلانے کے لیے کیسز کا استعمال کرتا ہے۔میں آپ کو ایک آخری ڈیمو کے ساتھ چھوڑوں گا جو مشہور CSS ڈویلپرز کی تصاویر کا استعمال کرتا ہے۔ مجھے اپنی تصویر کے ساتھ ایک ڈیمو دکھانا نہ بھولیں تاکہ میں اسے مجموعہ میں شامل کر سکوں!
بائننس $2M جرمانہ ادا کرکے ہندوستان واپس آسکتا ہے: رپورٹ
EY نجی معاہدوں کے لیے بلاکچین ٹول کی شروعات کرتا ہے۔
بیئر مارکیٹ آؤٹ لک سے متصادم ایکسچینجز پر بٹ کوائن کی واپسی کے حجم میں اضافہ - ZyCrypto تجزیہ - CryptoInfoNet
چیلنجنگ مارکیٹ کے باوجود ٹاپ ایسپورٹس ٹیمیں کیسے پروان چڑھیں۔
EOS قیمت کا تجزیہ: $0.85 سے نیچے خطرے میں اضافہ | لائیو بٹ کوائن نیوز
LINK قیمت آنکھوں کی بازیابی اگر یہ ایک اہم سطح کو برقرار رکھنے کے قابل ہے۔
Bitcoin آدھی امید پرستی کو معاشی حقائق سے چیلنجوں کا سامنا ہے: گولڈمین سیکس
بٹ کوائن مائنر اسٹاک میں کمی آدھی ہونے سے پہلے، کان کن پر امید رہتے ہیں۔
AI ٹوکنز نے بٹ کوائن کو شکست دی - کرپٹو مارکیٹ کا نیا پسندیدہ - ڈیلی ہوڈل
خطرناک Ethereum ($ETH) لیوریج پلے میں کرپٹو وہیل نے 4.5 ملین ڈالر کھو دیے