[০]
উপরে দুইটা ট্রায়াঙ্গল দেখা যাচ্ছে, আইকনের ভাষায় বলতে গেলে পর্যাক্রমে 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
তো আছেই।
বর্ডারকে অনেক অনেক এবং অনেকভাবে ব্যবহার করা হয়। আমি নিজে যে কয়টা জানি, তার থেকে কিছু শেয়ার করলাম। আরও এডভান্সড কিছু বর্ডারের ব্যাপারে নিচের লিংকগুলো থেকে জানতে পারবেন।
হ্যাপি কোডিং