সিএসএস কার্সর | চলুন দেখে আসি এর সব প্রপার্টি আর ব্যবহারবিধি

কেমন আছেন আপনারা সবাই? ব্যক্তিগত কিছু সমস্যার কারনে অনেক দিন টেকটিউন্স এ কিছু লেখা হয় নি। আজ অনেক দিন পর বসলাম কিছু বলতে। কি নিয়ে লিখব তা বুঝে উঠতে অনেক সময় লেগে গেল। যাই হোক, আজ ওয়েব ডিজাইন এর অন্যতম অঙ্গ সিএসএস তথা Cascading Style Sheet এর একটি ছোট্ট জিনিস নিয়ে কথা বলব। আর তা হল সিএসএস কার্সর প্রপার্টি। নিজে প্রোফেসনাল ওয়েব-ডিজাইনার না হলেও আমার মতে সিএসএস কার্সর এর সঠিক ব্যবহার একটি ওয়েব-সাইট কে সম্পূর্ণ নতুন রূপ দিতে পারে।

মূল আলোচনায় যাওয়ার আগে ওয়েব-ডিজাইন এর বর্তমান পরিস্থিতি নিয়ে কিছু বলি। যুগ এর সাথে তাল মিলিয়ে ওয়েব-ডিজাইন এর সংজ্ঞা পরিবর্তন হবে আর সেই সাথে তার মূল উদ্দেশ্যও পরিবর্তিত হবে – এতো জানা কথা। কিন্তু গত কয়েক বছর ধরে এই পরিবর্তনের গতি কেন যেন খুব বেশি। আগে ভাল ডিজাইন মানেই ছিল উজ্জ্বল রঙ, প্রচুর ফ্লাশ এর ব্যবহার। আর এখন হল যতটুকু সম্ভব কম element ব্যবহার করে হালকা রঙে “White-Space” এর যথার্থ ব্যবহার। আগে ওয়েব animation মানেই ছিল ফ্লাশ। আর এখন সিএসএস৩ আর এইচটিএমএল৫ ই এই সব animation এর জায়গায়।

ইতিহাস থাক, সিএসএস কার্সর নিয়ে আমার আগ্রহের কারণ টা একটু বলি। ৩-৪ সপ্তাহ আগে আমি আমার ব্লগ রি-ডিজাইন করার প্ল্যান করি। প্ল্যান মোতাবেক ডিজাইন ও সম্পূর্ণ করি কিছু দিন আগে। এর পর হটাত মনে হল, এই জায়গা কেমন যেন লাগেছে, এই জিনিস টা মানাচ্ছে না। সমাধান এর জন্য আমি রঙ পরিবর্তন করলাম, সিএসএস৩ animation দিলাম – তাও ভাল লাগে না। অবশেষে আমি কার্সর পরিবর্তন করার সাথে সাথেই দেখি অবাক ব্যপার, জিনিসটা এখন মানিয়ে যাচ্ছে। এর পর থেকে আমি সিএসএস কার্সর এর সব প্রপার্টি খুজতে থাকি। এই হল মোটামুটি কথা।

তো কিভাবে ব্যবহার করবেন এই সিএসএস কার্সর? চলুন সিএসএস এর মাধ্যমেই টা দেখা যাক।


#Cursor {
        width : 300px;
        height : 150px;
        color : black;
        cursor : help;
}

উপরের script এ cursor : help এই অংশ টুকুই সব কিছু করবে। সিএসএস কার্সর এর সর্বমোট ৩২ টি value পেয়েছি আমি। এর মধ্যে ১৮ টি সিএসএস২ আর ১৪ টি সিএসএস৩। নিচে একটি লিস্ট দেওয়া হল।

ডেমো

  1. Cursor:Alias
  2. Cursor:All-Scroll
  3. Cursor:Progress
  4. Cursor:Cell
  5. Cursor:Col-Resize
  6. Cursor:Context-Menu
  7. Cursor:Copy
  8. Cursor:CrossHair
  9. Cursor:Default
  10. Cursor:E-Resize
  11. Cursor:Ew-Resize
  12. Cursor:Help
  13. Cursor:Inherit
  14. Cursor:Move
  15. Cursor:N-Resize
  16. Cursor:Ne-Resize
  17. Cursor:Nesw-Resize
  18. Cursor-No-Drop
  19. Cursor:Pointer
  20. Cursor:Row-Resize
  21. Cursor:S-Resize
  22. Cursor:Se-Resize
  23. Cursor:Sw-Resize
  24. Cursor:Text
  25. Cursor:Vertical-Text
  26. Cursor:Wait
  27. Cursor:W-Resize
  28. Cursor:None
  29. Cursor:-Moz-Grabbing
  30. Cursor:-Moz-Zoom-In
  31. Cursor:-Moz-Zoom-Out
  32. Cursor:-Moz-Grab

শেষ চারটি কার্সর এর value দেখেছেন? –moz- prefix দিয়ে শুরু হওয়া এই চারটি কার্সর শুধু ফায়ারফক্স এর জন্য। ডেমো এখানেই দিতে চেয়েছিলাম, কিন্তু টেকটিউন্স কোন সিএসএস ব্যবহার করতে পারছি না।

কার্সর গুলো কিভাবে ব্যবহার করবেন? আগের script এর cursor : help উপরের যেকোনো কার্সর প্রপার্টি দিয়ে রিপ্লেস করুন। ব্যাস!

Level New

আমি রিয়াদ। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 7 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 20 টি টিউন ও 136 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

নিজেকে মাঝে মাঝে অপরাধী মনে হয়। যে ভাষার জন্য এত রক্তক্ষরণ টা বাদ দিয়ে আমি কিনা বিজাতীয় ইংরেজি ভাষায় ব্লগিং করছি! ছিঃ! টেকটিউনস কে ধন্যবাদ।


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

Level 0

কার্সর এর কাজ কি

Level 0

দারুন টিউন। আমি আসলে এই HTML & CSS একসাথে http://www.technobdtraining.com টেকনোবিডিতে শিখব। tt এর কিছু পোষ্ট দেখে আমার CSS শেখার লোভটা হয়। আজ আপনার পোস্ট টি পড়ে আমার লোভের ষোলোকলা পূর্ণ হল। মনে হচ্ছে এ যে এটা না শিখলেই নয়। যদিও আমি অ্যামেচার একেবারেই। কিন্তু ওখানে আমায় ব্যসিক লেভেল থেকে শুরু করে এডভান্স লেভেল পর্যন্ত শেখানো হবে। দোয়া করবেন।

কাজের পোস্ট