CSS پروگرامرز کو متحرک ویب صفحات ڈیزائن کرنے کے لیے مختلف قسم کے فریم ورک پیش کرتا ہے۔ یہ زیادہ پسند کرنے کے قابل ہے کیونکہ یہ تمام اہم خصوصیات اور اوزار ایک جگہ پر فراہم کرتا ہے۔ لہذا، آپ کو دوسرے فریم ورک استعمال کرنے کی ضرورت نہیں ہے۔ CSS میں Tailwind فریم ورک سب سے زیادہ استعمال ہوتا ہے کیونکہ یہ صارف کا ضرورت سے زیادہ CSS لکھنے کا وقت بچاتا ہے۔
یہ گائیڈ Tailwind میں ہوور، فوکس اور دیگر ریاستوں کا استعمال فراہم کرتا ہے۔
ٹیل ونڈ میں ہوور، فوکس اور دیگر ریاستوں کا استعمال کیسے کریں؟
ویب صفحات کو ڈیزائن کرتے وقت، صارفین کے ساتھ تعامل برقرار رکھنے کے لیے متحرک اور پرکشش عناصر کو شامل کرنا ضروری ہے۔ Tailwind میں موجود خصوصیات کو اضافی حسب ضرورت CSS لکھے بغیر انٹرایکٹو اور متحرک صفحات بنانے کے لیے استعمال کیا جا سکتا ہے۔ کچھ خصوصیات 'ہوور'، 'فوکس' اور 'ایکٹو' ہیں جو ڈیزائن میں کشش پیدا کرنے میں مدد کرتی ہیں۔
HTML میں ہوور ویرینٹ کا استعمال
ہوور پراپرٹی کو HTML عنصر کو اسٹائل کرنے کے لیے استعمال کیا جاتا ہے جب صارف ماؤس کرسر کو کسی مخصوص عنصر پر منتقل کرتا ہے۔ یہ ایک ہموار تجربہ پیش کرنے میں مدد کرتا ہے۔
مرحلہ 1: HTML میں 'ہور' پراپرٹی کا اطلاق کریں۔
ایک HTML فائل بنائیں اور ہوور پراپرٹی کو کوڈ میں کچھ عنصر پر لاگو کریں۔ ایک خیال حاصل کرنے کے لیے ذیل میں دیے گئے کوڈ پر ایک نظر ڈالیں:
< جسم >
< div کلاس = 'مرکز' >
< بٹن کلاس = 'bg-green-500 hover:bg-blue-500 متن-سفید فونٹ-بولڈ گول' >
مجھے ہوور!
< / بٹن >
< / div >
< / جسم >
اس کوڈ میں:
- ایک بٹن جس کا نام ' مجھے ہوور! بٹن ٹیگ کے ذریعہ بنایا گیا ہے۔
- ' bg-green-500 بٹن کے پس منظر کا رنگ سبز پر سیٹ کرتا ہے۔
- ' ہوور: bg-blue-500 ” بٹن کا رنگ سبز سے نیلے میں تبدیل ہو جاتا ہے جب ماؤس اس پر منتقل ہوتا ہے۔
- بٹن میں موجود متن کا رنگ سفید ہے ' متن سفید 'اور' فونٹ بولڈ ” فونٹ کو بولڈ کرتا ہے۔
- بٹن کی شکل گول پر سیٹ کی گئی ہے ' گول '
مرحلہ 2: آؤٹ پٹ کا جائزہ لیں۔
مندرجہ بالا کوڈ پر عمل کرنے کے بعد، حتمی نقطہ نظر اس طرح لگتا ہے:
یہ دیکھا جا سکتا ہے کہ جب ماؤس کرسر کو اس پر منتقل کیا جاتا ہے تو بٹن رنگ بدلتا ہے۔
HTML میں فوکس ویرینٹ کا استعمال
فوکس پراپرٹی کا استعمال HTML عناصر کو اسٹائل کرنے کے لیے کیا جاتا ہے جیسے کہ جب صارف عنصر پر کلک کرتا ہے تو اسے صارف کی توجہ حاصل کرنے کے لیے نمایاں کیا جاتا ہے۔
مرحلہ 1: HTML کوڈ میں فوکس پراپرٹی کا اطلاق کریں۔
ایک HTML فائل بنائیں اور فوکس پراپرٹی کو کسی مطلوبہ عنصر پر لاگو کریں۔ ایک تاثر حاصل کرنے کے لیے نیچے دیے گئے کوڈ پر غور کریں:
< div >
< / div >
< / جسم >
اس کوڈ میں:
- ' فلیکس کلاس ایک فلیکس بناتی ہے۔
- ' جواز فراہم کرنے والا مرکز ” مرکز میں مواد کی سیدھ کو جواز بناتا ہے۔
- ' اشیاء کا مرکز کلاس اشیاء کو اسکرین کے بیچ میں ایڈجسٹ کرتی ہے۔
- ' ایچ اسکرین ویو پورٹ کے مطابق اسکرین کا سائز سیٹ کرتا ہے۔
- ' bg-blue-200 ” پس منظر کا رنگ نیلے پر سیٹ کرتا ہے۔
- ٹائپ ٹیکسٹ کا ایک ان پٹ باکس بنایا گیا ہے۔
- ' فوکس: bg-green-300 ” صارف کی طرف سے کلک کرنے پر ان پٹ باکس کا رنگ سبز کر دیتا ہے۔
- ' w-64 ” چوڑائی کو 64px پر سیٹ کرتا ہے۔
- ' h-10 اونچائی کو 10px پر سیٹ کرتا ہے۔
- ' px-4 ” اوپر اور بائیں جانب 4px کی پیڈنگ شامل کرتا ہے۔
- ' py-2 ” اوپر اور نیچے 2px کی پیڈنگ شامل کرتا ہے۔
مرحلہ 2: فوکس پراپرٹی کا جائزہ لیں۔
ایچ ٹی ایم ایل کوڈ کو محفوظ کریں اور اس کا بنایا ہوا ویب صفحہ کھولیں۔ پھر کرسر کو ان پٹ باکس پر منتقل کریں اور اس پر کلک کریں اور نیچے کی تبدیلی واقع ہو جائے گی۔
HTML میں ایکٹو ویرینٹ کا استعمال کرنا
یہ خاصیت اس حالت کے لیے عناصر کو اسٹائل کرنے کے لیے استعمال کی جاتی ہے جب صارف متحرک طور پر عنصر پر ٹیپ کرتا ہے۔ فعال حالت کرسر کے ایکٹیویشن مرحلے اور اس کی جاری ہونے والی حالت سے وقت کی مدت ہے۔
نحو
فعال: { جائیداد }مخصوص CSS پراپرٹی منتخب عنصر پر لاگو ہوتی ہے۔
مرحلہ 1: HTML کوڈ میں ایکٹو ویرینٹ کا اطلاق کریں۔
ایک HTML فائل بنائیں اور ایکٹیو پراپرٹی کو کسی ایسے عنصر پر لگائیں جو نیچے کی صورت میں بٹن ہے۔
< div کلاس = 'فلیکس جواز-مرکز اشیاء-مرکز ایچ-اسکرین' >
< بٹن کلاس = 'bg-green-600 p-4 rounded-md ٹرانزیشن-ٹرانسفارم کا دورانیہ-400 ٹرانسفارم فعال: اسکیل-110' >
مجھے کلک کیجیے!
< / بٹن >
< / div >
< / جسم >
اس کوڈ میں:
- ' bg-green-600 ” پس منظر کا رنگ سبز پر سیٹ کرتا ہے۔
- ' p-4 ” 4px کی پیڈنگ شامل کرتا ہے۔
- ' rounded-md ” بٹن کی شکل کو گول بنا دیتا ہے۔
- ' منتقلی - تبدیلی بٹن کو ایک چھوٹے سے وقت کے لیے تبدیل کرنے کے لیے استعمال کیا جاتا ہے جسے ' دورانیہ-400 تبدیلی '
- ' فعال: پیمانے-110 بٹن کو بڑے سائز میں تبدیل کرتا ہے۔
مرحلہ 2: آؤٹ پٹ کا جائزہ لیں۔
مندرجہ بالا کوڈ کو ایچ ٹی ایم ایل فائل میں محفوظ کریں اور اس کے ذریعے بنائے گئے ویب پیج کا جائزہ لیں۔ ویب صفحہ اس طرح نظر آئے گا:
یہ دیکھا جا سکتا ہے کہ بٹن کا سائز بڑھ جاتا ہے جب ماؤس اسے پکڑتا ہے اور جیسے ہی اسے چھوڑا جاتا ہے وہ اپنی ابتدائی حالت میں واپس آجاتا ہے۔
نتیجہ
ٹیل وِنڈ میں ہوور، فوکس اور دیگر ریاستوں کو استعمال کرنے کے لیے، پہلے سے طے شدہ اسٹیٹ کلاسز جیسے 'ہور' کا استعمال کریں اور اس پر کچھ اسٹائلنگ خصوصیات لگائیں جیسے رنگ بدلنا، فوکس رنگ بنانا، وغیرہ۔ ڈسپلے کی افادیت کو توسیع پذیر آؤٹ پٹ پیش کرنے کے لیے استعمال کیا جاتا ہے۔ اس تحریر نے ٹیل ونڈ میں ہوور، فوکس اور دیگر ریاستوں کو استعمال کرنے کا طریقہ دکھایا ہے۔