কাস্টম CSS কার্সার

Kastama Css Karsara



কার্সারটি স্ক্রিনের অবস্থান নির্দেশ করে যেখানে ব্যবহারকারী ক্লিক করতে বা পাঠ্য লিখতে পারে। বিভিন্ন ওয়েবসাইটের উপাদানের জন্য বিভিন্ন কার্সার ব্যবহার করা যেতে পারে। একজন বিকাশকারীকে অবশ্যই নিশ্চিত করতে হবে যে অ্যাপ্লিকেশনটিতে ব্যবহৃত কার্সারগুলি অবশ্যই আকর্ষণীয় হতে হবে। উদাহরণস্বরূপ, মাউস হোভারের বোতামে একটি নির্দেশকারী হ্যান্ড কার্সার ব্যবহার করা যেতে পারে। টেক্সট (ব্লিঙ্কিং লাইন) নির্দেশক টেক্সট বক্সে ব্যবহার করা হয় যেখানে টেক্সট লিখতে হবে।

CSS-এ কার্সার প্রপার্টির মান উল্লেখ করে ব্যবহার করা হয়েছে বেশ কয়েকটি কার্সার শৈলী। যাইহোক, একজন বিকাশকারী CSS ব্যবহার করে একটি কাস্টমাইজড কার্সার তৈরি করতে পারে।





এই গবেষণা নির্দেশিকা প্রদান করবে:



    • CSS কার্সার
    • কাস্টম কার্সার CSS

টপিকের সাথে বাম্পিং করার আগে, আসুন একটি ব্যবহারিক উদাহরণ সহ কিছু CSS কার্সার আকার দেখি।



CSS কার্সার

সিএসএস ' কার্সার ' সম্পত্তির বিভিন্ন মান আছে, যেমন একটি পয়েন্টার, কিছুই নয়, অগ্রগতি এবং আরও অনেক কিছু। আসুন একটি টেবিল তৈরি করি যাতে সারি রয়েছে যার উপর মাউস হোভারে বিভিন্ন কার্সার প্রদর্শিত হবে।



উদাহরণ: HTML-এ বিভিন্ন CSS কার্সারের প্রতিনিধিত্ব করে একটি টেবিল তৈরি করা

প্রথমে HTML এ

এলিমেন্ট যোগ করুন। এই উপাদানের ভিতরে:



    • সারি তৈরি করতে
ট্যাগ ব্যবহার করা হবে।
  • প্রথম সারিতে শিরোনাম রয়েছে।
  • এই শিরোনামগুলি
    • ট্যাগগুলিতে দুটি
    ট্যাগ ব্যবহার করে নির্দিষ্ট করা হয়েছে। অন্যান্য
    ট্যাগ থাকে যা ডেটা সহ কলামগুলি পূরণ করতে পারে।
  • দ্বিতীয়
    		• ট্যাগটি বোতাম উপাদানগুলির প্রতিনিধিত্ব করে যা একটি CSS এর সাথে প্রয়োগ করা হয় “ কার্সার ” বিভিন্ন মান সহ সম্পত্তি।

    উপরের দৃশ্যের জন্য HTML কোড নীচে দেওয়া হল:

    < টেবিল >
    < tr >
    < ম শৈলী = 'প্রস্থ: 200px;' > css কার্সার নির্বাচক ম >
    < ম শৈলী = 'প্রস্থ: 200px;' > কার্সার শৈলী ম >
    tr >
    < tr >
    < td > কার্সার: পয়েন্টার td >
    < td < বোতাম শৈলী = 'কারসার: পয়েন্টার;' > নির্দেশক বোতাম >> td >
    tr >
    < tr >
    < td > কার্সার: অগ্রগতি td >
    < td < বোতাম শৈলী = 'কারসার: অগ্রগতি;' > অগ্রগতি বোতাম >> td >
    tr >
    < tr >
    < td > কার্সার: অনুমোদিত নয় td >
    < td < বোতাম শৈলী = 'কারসার: অনুমোদিত নয়;' > অনুমতি নেই বোতাম >> td >
    tr >
    < tr >
    < td > কার্সার: কোনোটিই নয় td >
    < td < বোতাম শৈলী = 'কারসার: কোনোটিই নয়;' > কোনটি বোতাম >> td >
    tr >
    < tr >
    < td > কার্সার: সরান td >
    < td < বোতাম শৈলী = 'কারসার: সরানো;' > সরানো বোতাম >> td >
    tr >
    < tr >
    < td > কার্সার: দখল td >
    < td < বোতাম শৈলী = 'কারসার: দখল;' > দখল বোতাম >> td >
    tr >
    < tr >
    < td > কার্সার: কপি td >
    < td < বোতাম শৈলী = 'কারসার: কপি;' > অনুলিপি বোতাম >> td >
    tr >
    < tr >
    < td > কার্সার: col-resize td >
    < td < বোতাম শৈলী = 'কারসার: কোল-রিসাইজ;' > col-resize বোতাম >> td >
    tr >
    < tr >
    < td > কার্সার: সারি-রিসাইজ td >
    < td < বোতাম শৈলী = 'কার্সার: সারি-রিসাইজ;' > সারি-রিসাইজ বোতাম >> td >
    tr >
    < tr >
    < td > কার্সার: পাঠ্য td >
    < td < বোতাম শৈলী = 'কারসার: পাঠ্য;' > পাঠ্য বোতাম >> td >
    tr >
    টেবিল >


    উপরের কোডটি নিম্নলিখিত ফলাফল তৈরি করবে:


    পরবর্তী বিভাগে, আমরা HTML উপাদানগুলিতে বিভিন্ন শৈলী প্রয়োগ করব।

    স্টাইল 'সমস্ত' উপাদান

    * {
    প্যাডিং: 0 ;
    মার্জিন: 0 ;
    font-family: Arial, Helvetica, sans-serif;
    }


    সমস্ত HTML উপাদান CSS শৈলীর সাথে প্রয়োগ করা হয় যা নীচে ব্যাখ্যা করা হয়েছে:

      • ' প্যাডিং 'সহ সম্পত্তি' 0 ” মান উপাদানের বিষয়বস্তুর চারপাশে কোন স্থান অন্তর্ভুক্ত করে না।
      • ' মার্জিন 'সহ সম্পত্তি' 0 ” মান প্রতিটি উপাদানের বাইরে কোনো স্থান যোগ করে না।
      • ' ফন্ট-পরিবার 'সম্পত্তি একটি মান বরাদ্দ করা হয়' Arial, Helvetica, sans-serif ” প্রথম শৈলী ব্রাউজার দ্বারা সমর্থিত না হলে তা নিশ্চিত করার জন্য ফন্ট শৈলীর তালিকা দেওয়া হয়েছে, অন্যান্য শৈলী অবশ্যই প্রয়োগ করা উচিত।

    স্টাইল 'টেবিল' উপাদান

    টেবিল {
    মার্জিন: 0px অটো;
    সীমানা: 1px কঠিন গেইনসবোরো;
    }


    HTML টেবিল উপাদানটি CSS বৈশিষ্ট্যগুলির সাথে প্রয়োগ করা হয় যা নীচে বর্ণিত হয়েছে:

      • ' সীমান্ত 'প্রপার্টি মান দিয়ে সেট করা হয়' 1px কঠিন গেইনসবোরো ” যা যথাক্রমে সীমানা প্রস্থ, সীমানা শৈলী এবং সীমানা রঙ প্রতিনিধিত্ব করে।

    ' মার্জিন ” সম্পত্তি উপরে উল্লিখিত হিসাবে আচরণ করে।

    স্টাইল 'td' উপাদান

    td {
    টেক্সট-সারিবদ্ধ: কেন্দ্র;
    }


    		উপাদানটি প্রপার্টির সাথে প্রয়োগ করা হয় “ পাঠ্য-সারিবদ্ধ 'মান সহ' কেন্দ্র ” এটি কলামের পাঠ্যকে কেন্দ্রে সারিবদ্ধ করবে।

    স্টাইল 'বোতাম' উপাদান

    বোতাম {
    ব্যাকগ্রাউন্ড-রঙ: ক্যাডেটব্লু;
    প্যাডিং: 10px 10px;
    রঙ: #ffffff;
    প্রস্থ: 150px;
    }


    উপরের HTML কোডে ব্যবহৃত বোতাম উপাদানটি নতুন CSS বৈশিষ্ট্যগুলির সাথে স্টাইল করা হয়েছে যা নীচে ব্যাখ্যা করা হয়েছে:

      • ' পেছনের রঙ ” উপাদানটির পটভূমিতে রঙ নির্দিষ্ট করে।
      • ' প্যাডিং ' হিসাবে বরাদ্দ করা মান সহ 10px 10px ” উপাদানের আইটেমগুলির বাম-ডান দিকে উপরে-নীচে 10px এবং 10px স্থান যোগ করে।
      • ' রঙ ” উপাদানের ফন্টের রঙ সামঞ্জস্য করে।
      • ' প্রস্থ ” হল সেই সম্পত্তি যা উপাদানের প্রস্থ সামঞ্জস্য করে।

    উপরের কোডটি নিম্নলিখিত ফলাফল তৈরি করবে:


    এখন পর্যন্ত, আমরা CSS দ্বারা সরবরাহ করা কার্সারগুলি নিয়ে আলোচনা করেছি। আসন্ন বিভাগে, উদাহরণটি বর্ণনা করবে কিভাবে CSS দিয়ে একটি কাস্টম কার্সার তৈরি করা যায়।

    কাস্টম কার্সার CSS

    ডেভেলপারদের অবশ্যই তাদের অ্যাপ্লিকেশনের জন্য উপযুক্ত কার্সার ব্যবহার করতে হবে। ব্যবহারকারীদের দৃষ্টি আকর্ষণ করার জন্য কার্সারগুলিকে আকর্ষণীয় করে তুলতে হবে। তাছাড়া, এই উদ্দেশ্যে কাস্টম কার্সার তৈরি করা যেতে পারে।

    নীচের উদাহরণ তাকান!

    উদাহরণ: কিভাবে CSS দিয়ে কাস্টম কার্সার তৈরি করবেন?

    HTML এ, দুটি div উপাদান যোগ করুন। ক্লাসের সাথে একজন ' বৃত্ত 'এবং অন্যটি ক্লাসের সাথে' বিন্দু ”

    এইচটিএমএল

    < div ক্লাস = 'বৃত্ত' >> div >
    < div ক্লাস = 'বিন্দু' >> div >


    চলুন CSS বিভাগের দিকে এগিয়ে যাই।

    স্টাইল 'শরীর' উপাদান

    শরীর {
    উচ্চতা: 100vh;
    }


    HTML ফাইলের বডি এলিমেন্ট স্টাইল দিয়ে প্রয়োগ করা হয় “ উচ্চতা উপাদানের উচ্চতা নির্ধারণের জন্য সম্পত্তি।

    শৈলী 'বৃত্ত' ডিভ

    .বৃত্ত {
    প্রস্থ: 20px;
    উচ্চতা: 20px;
    সীমানা: 2px কঠিন সাদা;
    সীমানা-ব্যাসার্ধ: পঞ্চাশ % ;
    }


    নিচে CSS বৈশিষ্ট্যগুলির ব্যাখ্যা দেওয়া হল যা div এলিমেন্টে প্রয়োগ করা হয় ক্লাস “ বৃত্ত ”:

      • ' প্রস্থ ' সম্পত্তি উপাদানের প্রস্থ সামঞ্জস্য করে।
      • ' সীমান্ত ' হিসাবে উল্লেখ করা মান সহ সম্পত্তি ' 2px কঠিন সাদা ” সীমানা প্রস্থ, সীমানা শৈলী, এবং রঙ প্রতিনিধিত্ব করে।
      • ' সীমানা-ব্যাসার্ধ ' সম্পত্তি উপাদানটির সীমানা বৃত্তাকার পরিবর্তন করে।

    শৈলী 'বিন্দু' div

    .পয়েন্ট {
    প্রস্থ: 5px;
    উচ্চতা: 5px;
    ব্যাকগ্রাউন্ড-রঙ: সাদা;
    সীমানা-ব্যাসার্ধ: পঞ্চাশ % ;
    }


    ক্লাস পয়েন্ট সহ div উপাদানটি বিভিন্ন বৈশিষ্ট্য সহ সরবরাহ করা হয়েছে যা নীচে বর্ণিত হয়েছে:

      • ' পেছনের রঙ ' সম্পত্তি উপাদানটির পটভূমির রঙ নির্দিষ্ট করে।
      • ' সীমানা-ব্যাসার্ধ ' উপাদানের প্রান্তগুলিকে গোলাকার সেট করে৷
      • অন্যান্য বৈশিষ্ট্য আলোচনা হিসাবে একই কাজ করবে.

    প্রদত্ত কোডটি ওয়েব পৃষ্ঠায় নিম্নলিখিত কার্সারটি প্রদর্শন করবে:


    আমরা HTML এবং CSS ব্যবহার করে কার্সার তৈরি করেছি। এখন, পরবর্তী বিভাগে, কার্সারে প্রয়োজনীয় কার্যকারিতা যোগ করার জন্য জাভাস্ক্রিপ্ট কোড লেখা হয়েছে।

    জাভাস্ক্রিপ্ট

    < লিপি >
    const cursorCircle = document.querySelector ( '.বৃত্ত' ) ;
    const cursorPoint = document.querySelector ( '. পয়েন্ট' ) ;
    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 ( 'মাউসমুভ' , মুভ কার্সার )
    লিপি >


    উপরের জাভাস্ক্রিপ্ট কোডের বিবরণ নীচে দেওয়া হল:

      • ' ট্যাগের সাথে পেয়ার করা হয়, যা জাভাস্ক্রিপ্ট কোড লিখতে ব্যবহৃত হয়।
      • ' const ” কীওয়ার্ড সনাক্ত করে যে একটি পরিবর্তনশীল দ্বারা অনুসরণ করা const কীওয়ার্ড পুনরায় বরাদ্দ করা যাবে না।
      • ' document.querySelector('.circle') ” নথিতে নির্দিষ্ট নির্বাচকের সাথে মেলে সার্কেল ডিভ এলিমেন্ট প্রদান করে।
      • ' document.querySelector('.point') ” নথিতে নির্দিষ্ট নির্বাচকের সাথে মেলে এমন পয়েন্ট ডিভ উপাদান প্রদান করে।
      • ' const moveCursor = (e) => ” এই ফাংশনটি কার্সার ফাংশন নির্দিষ্ট করে।
      • ' e.clientY ” যখন মাউস ইভেন্টটি ট্রিগার করা হয়েছিল তখন উল্লম্ব স্থানাঙ্ক প্রদান করে।
      • ' e.clientX ” যখন মাউস ইভেন্টটি ট্রিগার হয় তখন অনুভূমিক স্থানাঙ্ক প্রদান করে।
      • ' cursorCircle.style.transform ” সার্কেল ডিভ স্টাইল ট্রান্সফর্মের সাথে প্রয়োগ করা হয়।
      • ' cursorPoint.style.transform ” পয়েন্ট ডিভটি স্টাইল ট্রান্সফর্মের সাথে প্রয়োগ করা হয়।
      • ' অনুবাদ(${mouseX}px, ${mouseY}px) ” রূপান্তর সম্পত্তির মান অনুভূমিক এবং উল্লম্ব স্থানাঙ্ক সেট করে।
      • ' window.addEventListener ('মাউস', মুভ কার্সার) ইভেন্ট লিসেনার মেথড মাউস মুভমেন্ট শুনবে। এটি গ্লোবাল উইন্ডো অবজেক্টের অংশ।

    উপরের কোড ব্লকগুলি প্রদান করার পরে, কার্সারটি স্বয়ংক্রিয়ভাবে নীচে দেখানো হিসাবে স্ক্রিনে চলে যাবে:


    চমৎকার! আমরা বিভিন্ন CSS বৈশিষ্ট্য সহ একটি কাস্টম কার্সার তৈরি করেছি।

    উপসংহার

    সিএসএস ' কার্সার ” সম্পত্তির অসংখ্য মান রয়েছে যা বিভিন্ন কার্সার শৈলী নির্দেশ করে। যাইহোক, HTML উপাদান এবং CSS বৈশিষ্ট্যগুলি ব্যবহার করে, আমরা কাস্টমাইজড কার্সার তৈরি করতে পারি। তারপরে, জাভাস্ক্রিপ্ট কোড এর কার্যকারিতা সক্রিয় করতে প্রয়োগ করা হয়। এই গবেষণায় দেখানো হয়েছে কিভাবে একটি বাস্তব উদাহরণ সহ কাস্টম CSS কার্সার তৈরি করা যায়।

    অন্যান্য

    বিভাগ

    জনপ্রিয় পোস্ট

    সিএসএস ব্যবহার করে হোভারে কার্সারকে কীভাবে চিত্রে পরিবর্তন করবেন

    কীভাবে ভিমে মাউস সেট এবং অক্ষম করবেন

    টার্মিনালের মাধ্যমে রাস্পবেরিতে Wi-Fi নিষ্ক্রিয় করার 4 টি উপায়

    কীভাবে একটি ডিসকর্ড ওয়েলকাম অভিজ্ঞতা তৈরি করবেন

    রোবলক্স পেট সিমুলেটর এক্স-এ ট্রাভেলিং মার্চেন্ট কোথায়?

    জাভাস্ক্রিপ্টে ক্লাসের নাম কীভাবে পাবেন

    কীভাবে একটি এলিয়েনওয়্যার ল্যাপটপে একটি স্ক্রিনশট নেওয়া যায়

    MATLAB এ Pi কিভাবে ব্যবহার করবেন

    MongoDB বাছাই ক্যোয়ারী ফলাফল

    কিভাবে MATLAB এ অক্ষ পরিবর্তন করবেন

    জাভাস্ক্রিপ্ট এবং এইচটিএমএল ব্যবহার করে কিভাবে সহজ ছবি আপলোড করবেন

    C-তে Fstat ফাংশন

    PowerShell এ CSV ফাইলের সাথে কিভাবে কাজ করবেন

    মাইনক্রাফ্টে টর্চফ্লাওয়ার এবং পিচার প্ল্যান্ট কীভাবে সন্ধান করবেন

    টেইলউইন্ডে কীভাবে 'সারিবদ্ধ-আইটেম' ইউটিলিটিগুলিতে হোভার প্রয়োগ করবেন?

    কোথায় ব্যবহার করবেন (জেনারিক টাইপ সীমাবদ্ধতা)

    কিভাবে জাভাস্ক্রিপ্ট দিয়ে একটি HTML এলিমেন্টের ক্লাস পরিবর্তন করবেন?

    কিভাবে নোড মডিউল থেকে ডিফল্ট package.json তৈরি করবেন?

    উইন্ডোজ 7 আপনাকে লগনের পটভূমির চিত্র - উইনহেল্পনলাইন পরিবর্তন করতে দেয়

    স্ট্রিং এর ওরাকল দৈর্ঘ্য