کرسر اسکرین پر اس پوزیشن کی نشاندہی کرتا ہے جہاں صارف کلک کر سکتا ہے یا ٹیکسٹ داخل کر سکتا ہے۔ ویب سائٹ کے مختلف اجزاء کے لیے مختلف کرسر استعمال کیے جا سکتے ہیں۔ ایک ڈویلپر کو یقینی بنانا چاہیے کہ ایپلی کیشن میں استعمال ہونے والے کرسر پرکشش ہونے چاہئیں۔ مثال کے طور پر، ماؤس ہوور پر بٹن پر ایک اشارہ کرنے والا ہاتھ کا کرسر استعمال کیا جا سکتا ہے۔ ٹیکسٹ باکس میں ٹیکسٹ (پلک جھپکنے والی لائن) اشارے کا استعمال کیا جاتا ہے جہاں ٹیکسٹ درج کیا جانا ہے۔
CSS میں کرسر کے کئی اسٹائل ہیں جو صرف کرسر پراپرٹی کی قدر بتا کر استعمال کیے جاتے ہیں۔ تاہم، ایک ڈویلپر CSS کا استعمال کرتے ہوئے اپنی مرضی کے مطابق کرسر بنا سکتا ہے۔
یہ مطالعہ گائیڈ فراہم کرے گا:
-
- CSS کرسر
- حسب ضرورت کرسر CSS
موضوع سے ٹکرانے سے پہلے، آئیے عملی مثال کے ساتھ کچھ CSS کرسر کی شکلیں دیکھتے ہیں۔
CSS کرسر
سی ایس ایس ' کرسر پراپرٹی کی مختلف قدریں ہوتی ہیں، جیسے پوائنٹر، کوئی نہیں، ترقی، اور بہت کچھ۔ آئیے ایک ٹیبل بنائیں جس میں قطاریں ہوں جن پر ماؤس ہور پر مختلف کرسر دکھائے جائیں گے۔
مثال: HTML میں مختلف CSS کرسر کی نمائندگی کرنے والا ٹیبل بنانا
سب سے پہلے، HTML میں
| ٹیگز کو استعمال کرکے بیان کیے گئے ہیں۔ دیگر | |||
|---|---|---|---|
ٹیگ ہوتے ہیں۔
| ٹیگ ان بٹن عناصر کی نمائندگی کرتا ہے جو CSS کے ساتھ لاگو ہوتے ہیں۔ کرسر 'مختلف اقدار کے ساتھ پراپرٹی۔
| مندرجہ بالا منظر نامے کے لیے HTML کوڈ ذیل میں دیا گیا ہے: < ٹیبل >< tr > < ویں انداز = 'چوڑائی: 200px؛' > سی ایس ایس کرسر سلیکٹر ویں > < ویں انداز = 'چوڑائی: 200px؛' > کرسر سٹائل ویں > tr > < tr > < td > cursor: پوائنٹر td > < td >< بٹن انداز = 'کرسر: پوائنٹر؛' > پوائنٹر بٹن >> td > tr > < tr > < td > cursor: ترقی td > < td >< بٹن انداز = 'کرسر: ترقی؛' > ترقی بٹن >> td > tr > < tr > < td > کرسر: اجازت نہیں ہے۔ td > < td >< بٹن انداز = 'کرسر: اجازت نہیں ہے۔' > اجازت نہیں ہے بٹن >> td > tr > < tr > < td > کرسر: کوئی نہیں۔ td > < td >< بٹن انداز = 'کرسر: کوئی نہیں؛' > کوئی نہیں بٹن >> td > tr > < tr > < td > cursor : حرکت کرنا td > < td >< بٹن انداز = 'کرسر: منتقل؛' > اقدام بٹن >> td > tr > < tr > < td > cursor : پکڑنا td > < td >< بٹن انداز = 'کرسر: پکڑو؛' > پکڑو بٹن >> td > tr > < tr > < td > cursor: کاپی td > < td >< بٹن انداز = 'کرسر: کاپی؛' > کاپی بٹن >> td > tr > < tr > < td > cursor: col-resize td > < td >< بٹن انداز = 'کرسر: col-resize;' > col-resize بٹن >> td > tr > < tr > < td > کرسر: قطار کا سائز تبدیل کریں۔ td > < td >< بٹن انداز = 'کرسر: قطار کا سائز تبدیل کریں؛' > قطار کا سائز تبدیل کریں۔ بٹن >> td > tr > < tr > < td > کرسر: متن td > < td >< بٹن انداز = 'کرسر: متن؛' > متن بٹن >> td > tr > ٹیبل > اسٹائل 'تمام' عناصر * {بھرتی: 0 ; مارجن: 0 ; فونٹ فیملی: ایریل، ہیلویٹیکا، سینز سیرف؛ }
اسٹائل 'ٹیبل' عنصر ٹیبل {مارجن: 0px آٹو؛ بارڈر: 1px ٹھوس گینسبورو؛ }
' مارجن 'پراپرٹی برتاؤ کرتی ہے جیسا کہ اوپر بیان کیا گیا ہے۔ اسٹائل 'ٹی ڈی' عنصر td {متن کی سیدھ: مرکز؛ } عنصر پراپرٹی کے ساتھ لاگو ہوتا ہے ' متن سیدھ 'قیمت کے ساتھ' مرکز ' یہ کالم کے متن کو مرکز میں ترتیب دے گا۔
| اسٹائل 'بٹن' عنصر بٹن {پس منظر کا رنگ: کیڈٹ بلیو؛ پیڈنگ: 10px 10px؛ رنگ: #ffffff; چوڑائی: 150px؛ }
مندرجہ بالا کوڈ مندرجہ ذیل نتیجہ پیدا کرے گا: حسب ضرورت کرسر CSSڈویلپرز کو اپنی ایپلی کیشنز کے لیے مناسب کرسر استعمال کرنا چاہیے۔ صارفین کی توجہ حاصل کرنے کے لیے کرسر کو پرکشش بنایا جانا چاہیے۔ مزید یہ کہ اس مقصد کے لیے کسٹم کرسر بنایا جا سکتا ہے۔ نیچے دی گئی مثال کو دیکھو! مثال: سی ایس ایس کے ساتھ کسٹم کرسر کیسے بنائیں؟ HTML میں، دو div عناصر شامل کریں۔ کلاس کے ساتھ ایک ' دائرہ 'اور دوسرا کلاس کے ساتھ' نقطہ ' ایچ ٹی ایم ایل < div کلاس = 'دائرہ' >> div >< div کلاس = 'نقطہ' >> div > اسٹائل 'جسم' عنصر جسم {اونچائی: 100vh؛ } طرز 'حلقہ' div .دائرہ {چوڑائی: 20px؛ اونچائی: 20px؛ بارڈر: 2px ٹھوس سفید؛ سرحدی رداس: پچاس % ; }
انداز 'پوائنٹ' div پوائنٹ {چوڑائی: 5px؛ اونچائی: 5px؛ پس منظر کا رنگ: سفید؛ سرحدی رداس: پچاس % ; }
دیا گیا کوڈ ویب صفحہ پر درج ذیل کرسر کو ظاہر کرے گا۔ جاوا اسکرپٹ < سکرپٹ >const cursorCircle = document.querySelector ( '.دائرہ' ) ; const cursorPoint = document.querySelector ( '.point' ) ; const moveCursor = ( اور ) = > { const mouseY = e.clientY؛ const mouseX = e.clientX؛ cursorCircle.style.transform = ` ترجمہ ( ${mouseX} px، ${mouseY} px ) ` ; cursorPoint.style.transform = ` ترجمہ ( ${mouseX} px، ${mouseY} px ) ` ; } window.addEventListener ( 'mousemove' , moveCursor ) سکرپٹ >
مندرجہ بالا کوڈ بلاکس فراہم کرنے کے بعد، کرسر خود بخود اسکرین پر چلا جائے گا جیسا کہ ذیل میں دکھایا گیا ہے: نتیجہسی ایس ایس ' کرسر پراپرٹی کی متعدد اقدار ہیں جو مختلف کرسر طرزوں کی نشاندہی کرتی ہیں۔ تاہم، HTML عناصر اور CSS خصوصیات کو استعمال کرکے، ہم اپنی مرضی کے مطابق کرسر بنا سکتے ہیں۔ پھر، JavaScript کوڈ کو اس کی فعالیت کو چالو کرنے کے لیے لاگو کیا جاتا ہے۔ اس مطالعہ نے عملی مثال کے ساتھ اپنی مرضی کے مطابق CSS کرسر بنانے کا طریقہ دکھایا ہے۔ |
