ٹھنڈے سی ایس ایس ہوور اثرات جو بیک گراؤنڈ کلپنگ، ماسک اور 3D استعمال کرتے ہیں۔

اب ہم سی ایس ایس ہوور اثرات کے دلچسپ طریقوں کے بارے میں پوسٹس کی ایک سیریز سے گزر چکے ہیں۔ ہم نے ایک کے ساتھ شروع کیا۔ سی ایس ایس استعمال کرنے والی مثالوں کا ایک گروپ background خصوصیات، پھر پر منتقل کر دیا گیا text-shadow جائیداد جہاں ہم نے تکنیکی طور پر کوئی سائے استعمال نہیں کیا۔. ہم نے انہیں CSS متغیرات کے ساتھ بھی ملایا اور calc() کوڈ کو بہتر بنانے اور اسے منظم کرنا آسان بنانے کے لیے۔

اس مضمون میں، ہم ان دو مضامین کو مزید پیچیدہ CSS ہوور اینیمیشن بنانے کے لیے تیار کریں گے۔ ہم بیک گراؤنڈ کلپنگ، CSS ماسک، اور یہاں تک کہ 3D تناظر کے ساتھ اپنے پیروں کو گیلا کرنے کے بارے میں بات کر رہے ہیں۔ دوسرے لفظوں میں، ہم اس بار جدید تکنیکوں کو تلاش کرنے جا رہے ہیں اور اس حد کو آگے بڑھانے جا رہے ہیں کہ CSS ہوور اثرات کے ساتھ کیا کر سکتا ہے!

---

یہاں صرف ایک ذائقہ ہے جو ہم بنا رہے ہیں:

ہوور اثرات کا استعمال کرتے ہوئے background-clip

آؤ اس کے بارے میں بات کریں background-clip. یہ سی ایس ایس پراپرٹی ایک کو قبول کرتی ہے۔ text مطلوبہ الفاظ کی قدر جو ہمیں پر گریڈینٹ لاگو کرنے کی اجازت دیتا ہے۔ متن اصل کے بجائے ایک عنصر کا پس منظر.

لہذا، مثال کے طور پر، ہم ہوور پر متن کا رنگ تبدیل کر سکتے ہیں جیسا کہ ہم استعمال کریں گے۔ color پراپرٹی، لیکن اس طرح ہم رنگ کی تبدیلی کو متحرک کرتے ہیں:

میں نے جو کچھ کیا وہ شامل تھا۔ background-clip: text عنصر اور transition la background-position. اس سے زیادہ پیچیدہ ہونے کی ضرورت نہیں ہے!

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

اس مثال میں، میں دو مختلف میلان اور دو قدروں کے ساتھ استعمال کرتا ہوں۔ background-clip. پہلے پس منظر کے میلان کو متن پر تراش دیا گیا ہے (بشکریہ text قدر) ہوور پر رنگ سیٹ کرنے کے لیے، جبکہ دوسرا پس منظر کا میلان نیچے انڈر لائن بناتا ہے (بشکریہ padding-box قدر). باقی سب کچھ سیدھے اوپر سے کاپی کیا گیا ہے۔ کام جو ہم نے پہلے مضمون میں کیا تھا۔ اس سیریز کا

ہوور اثر کے بارے میں کیا خیال ہے جہاں بار اوپر سے نیچے کی طرف اس طرح سلائیڈ ہوتا ہے کہ ایسا لگتا ہے کہ متن کو اسکین کیا گیا ہے، پھر اس میں رنگین کیا گیا ہے:

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

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

آئیے استعمال کرتے ہوئے ایک اور ہوور اثر کی طرف چلتے ہیں۔ background-clip:

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

لیکن ہم یہاں اعلی درجے کے ہوور اثرات کو دیکھنے کے لئے ہیں، ٹھیک ہے؟ آئیے اسے تھوڑا سا تبدیل کریں تاکہ جب ماؤس کرسر عنصر کو چھوڑ دے تو اینیمیشن مختلف ہو۔ ایک ہی ہوور اثر، لیکن حرکت پذیری کا ایک مختلف اختتام:

ٹھنڈا ہے نا؟ آئیے کوڈ کو الگ کریں:

.hover { --c: #1095c1; /* the color */ color: #0000; background: linear-gradient(90deg, #fff 50%, var(--c) 0) calc(100% - var(--_p, 0%)) / 200%, linear-gradient(var(--c) 0 0) 0% 100% / var(--_p, 0%) no-repeat, var(--_c, #0000); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; transition: 0s, color .5s, background-color .5s;
}
.hover:hover { color: #fff; --_c: var(--c); --_p: 100%; transition: 0.5s, color 0s .5s, background-color 0s .5s;
}

ہمارے پاس تین پس منظر کی پرتیں ہیں - دو میلان اور background-color کا استعمال کرتے ہوئے کی تعریف کی --_c متغیر جو ابتدائی طور پر شفاف پر سیٹ کیا جاتا ہے (#0000)۔ ہور پر، ہم رنگ کو سفید اور --_c اہم رنگ میں متغیر (--c).

یہاں اس پر کیا ہو رہا ہے۔ transition: سب سے پہلے، ہم ہر چیز پر منتقلی کا اطلاق کرتے ہیں لیکن ہم اس میں تاخیر کرتے ہیں۔ color اور background-color by 0.5s سلائڈنگ اثر پیدا کرنے کے لئے. اس کے فورا بعد، ہم تبدیل کرتے ہیں color اور background-color. ہو سکتا ہے آپ کو کوئی بصری تبدیلی نظر نہ آئے کیونکہ متن پہلے ہی سفید ہے (پہلے میلان کی بدولت) اور پس منظر پہلے سے ہی مرکزی رنگ پر سیٹ ہے (دوسرے میلان کی بدولت)۔

پھر، ماؤس آؤٹ پر، ہم ہر چیز میں فوری تبدیلی کا اطلاق کرتے ہیں (نوٹ کریں 0s تاخیر) کے علاوہ color اور background-color جس میں منتقلی ہوتی ہے۔ اس کا مطلب ہے کہ ہم تمام گریڈیئنٹس کو ان کی ابتدائی حالتوں میں واپس رکھتے ہیں۔ ایک بار پھر، آپ کو شاید کوئی بصری تبدیلی نظر نہیں آئے گی کیونکہ متن color اور background-color ہوور پر پہلے سے ہی بدل گیا ہے۔

آخر میں، ہم رنگ اور a پر دھندلاہٹ کا اطلاق کرتے ہیں۔ background-color حرکت پذیری کا ماؤس آؤٹ حصہ بنانے کے لیے۔ میں جانتا ہوں، یہ سمجھنا مشکل ہوسکتا ہے لیکن آپ مختلف رنگوں کا استعمال کرکے اس چال کو بہتر انداز میں دیکھ سکتے ہیں:

اوپر کئی بار ہوور کریں اور آپ کو وہ خصوصیات نظر آئیں گی جو ہوور پر متحرک ہو رہی ہیں اور جو ماؤس آؤٹ پر متحرک ہیں۔ پھر آپ سمجھ سکتے ہیں کہ ہم ایک ہی ہور اثر کے لیے دو مختلف اینیمیشن تک کیسے پہنچے۔

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

.hover { --c: 16 149 193; /* the color using the RGB format */ color: rgb(255 255 255 / var(--_i, 0)); background: /* Gradient #1 */ linear-gradient(90deg, #fff 50%, rgb(var(--c)) 0) calc(100% - var(--_i, 0) * 100%) / 200%, /* Gradient #2 */ linear-gradient(rgb(var(--c)) 0 0) 0% 100% / calc(var(--_i, 0) * 100%) no-repeat, /* Background Color */ rgb(var(--c)/ var(--_i, 0)); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; --_t: calc(var(--_i,0)*.5s); transition: var(--_t), color calc(.5s - var(--_t)) var(--_t), background-color calc(.5s - var(--_t)) var(--_t);
}
.hover:hover { --_i: 1;
}

اگر آپ سوچ رہے ہیں کہ میں بنیادی رنگ کے لیے RGB نحو تک کیوں پہنچا، تو اس کی وجہ یہ ہے کہ مجھے الفا شفافیت کے ساتھ کھیلنے کی ضرورت تھی۔ میں متغیر بھی استعمال کر رہا ہوں۔ --_t میں استعمال ہونے والے بے کار حساب کتاب کو کم کرنے کے لیے transition جائیداد.

اس سے پہلے کہ ہم اگلے حصے پر جائیں یہاں ہوور اثرات کی مزید مثالیں ہیں جو میں نے تھوڑی دیر پہلے کی تھیں جن پر بھروسہ کیا گیا تھا۔ background-clip. ہر ایک کی تفصیل بتانا بہت لمبا ہوگا لیکن جو کچھ ہم نے اب تک سیکھا ہے اس سے آپ آسانی سے کوڈ کو سمجھ سکتے ہیں۔ کوڈ کو دیکھے بغیر ان میں سے کچھ کو اکیلے آزمانا ایک اچھی تحریک ہو سکتی ہے۔

میں جانتا ہوں میں جانتا ہوں. یہ پاگل اور غیر معمولی ہوور اثرات ہیں اور مجھے احساس ہے کہ زیادہ تر حالات میں یہ بہت زیادہ ہیں۔ لیکن سی ایس ایس کی مشق اور سیکھنے کا طریقہ یہ ہے۔ یاد رکھیں، ہم حدود کو آگے بڑھانا سی ایس ایس ہوور اثرات کا۔ ہوور اثر ایک نیا پن ہو سکتا ہے، لیکن ہم راستے میں نئی ​​تکنیکیں سیکھ رہے ہیں جو یقینی طور پر دوسری چیزوں کے لیے استعمال کی جا سکتی ہیں۔

سی ایس ایس کا استعمال کرتے ہوئے ہوور اثرات mask

کیا لگتا ہے؟ سی ایس ایس mask پراپرٹی گریڈینٹ کو اسی طرح استعمال کرتی ہے۔ background پراپرٹی کرتا ہے، لہذا آپ دیکھیں گے کہ ہم آگے کیا کر رہے ہیں وہ بالکل سیدھا ہے۔

آئیے ایک فینسی انڈر لائن بنا کر شروع کریں۔

میں استعمال کر رہا ہوں background اس ڈیمو میں زگ زگ نیچے بارڈر بنانے کے لیے۔ اگر میں اس انڈر لائن پر اینی میشن لگانا چاہتا ہوں تو صرف بیک گراؤنڈ پراپرٹیز کا استعمال کرتے ہوئے اسے کرنا مشکل ہوگا۔

سی ایس ایس درج کریں۔ mask.

کوڈ عجیب لگ سکتا ہے لیکن منطق اب بھی وہی ہے جیسا کہ ہم نے پچھلے تمام بیک گراؤنڈ اینیمیشن کے ساتھ کیا تھا۔ دی mask دو گریڈینٹ پر مشتمل ہے۔ پہلے میلان کی وضاحت ایک مبہم رنگ کے ساتھ کی گئی ہے جو مواد کے علاقے کا احاطہ کرتا ہے (بشکریہ content-box قدر). وہ پہلا میلان متن کو مرئی بناتا ہے اور نیچے کی زگ زگ بارڈر کو چھپاتا ہے۔ content-box ہے mask-clip قدر جو اسی طرح برتاؤ کرتی ہے۔ background-clip

linear-gradient(#000 0 0) content-box

دوسرا میلان پورے علاقے کا احاطہ کرے گا (بشکریہ padding-box)۔ اس کی ایک چوڑائی ہے جس کی وضاحت کا استعمال کرتے ہوئے کی گئی ہے۔ --_p متغیر، اور اسے عنصر کے بائیں جانب رکھا جائے گا۔

linear-gradient(#000 0 0) 0 / var(--_p, 0%) padding-box

اب، ہمیں بس کی قدر کو تبدیل کرنا ہے۔ --_p دوسرے گریڈینٹ کے لیے سلائیڈنگ اثر بنانے اور انڈر لائن کو ظاہر کرنے کے لیے ہوور پر۔

.hover:hover { --_p: 100%; color: var(--c);
}

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

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

اس ڈیمو میں ہر ایک مثال کے لیے قدرے مختلف تدریجی ترتیب کا استعمال کرتی ہے۔ mask. بیک گراؤنڈ کنفیگریشن اور ماسک کنفیگریشن کے درمیان کوڈ میں علیحدگی پر بھی غور کریں۔ انہیں آزادانہ طور پر منظم اور برقرار رکھا جا سکتا ہے۔

آئیے اس کی بجائے zig-zag انڈر لائن کو لہراتی انڈر لائن سے بدل کر پس منظر کی ترتیب کو تبدیل کریں:

ہور اثرات کا ایک اور مجموعہ! میں نے تمام ماسک کنفیگریشن رکھے اور ایک مختلف شکل بنانے کے لیے پس منظر کو تبدیل کیا۔ اب، آپ سمجھ سکتے ہیں کہ میں کیسے قابل تھا 400 ہوور اثرات تک پہنچنے کے لیے چھدم عناصر کے بغیر — اور ہمارے پاس اب بھی زیادہ ہو سکتا ہے!

جیسے، کیوں نہیں کچھ اس طرح:

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

3D میں ہوور اثرات

آپ کو لگتا ہے کہ کسی ایک عنصر کے ساتھ 3D اثر بنانا ناممکن ہے (اور سیوڈو عناصر کا سہارا لیے بغیر!) لیکن CSS کے پاس ایسا کرنے کا ایک طریقہ ہے۔

جو آپ وہاں دیکھ رہے ہیں وہ حقیقی 3D اثر نہیں ہے، بلکہ 3D اسپیس میں 2D کا ایک کامل بھرم ہے جو CSS کو یکجا کرتا ہے۔ background, clip-path، اور transform خواص.

پہلی چیز جو ہم کرتے ہیں وہ یہ ہے کہ ہم اپنے متغیرات کی وضاحت کریں:

--c: #1095c1; /* color */
--b: .1em; /* border length */
--d: 20px; /* cube depth */

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

--_s: calc(var(--d) + var(--b));
color: var(--c);
border: solid #0000; /* fourth value sets the color's alpha */
border-width: var(--b) var(--b) var(--_s) var(--_s);

عنصر کے اوپر اور دائیں طرف دونوں کو برابر کرنے کی ضرورت ہے۔ --b قدر جب کہ نیچے اور بائیں جانب کا مجموعہ کے برابر ہونا ضروری ہے۔ --b اور --d (جو ہے --_s متغیر)۔

چال کے دوسرے حصے کے لیے، ہمیں ایک میلان کی وضاحت کرنے کی ضرورت ہے جو ان تمام سرحدی علاقوں کا احاطہ کرتا ہے جن کی ہم نے پہلے وضاحت کی تھی۔ اے conic-gradient اس کے لیے کام کریں گے:

background: conic-gradient( at left var(--_s) bottom var(--_s), #0000 90deg,var(--c) 0 ) 0 100% / calc(100% - var(--b)) calc(100% - var(--b)) border-box;

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

conic-gradient( at left var(--d) bottom var(--d), #0000 90deg, rgb(255 255 255 / 0.3) 0 225deg, rgb(255 255 255 / 0.6) 0
) border-box

آخری مرحلہ لاگو کرنا ہے۔ CSS clip-path اس لمبے سائے کے احساس کے لیے کونوں کو کاٹنا:

clip-path: polygon( 0% var(--d), var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, 0% 100%
)

بس! ہم نے صرف ایک 3D مستطیل بنایا ہے جس میں دو گریڈینٹ اور a کے سوا کچھ نہیں۔ clip-path جسے ہم CSS متغیرات کا استعمال کرتے ہوئے آسانی سے ایڈجسٹ کر سکتے ہیں۔ اب، ہمیں بس اسے متحرک کرنا ہے!

پچھلی شکل سے نقاط کو دیکھیں (سرخ رنگ میں اشارہ کیا گیا ہے)۔ آئیے انیمیشن بنانے کے لیے ان کو اپ ڈیٹ کریں:

clip-path: polygon( 0% var(--d), /* reverses var(--d) 0% */ var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, /* reverses 100% calc(100% - var(--d)) */ 0% 100% /* reverses var(--d) calc(100% - var(--d)) */
)

چال یہ ہے کہ عنصر کے نیچے اور بائیں حصوں کو چھپایا جائے تاکہ جو کچھ بچا ہو وہ ایک مستطیل عنصر ہو جس میں کوئی گہرائی نہ ہو۔

یہ قلم الگ تھلگ کرتا ہے۔ clip-path حرکت پذیری کا حصہ یہ دیکھنے کے لیے کہ یہ کیا کر رہا ہے:

حتمی ٹچ عنصر کو استعمال کرتے ہوئے مخالف سمت میں منتقل کرنا ہے۔ translate - اور وہم کامل ہے! مختلف گہرائیوں کے لیے مختلف حسب ضرورت پراپرٹی ویلیوز کا استعمال کرنے کا اثر یہ ہے:

دوسرا ہوور اثر اسی ساخت کی پیروی کرتا ہے۔ میں نے صرف یہ کیا کہ اوپری دائیں کی بجائے اوپر بائیں حرکت پیدا کرنے کے لیے چند اقدار کو اپ ڈیٹ کرنا ہے۔

امتزاج اثرات!

ہم نے جس چیز کا احاطہ کیا ہے اس کے بارے میں حیرت انگیز بات یہ ہے کہ وہ سب ایک دوسرے کی تکمیل کرتے ہیں۔ یہاں ایک مثال ہے جہاں میں شامل کر رہا ہوں۔ la text-shadow دوسرے مضمون سے اثر کے سلسلے میں background پہلے مضمون سے حرکت پذیری کی تکنیک 3D چال کا استعمال کرتے ہوئے ہم نے ابھی احاطہ کیا:

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

مجھے اس مضمون کو آخری ہوور اثر کے ساتھ ختم کرنے دیں جہاں میں پس منظر، کلپ پاتھ، اور ایک ڈیش کو یکجا کر رہا ہوں۔ perspective ایک اور 3D اثر نقل کرنے کے لیے:

میں نے اسی اثر کو تصاویر پر لاگو کیا اور نتیجہ ایک عنصر کے ساتھ 3D کی نقل کرنے کے لئے کافی اچھا تھا:

آخری ڈیمو کیسے کام کرتا ہے اس پر گہری نظر چاہتے ہیں؟ میں نے اس پر کچھ لکھا۔

اپ ریپنگ

اوف، ہم ہو چکے ہیں! میں جانتا ہوں، یہ بہت مشکل سی ایس ایس ہے لیکن (1) ہم اس قسم کی چیز کے لیے صحیح ویب سائٹ پر ہیں، اور (2) مقصد یہ ہے کہ سی ایس ایس کی مختلف خصوصیات کے بارے میں ہماری سمجھ کو نئی سطحوں تک پہنچانا ان کے ساتھ بات چیت کرنے کی اجازت دے کر ایک دوسرے.

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

---

ٹھنڈے سی ایس ایس ہوور اثرات جو بیک گراؤنڈ کلپنگ، ماسک اور 3D استعمال کرتے ہیں۔ اصل میں شائع ہوا سی ایس ایس - ٹیکنیکس. تمہیں چاہئے نیوز لیٹر حاصل کریں.

• سکے سمارٹ۔ یورپ کا بہترین بٹ کوائن اور کرپٹو ایکسچینج۔
• پلیٹو بلاک چین۔ Web3 Metaverse انٹیلی جنس۔ علم میں اضافہ۔ مفت رسائی۔
• کرپٹو ہاک۔ Altcoin ریڈار. مفت جانچ.
• ماخذ: https://css-tricks.com/css-hover-effects-background-masks-3d/