CSS border নিয়ে কিছু কথা

[০] :small_red_triangle: :small_red_triangle_down:
উপরে দুইটা ট্রায়াঙ্গল দেখা যাচ্ছে, আইকনের ভাষায় বলতে গেলে পর্যাক্রমে caret-up এবং caret-down। আমরা CSS এর মধ্যে যে border প্রোপার্টি ব্যবহার করি, এই border এর প্রকৃত শেইপ কিন্তু এরকম ত্রিকোণ বিশিষ্ট, ত্রিভুজ আকৃতির, triangle shaped।

border-bottom এবং border-top দেখতে মূলত আমাদের উপরের caret-up এবং caret-down এর মত, একইভাবে border-left এবং border-right এর আসল শেইপ বা আকৃতি মূলত caret-right এবং caret-left এর মত। কোন এলিমেন্টে যদি height‌, width বা padding না থাকে, অর্থাৎ, কোন এলিমেন্টের যদি নিজস্ব কোন স্পেস না থাকে এবং আপনি যদি তাতে border দেন তাহলেই বর্ডারের এই প্রকৃতরূপ দেখতে পাবেন।

এটা অনেক পুরোনো ব্যাপার, যেহেতু বর্ডার নিয়ে কথা বলবো, তাই ভাবলাম বিষয়টা আবার বলি। তবে আজকের আলোচ্য বিষয় border itself না। আজকের আলোচ্য বিষয় হলো- CSS এর মধ্যে border প্রোপার্টি ছাড়া আমরা আর কি কি পদ্ধতিতে বর্ডারের কাজটা করতে পারি এবং এই পদ্ধতিগুলোর কিছু pros & cons।

[১] ব্লগ বা আর্টিক্যাল কার্ডে hover করলে টাইটেলে অনেকে বর্ডার ব্যবহার করেন। এই কাজটা অনেকে অনেকভাবে করেন। এখানে দুইটা পদ্ধতি দেখানো হলো-

background-image, linear-gradient, background-size এই তিনের কম্বো,

  • মূলত এখানে transition এর ব্যবহারের জন্যই এই ঝামেলাটা করা,
  • আর ট্রানযিশানটা এখানে দেয়া হয়েছে background-size এ,
  • এখন background-size তো আর background-color এর সাথে কাজ করে না, সে কাজ করে background-image এর সাথে,
  • এখন background-image এর মধ্যে তো আর সরাসরি কালার দেয়া যায় না, এই জন্য linear-gradient

transition ব্যবহার করাটাই এখানে উদ্দেশ্য, নইলে এই ইফেক্ট ছাড়া করতে চাইলে এটা শুধু border-bottom দিলেই হইত। তবে, উভয় ক্ষেত্রেই একটা বিষয় বাধ্যতামূলক খেয়াল রাখতে হবে যে, এলিমেন্ট-টি যেন inline হয়, inline-block হলেও হবে না, আর block হলে তো হবেই না, শক্ত হয়ে থাকবে। inline-ই হতে হবে। তাই এর জন্য inline এলিমেন্ট নিন, অথবা এলিমেন্টকে CSS দিয়ে inline বানিয়ে নিন।


গত পর্বে যে text-underline-offset নিয়ে বলছিলাম, সেটা এ ক্ষেত্রে কাজে লাগবে। background-size এর মত না হলেও এটা দিয়ে মোটামুটি ভালই transition এর কাজ করা যায়।


[২] ফিগমা এবং এ জাতীয় টুলগুলোতে বর্ডারের জন্য যে অপশনটি থাকে তার নাম হলো- stroke, এতে স্ট্রোক বা বর্ডারের পাশাপাশি তার পযিশনের জন্যও অপশন থাকে, অর্থাৎ বর্ডার তার এলিমেন্টের ভেতরে থাকবে না বাইরে, নাকি মাঝামাঝি অবস্থায়, এসবও আপনি ঠিক করে দিতে পারবেন। কিন্তু CSS বর্ডারের ক্ষেত্রে এই পযিশনের ব্যাপারটা নেই। মানে, সরাসরি বর্ডার প্রোপার্টির সাথে সম্পৃক্ত কিছু নাই আর কি, আপনি চাইলে box-sizing প্রোপার্টি ব্যবহার করে ভিতর/বাহির করতে পারেন, কিন্তু border-offset বলতে কিছু নাই এখনও আমাদের।

এই সমস্যার সমাধান করতে অনেকে আমরা ::before ::after এর মত স্যুডো ক্লাস/সিলেক্টর ব্যবহার করি। অর্থাৎ, এলিমেন্ট থেকে একটু বেশি height width নিয়ে সেটাকে পযিশন দিয়ে এডজাস্ট করা আর কি। তবে এর একটা সিম্পল সলুশন হতে পারে outline এবং outline-offset

এর মাধ্যমে আপনি এলিমেন্টের ভেতরে, বাহিরে বা মাঝামাঝি, যেখানে খুশি বর্ডারের কাজ করতে পারবেন। আর এটি যেহেতু transition ও একসেপ্ট করে, এটা দিয়ে বিভিন্ন খেলাধুলাও করতে পারবেন।

কিছু বিষয় খেয়াল রাখতে হবে, যেমন outline ব্যবহারের সময় border-radius এর ব্যবহার একটু সাবধানে করতে হবে। দুইটা কারন, এক- border-radius ব্যবহার করলে সেটা outline এর মধ্যে অনেক বেশি দেখায়। মানে দিলেন 4px কিন্তু দেখে মনে হচ্ছে 12px, বুঝে-শুনে ব্যবহার করবেন।
দ্বিতীয় বিষয়টা হলো- কিছু কিছু মোবাইল ব্রাউজারে outline এর সাথে border-radius কাজ করে না, বিষয়টা খুবই চিন্তার, এই জন্য আমি সাবধান থাকি এটা ব্যবহার করার সময়।

[৩] আমরা যদি box-shadow ব্যবহার করে বর্ডার দেই, তাহলে outline-offset দিয়ে পযিশনের যে সুবিধা সেটা তো পাবোই, পাশাপাশি আমরা মাল্টিপল বর্ডারও দিতে পারবো, কারন box-shadow মাল্টিপল ভ্যালু একসেপ্ট করে। box-shadow দিয়ে বর্ডার দিলে আমরা দুইটা সুবিধা এক জাগাতেই পাবো। আর এতে ভার্টিক্যল ও হরাইযন্টাল অফসেট দেয়ার জন্য আলাদা আলাদা অপশন আছে (hoff voff)।

বর্ডার যদি একটু বেশি হয় এবং চার দিকের না হয়, তিন দিক বা এক দিকের হয়, তাহলে উপরে যে বর্ডারের যে শেইপ দেখানো হইছিল, সেটা তখন স্পষ্ট চোখে পড়ে। এ ক্ষেত্রে বক্স শ্যাডোর ব্যবহার তুলনামূলক নিরাপদ। আর CSS এ সর্বরোগের মহৌষধ ::before ::after তো আছেই।

বর্ডারকে অনেক অনেক এবং অনেকভাবে ব্যবহার করা হয়। আমি নিজে যে কয়টা জানি, তার থেকে কিছু শেয়ার করলাম। আরও এডভান্সড কিছু বর্ডারের ব্যাপারে নিচের লিংকগুলো থেকে জানতে পারবেন।

হ্যাপি কোডিং :v:

13 Likes

Very informative blog. thanks

2 Likes

সুন্দর লেখনি। আরো চাই

2 Likes

ধন্যবাদ ভাই, ইনশাআল্লাহ, চেষ্টা করবো আরো লেখার।