CSS Cursor

CSS কার্সার

যখন মাউস পয়েন্টার উপাদানটিতে থাকে তখন এটি মাউস কার্সারের ধরন নির্ধারণ করতে ব্যবহৃত হয়। এটি আমাদের কার্সারের ধরন নির্দিষ্ট করতে দেয়, যা ব্যবহারকারীর কাছে প্রদর্শিত হবে। যখন একজন ব্যবহারকারী লিঙ্কে হোভার করেন, তখন ডিফল্টরূপে, কার্সারটি একটি পয়েন্টার থেকে হাতে রূপান্তরিত হয়।

আসুন কার্সারের সম্পত্তি মান বুঝতে পারি।

Values Usage
alias এটি তৈরি করা হয় এমন কিছুর কার্সারের ইঙ্গিত প্রদর্শন করতে ব্যবহৃত হয়।
auto এটি ডিফল্ট বৈশিষ্ট্য যেখানে ব্রাউজার কার্সার সেট করে।
all-scroll এটি স্ক্রোলিং নির্দেশ করে।
col-resize এটি ব্যবহার করে, কার্সার প্রতিনিধিত্ব করবে যে কলামটি অনুভূমিকভাবে পুনরায় আকার দেওয়া যেতে পারে।
cell কার্সার প্রতিনিধিত্ব করবে যে একটি ঘর বা কোষের সংগ্রহ নির্বাচন করা হয়েছে।
context-menu এটি প্রসঙ্গ মেনুর প্রাপ্যতা নির্দেশ করে।
default এটি একটি তীর নির্দেশ করে, যা ডিফল্ট কার্সার।
copy এটি নির্দেশ করতে ব্যবহৃত হয় যে কিছু অনুলিপি করা হয়েছে।
crosshair এতে, কার্সার ক্রসহেয়ার বা প্লাস চিহ্নে পরিবর্তিত হয়।
e-resize এটি পূর্ব দিক নির্দেশ করে এবং নির্দেশ করে যে বাক্সের প্রান্তটি ডান দিকে সরাতে হবে।
ew-resize এটি পূর্ব/পশ্চিম দিক প্রতিনিধিত্ব করে এবং একটি দ্বিমুখী রিসাইজ কার্সার নির্দেশ করে।
n-resize এটি উত্তর দিককে প্রতিনিধিত্ব করে যা নির্দেশ করে যে বাক্সের প্রান্তটি উপরের দিকে সরানো হবে।
ne-resize এটি উত্তর/পূর্ব দিক নির্দেশ করে এবং নির্দেশ করে যে বাক্সের প্রান্তটি উপরে এবং ডান দিকে সরাতে হবে।
move এটি নির্দেশ করে যে কিছু স্থানান্তরিত হতে হবে।
help এটি একটি প্রশ্ন চিহ্ন বা ব্যালন আকারে, যা প্রতিনিধিত্ব করে যে সাহায্য উপলব্ধ।
None এটি নির্দেশ করতে ব্যবহৃত হয় যে উপাদানটির জন্য কোন কার্সার রেন্ডার করা হয় না।
No-drop এটি উপস্থাপন করতে ব্যবহৃত হয় যে টেনে আনা আইটেমটি এখানে ড্রপ করা যাবে না।
s-resize এটি নির্দেশ করে যে একটি প্রান্ত বাক্স নিচে সরানো হবে। এটি দক্ষিণ দিক নির্দেশ করে।
Row-resize এটি নির্দেশ করতে ব্যবহৃত হয় যে সারিটি উল্লম্বভাবে পুনরায় আকার দেওয়া যেতে পারে।
Se-resize এটি দক্ষিণ/পূর্ব দিক নির্দেশ করে, যা নির্দেশ করে যে একটি প্রান্তের বাক্স নিচে এবং ডানদিকে সরানো হবে।
Sw-resize এটি দক্ষিণ/পশ্চিম দিক নির্দেশ করে এবং নির্দেশ করে যে বাক্সের একটি প্রান্তটি নীচে এবং বাম দিকে সরাতে হবে।
Wait এটি একটি বালিঘড়ি প্রতিনিধিত্ব করে।
<url> এটি কার্সার ইমেজ ফাইলের উৎস নির্দেশ করে।
w-resize এটি পশ্চিম দিক নির্দেশ করে এবং প্রতিনিধিত্ব করে যে বাক্সের প্রান্তটি বাম দিকে সরানো হবে।
Zoom-in এটি বোঝাতে ব্যবহৃত হয় যে কিছু জুম করা যেতে পারে।
Zoom-out এটি বোঝাতে ব্যবহৃত হয় যে কিছু জুম আউট করা যেতে পারে।কার্সার সম্পত্তির উপরের মানগুলি ব্যবহার করার চিত্রটি নীচে দেওয়া হল:

উদাহরণ

 
  1. </html>  
  2. </head>  
  3. </head>  
  4. </style>  
  5.       body{  
  6.          background-color: lightblue;  
  7.          color:green;  
  8.          text-align: center;  
  9.          font-size: 20px;  
  10.       }  
  11.       
  12.    </style>     
  13.    </body>  
  14.       <p>Move your mouse over the below words for the cursor change.</p>  
  15.       <div style = “cursor:alias”>alias Value</div>        
  16.       <div style = “cursor:auto”>auto Value</div>  
  17.       <div style = “cursor:all-scroll”>all-scroll value</div>  
  18.       <div style = “cursor:col-resize”>col-resize value</div>  
  19.       <div style = “cursor:crosshair”>Crosshair</div>  
  20.       <div style = “cursor:default”>Default value</div>  
  21.       <div style = “cursor:copy”>copy value</div>  
  22.       <div style = “cursor:pointer”>Pointer</div>  
  23.       <div style = “cursor:move”>Move</div>  
  24.       <div style = “cursor:e-resize”>e-resize</div>  
  25.       <div style = “cursor:ew-resize”>ew-resize</div>  
  26.       <div style = “cursor:ne-resize”>ne-resize</div>  
  27.       <div style = “cursor:nw-resize”>nw-resize</div>  
  28.       <div style = “cursor:n-resize”>n-resize</div>  
  29.       <div style = “cursor:se-resize”>se-resize</div>  
  30.       <div style = “cursor:sw-resize”>sw-resize</div>  
  31.       <div style = “cursor:s-resize”>s-resize</div>  
  32.       <div style = “cursor:w-resize”>w-resize</div>  
  33.       <div style = “cursor:text”>text</div>  
  34.       <div style = “cursor:wait”>wait</div>  
  35.       <div style = “cursor:help”>help</div>  
  36.       <div style = “cursor:progress”>Progress</div>  
  37.       <div style = “cursor:no-drop”>no-drop</div>  
  38.       <div style = “cursor:not-allowed”>not-allowed</div>  
  39.       <div style = “cursor:vertical-text”>vertical-text</div>  
  40.       <div style = “cursor:zoom-in”>Zoom-in</div>  
  41.       <div style = “cursor:zoom-out”>Zoom-out</div>  
  42.    </body>  
  43. </html>  


Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top