বর্ডার নিয়ে কিছু কথা- দ্বিতীয় পর্ব (css border: part-2)

যেমনটা বলছিলাম, আমরা এইখানে প্রাথমিক লেবেলের জরুরী বিষয়গুলা নিয়া আলোচনা করবো, আজকে ঠিক তেমনি একটি বিষয় শিখবো।

আজকে আমরা শার্টের কলার বানানো শিখবো। মুহাহাহা … মজা পাইছেন? না পাইলে থাক, খোঁজার দরকার নাই। মজা দেওয়ার সাথে সাথে না পাইলে মজা নষ্ট হইয়া যায়।

আজকে আমরা যে শার্টের কলার বানানো শিখবো, সেটা ওয়েব ডিজাইনারদের বিরাট কাজে লাগে। নিচের ছবিটা দেখেন-

শার্টের কলারের মত মেন্যু

এই পোস্টের শেষ দিকে আমরা দেখেছিলাম কিভাবে border এর মাধ্যমে arrow বা tooltip তৈরি করতে হয়। তখন আমরা চারটি বর্ডার থেকে শুধু একটি বর্ডারের কালার দিয়ে এবং বাকিগুলোকে transparent করে সেটি তৈরি করেছিলাম। আর এই কাজটির জন্য আমরা যে বর্ডারটি ব্যবহার করবো, তার বিপরীত দিকের বর্ডারটি আমাদের কোন কাজে আসে না, সেটা না লিখলেও চলে। যেমন- আমরা যদি border-left এর মধ্যে কালার ব্যবহার করি, তাহলে border-right না নিলেও চলবে। শুধু border-top এবং border-bottom নিয়ে সেগুলোকে transparent করে দিলেই আমরা একটি arrow চিহ্ন পেয়ে যাবো। তবে এ ক্ষেত্রে border-top এবং border-bottom এর যে কোন একটি বাদ দিলে আমাদের arrow চিহ্নটি নষ্ট হবে না, বরং অন্য আরেক ধরণের arrow তৈরি হবে।

তবে আজকে আমরা border দিয়ে যে কাজটি করতে যাচ্ছি, সেটির জন্য আমাদের চারটি border-ই লাগবে।

শার্টের কলারের দুই দিকে যেমন ভাজ থাকে, তেমনই এই ডিজাইনটাতেও একটা ভাজ আছে। আর এটি তৈরি করতে আমাদের লাগবে css pseudo elements – :before এবং :after আর এগুলোর border …. তো চলেন, শুরু করি।

 

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

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

 

যাক, এবার মূল ডেমোটি দেখুন এবং ভালভাবে দেখুন, সম্পূর্ণভাবে বুঝতে পারার আগ পর্যন্ত দেখুন। তারপর নিজের মত করে ভিন্ন আরেকটি তৈরি করুন।

 

অনেক ব্যস্ততার মাঝে সময় বের করতে পেরেছি, তাই ভাল লাগছে। আগামীতে আবার দেখা হবে। ভাল থাকবেন সবাই।

 

 

 

মন্তব্য

মন্তব্য