বর্ডার নিয়ে কিছু কথা- প্রথম পর্ব (css border: part-1)

ভূমিকা

CSS এর এমন অনেক প্রোপার্টি আছে, যেগুলো কয়েকটি প্রোপার্টির সংক্ষিপ্ত রূপ। অর্থাৎ কয়েকটি প্রোপার্টির ভ্যালুকে একত্রে একটি প্রোপার্টির ভ্যালুতে নিয়ে আসা এবং সেসব ভ্যালুকে সেই একটি প্রোপার্টির ভ্যালু হিসেবে লেখা। যেমন- transition

 

এই ধরণের প্রোপার্টিকে css এর ভাষায় Shorthand property বলে। গুগলে Shorthand properties বা css Shorthand properties লিখে সার্চ করলে অনেক কিছু পাবেন। এগুলোর মধ্যে বহুল ব্যবহৃত কিছু প্রোপার্টির নাম নিচে দিলাম-

  • background
  • transition
  • animation
  • padding
  • margin

ইত্যাদি।

Top 5 CSS Shorthand Properties নামে একটা আর্টিক্যাল দেখলাম, কয়েকটা  Shorthand property নিয়া সেখানে আলোচনা করা হইছে। দেখতে পারেন। ওকে .. ভূমিকা শ্যাষ, কাজের কথা শুরু করি।

 

বর্ডারও একটি শর্টহ্যাণ্ড প্রোপার্টি (Shorthand property)

আমাদের আলোচ্য বিষয় css border-ও একটি Shorthand property, অর্থাৎ এই বর্ডার প্রোপার্টির যে একাধিক ভ্যালু, সেগুলো মূলত বর্ডারের কয়েকটি প্রোপার্টির ভ্যালুর সমষ্টি। নিচে বর্ডারের সবগুলো প্রোপার্টি এবং ভ্যালু একসাথে ও আলাদাভাবে দেখানো হলো।

 

বর্ডারের আসল আকৃতি বা শেইপ (shape)

বর্ডারের কথা আসলেই আমাদের মাথায় সলিড বা  ডটেড্ একটি শেইপ চলে আসে। সাধারণত আমরা মনে করি যে, বর্ডারের শেইপ এরকম হয়ে থাকে।

 

প্রতিটা বর্ডারের কালার একই রকম হওয়ার কারণে আমরা সাধারণত মনে করি যে, বর্ডারের কোণগুলো সমান। ছবিতে লাল দাগ দিয়ে বর্ডারের কোণগুলোর প্রতি দৃষ্টি আকর্ষণ করা হয়েছে। কিন্তু আসলে বর্ডারের কোণগুলো সমান না। এই বিষয়টি স্পষ্টভাবে বুঝতে নিচের উদাহরণটি দেখুন।

দেখতেই পাচ্ছেন যে, যখনই আমি প্রতিটা বর্ডারের কালার আলাদা করে দিলাম, তখন বর্ডারের আসল আকৃতি বা শেইপটি স্পষ্টভাবে বোঝা যাচ্ছে।

এখানে আমরা একটি এলিম্যান্টে 300px width এবং 100px height দিয়ে তারপর সেটিতে বর্ডার দিলাম। আর প্রতিটা বর্ডারের কালার আলাদা দেয়ার মাধ্যমে বর্ডারের প্রকৃত শেইপটি জানলাম।

আচ্ছা, আমরা যদি একটি এলিম্যান্ট নেই, তারপর সেটিতে কোন height বা width না দেই, শুধু বর্ডার দেই, ভিন্ন ভিন্ন কালারের, তাহলে কি হয় দেখি-

বর্ডার নিয়ে কিছু কথা বলবো বলেছিলাম, বললাম। কিন্তু এই কথাগুলো কেন বললাম। এইভাবে কেন বললাম। বর্ডারের শেইপ নিয়ে কেন বিশেষভাবে কথা বললাম। বর্ডার সাধারণত কোন কোন জাগায় বেশি ব্যবহৃত হয়, বর্ডারের ট্রিক্সগুলোর মধ্যে কোনগুলো বেশি জনপ্রিয়…

আশা করি এসব বিষয় নিয়ে এই সিরিজের পরবর্তী পর্বে আলোচনা হবে। সবাই ভাল থাকুন।

 

(চলবে)

মন্তব্য

মন্তব্য