কাস্টম কার্সর কী?

কাস্টম কার্সর হল একটি ব্যবহারকারী-সংজ্ঞায়িত মাউস পয়েন্টার যা ব্রাউজারের ডিফল্ট তীর বা পয়েন্টার আইকনকে প্রতিস্থাপন করে। ওয়েবসাইট এবং অ্যাপ্লিকেশনগুলি ব্র্যান্ডিং শক্তিশালী করতে, গেম বা সৃজনশীল অভিজ্ঞতায় নিমজ্জন উন্নত করতে বা সহজভাবে একটি ইন্টারফেসে অনন্য ভিজ্যুয়াল স্পর্শ যোগ করতে কাস্টম কার্সর ব্যবহার করে। কাস্টম কার্সরগুলি সাধারণত CSS-এ cursor প্রপার্টি ব্যবহার করে সংজ্ঞায়িত করা হয় যেখানে url() মান একটি ইমেজ ফাইল যেমন .cur, .png বা .svg-এর দিকে নির্দেশ করে।

ওয়েব ব্রাউজারগুলি নেটিভভাবে বেশ কয়েকটি কার্সর ফাইল ফরম্যাট সমর্থন করে। .cur ফরম্যাট হল ক্লাসিক Windows কার্সর ফরম্যাট, .ani অ্যানিমেশন সমর্থন যোগ করে, যখন .png এবং .svg আধুনিক, রেজোলিউশন-স্বাধীন বিকল্প অফার করে যা সমস্ত প্ল্যাটফর্মে কাজ করে।

টুল বর্ণনা

কাস্টম কার্সর টেস্টার আপনাকে যেকোনো কার্সর ফাইল আপলোড করতে এবং তাৎক্ষণিকভাবে এটি ব্রাউজারে কীভাবে দেখায় এবং কাজ করে তা প্রিভিউ করতে দেয়। একবার আপলোড হলে, আপনার কার্সর একটি ডেডিকেটেড টেস্ট এরিয়ার মধ্যে ডিফল্ট পয়েন্টারকে প্রতিস্থাপন করে — একটি চেকারবোর্ড ভিউপোর্ট একটি বাটন সহ — যাতে আপনি একটি একক লাইন CSS লেখা ছাড়াই মুক্ত-স্থান আন্দোলন এবং হোভার আচরণ উভয়ই মূল্যায়ন করতে পারেন।

সমর্থিত ফরম্যাট

ফরম্যাট বর্ণনা
.cur Windows কার্সর ফরম্যাট, ব্যাপকভাবে সমর্থিত
.ani অ্যানিমেটেড Windows কার্সর
.png রাস্টার ইমেজ, উচ্চ-মানের কার্সরের জন্য আদর্শ
.svg স্কেলেবল ভেক্টর ইমেজ, যেকোনো আকারে তীক্ষ্ণ
.ico Windows আইকন ফরম্যাট, কার্সর হিসেবেও ব্যবহারযোগ্য

বৈশিষ্ট্য

  • তাৎক্ষণিক প্রিভিউ: ফাইল আপলোড হওয়ার সাথে সাথে কার্সর লাইভ প্রয়োগ করা হয় — কোনো পৃষ্ঠা পুনরায় লোড করার প্রয়োজন নেই
  • ইন্টারঅ্যাক্টিভ টেস্ট এরিয়া: চেকারবোর্ড ভিউপোর্ট একটি নিরপেক্ষ পটভূমিতে কার্সর দেখায় স্পষ্ট দৃশ্যমানতার জন্য
  • বাটন টেস্ট টার্গেট: টেস্ট এরিয়ার মধ্যে একটি বাটন আপনাকে ইন্টারঅ্যাক্টিভ উপাদানগুলিতে কার্সর আচরণ যাচাই করতে দেয়
  • সামঞ্জস্যপূর্ণ কার্সর উত্তরাধিকার: বাটন কাস্টম কার্সর উত্তরাধিকার করে বরং ব্রাউজার ডিফল্টে ফিরে যায় না
  • শুধুমাত্র ক্লায়েন্ট-সাইড: ফাইলগুলি সরাসরি ব্রাউজারে পড়া হয় এবং কখনও কোনো সার্ভারে আপলোড করা হয় না

ব্যবহারের ক্ষেত্র

  • কার্সর ডিজাইনার: নতুন তৈরি .cur বা .png কার্সর ফাইল কীভাবে দেখায় তা যাচাই করুন এটি শিপ করার আগে
  • ওয়েব ডেভেলপার: CSS-এ cursor: url(...) প্রপার্টি দিয়ে একীভূত করার আগে দ্রুত একটি কার্সর সম্পদ পরীক্ষা করুন
  • গেম এবং সৃজনশীল ডেভেলপার: ইন্টারঅ্যাক্টিভ UI প্রসঙ্গে কাস্টম পয়েন্টারের অনুভূতি এবং দৃশ্যমানতা পরীক্ষা করুন

এটি কীভাবে কাজ করে

যখন আপনি একটি ফাইল আপলোড করেন, টুল ব্রাউজারের URL.createObjectURL() API ব্যবহার করে এটির জন্য একটি অবজেক্ট URL তৈরি করে এবং এটিকে টেস্ট এরিয়ায় CSS cursor স্টাইল হিসেবে ইনজেক্ট করে। এটি একটি স্টাইলশীটে cursor: url(your-file.cur), auto লেখার সমতুল্য। ফলব্যাক auto নিশ্চিত করে যে ব্রাউজার তার ডিফল্ট কার্সর ব্যবহার করে যদি ফাইল লোড বা পার্স করা না যায়।

টিপস

  • .png কার্সরের জন্য, ব্রাউজার ডিফল্টরূপে উপরের-বাম কোণ (0 0) কে হটস্পট হিসেবে ব্যবহার করে। যদি আপনার কার্সরের সক্রিয় পয়েন্ট অন্য কোথাও থাকা উচিত (যেমন একটি পেন্সিলের টিপ), আপনি পরীক্ষার পরে আপনার CSS-এ এটি সামঞ্জস্য করতে পারেন।
  • অ্যানিমেটেড .ani কার্সরগুলি স্বয়ংক্রিয়ভাবে ব্রাউজারে চলে যা সেগুলিকে সমর্থন করে (প্রাথমিকভাবে Chromium-ভিত্তিক)।
  • SVG কার্সরগুলি অবশ্যই ছোট হতে হবে (সাধারণত 128×128 px এর নিচে) বেশিরভাগ ব্রাউজারে কার্সর হিসেবে সঠিকভাবে রেন্ডার করতে।