how to make transparent border (css border:part-3)

transparent border, বর্ডার নিয়ে কিছু কথা – ৩য় পর্ব (css border: part-3)

CSS border সিরিজের আজকের পর্বে আমরা আলোচনা করবো transparent border নিয়ে। ট্রান্সপারেন্ট বর্ডার বলতে আমরা কি বোঝাতে চাচ্ছি এখানে, সেটা আগে পরিষ্কার হওয়ার দরকার, আর তার জন্য আমরা নিচের ছবিটি দেখতে পারি-transparent border sample

ট্রান্সপারেন্ট বর্ডার বলতে আমরা এ ধরণের বর্ডার বোঝাতে চাচ্ছি। আর এখানে যে border: 5px solid transparent; দিয়ে কাজ হবে না, সেটা আশা করি সবাই জানি, যারা এখনও জানি না তারা চেষ্টা করে হতাশ হয়ে জেনে নিতে পারেন, অথবা এখন আলোচনা শেষ করে নেন আগে, পরে সময় নষ্ট কইরেন

 

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

এই ব্যবহারের মূল ট্রিক হলো তিনটি- প্যারেন্ট এলিমেন্টের জন্য overflow: hidden;  চাইল্ডের জন্য width: calc(100% - #); height: calc(100% - #); এবং চাইল্ডের  pseudo element এর জন্য box-shadow, নিচের উদাহরণটির মাধ্যমে বিষয়টি আরও ভালভাবে বোঝানোর চেষ্টা করা হলো-

 

circular transparent border

মূলত transparent border বলতে আমরা এখানে যা বোঝাতে চাচ্ছি, তা হলো blank space, একটি ইমেজের উপর কোন একটা কালারের ওভারলে রয়েছে, সেটাতে চারকোনা বা গোলাকার একটি blank space তৈরি করতে হবে, যেন দেখলে মনে হয় transparent border, গোলাকার transparent border এর কথা যখন উঠলই, চলুন ডেমো দেখে আসি-

 

অনেকে আবার এটাকে css gradient দিয়ে তৈরি করে, যেমন-

তবে এ ক্ষেত্রে আমি css gradient ব্যবহার করি না, box-shadow দিয়েই কাজ করি ‘সাধারণত’। অসাধারণ কিছু পরিস্থিতি আছে যেখানে ভিন্ন পন্থা অবলম্বন করতে হয়। আসলে কখন কিভাবে একটি কাজ আমরা করবো সেটা নির্ভর করে সিচুয়েশান এবং ক্লায়েন্টের ডিমান্ডের উপর। যেমন উপরের প্রথম দু’টি উদাহরণের কাজ এখানে যেভাবে দেখানো হয়েছে, সেটা ছাড়াও অন্যভাবে কাজগুলো করা যায়, তবে সেগুলোর তুলনায় উল্লেখিত পদ্ধাতিটি তুলনামূলক অনেক বেশি সহজ এবং কার্যকর।

আরেকটি কথা, এ পর্যন্ত যে উদাহরণগুলো দেয়া হয়েছে, তার সবগুলোতেই box-shadow এর spread এর ভ্যালু vh বা vw ইউনিটের মাধ্যমে দেয়া হয়েছে, সাধারণত আমরা এখানে px ব্যবহার করি, vh বা vw ইউনিট ব্যবহার করার উদ্দেশ্য হলো- কম ঝামেলার মধ্যে সিকিউর একটা পদ্ধতি অবলম্বন করা, এটি px এর ব্যবহারের চেয়ে অনেকাংশে বেশি নিরাপদ। তবে আপনারা অবশ্যই অবস্থা বুঝে ইউনিট ব্যবহার করবেন, vh বা vw ইউনিটের চেয়ে px ইউনিটও কখনও কখও গুরুত্বপূর্ণ হয়ে যেতে পারে, ব্যাপারটা পরিস্থিতির উপর নির্ভর করে।

transparent border in Bootstrap container 

তো, সাধারণ এবং অসাধারণ পরিস্থিতি নিয়ে কথা হচ্ছিল, সাধারণের উদাহরণ তো দেখলাম বেশ কিছু। এবার অসাধারণ বা একটু ভিন্ন ও জটিল পরিস্থিতির কথা বলা যাক, যেমন- bootstrap এর container এ যদি আমরা এরকম একটি transparent border দিতে চাই এবং bootstrap container এর কন্টেন্ট যদি ডায়নামিক হয়- অর্থাৎ কন্টেন্টের পরিমাণ নির্দিষ্ট না বা পরিমাণের ব্যাপারে আন্দাজও করা যাচ্ছে  না, তখন আমারদের এই কাজের সবচে’ গুরুত্বপূর্ণ যে ট্রিক-  box-shadow সেটা এ ক্ষেত্রে ব্যবহার করা ঠিক হবে না। কারণ box-shadow এর spread এর যে ভ্যালু, সেটাতে পার্সেন্টেজ (%) ইউনিট ব্যবহার করা যায় না, px অথবা vh/vw ব্যবহার করা যায়। তাই এ ক্ষেত্রে, অর্থাৎ – যদি bootstrap container এর কন্টেন্ট ডায়নামিক হয়, বা কন্টেন্টের পরিমাণ আন্দাজ করে box-shadow এর spread এর যে ভ্যালু দেয়াটা নিরাপদ না হয়, তাহলে এই transparent border তৈরি করার আরও একটি অধিক কার্যকরী পদ্ধতি রয়েছে।

using 4 css pseudo elements

যে পদ্ধতিটির কথা বলছি, সেটাকে লিখে ব্যাখ্যা করতে গেলে অনেক বেশি সময় এবং জায়গা লাগবে, তাই সরাসরি ডেমোতে চলে যাবো। মূল কয়েকটি বিষয় বলা যায়, যেমন-

  • bootstrap container এর ::before এবং ::after
  • bootstrap container এর পরপরই আরও একটি ব্লক-এলিমেন্ট (div of section) নিতে হবে, এবং সেটার ::before::after

এই চারটি pseudo elements দিয়ে আমরা এই কাজটি করবো, নিচের ইমেজটা দেখলে কোড সম্পর্কে একটা ধারণা পাবেন আশা করি-

transparent border for bs4 explained

ওভারলে ব্যাকগ্রাউন্ডের কালার ভিন্ন ভিন্ন দিয়ে দেখালাম যেন pseudo element-গুলোর পযিশন ও মৌলিক কাজগুলো বুঝতে সহজ হয়। আর bootstrap container এর যে wrapper element হবে, সেটাতে অবশ্যই overflow: hidden; দেবেন, যেন pseudo element-গুলো যখন এলিমেন্টের বাইরে যাবে, তখন যেন বাইরের অংশটুকু দেখা না যায়। 

এবার সবগুলো pseudo element-এর ওভারলে ব্যাকগ্রাউন্ডের কালার একরকম করে দিলাম, এখন দেখলে transparent border মনে হয়-

transparent border for bs4 container preview

 

এই পদ্ধতিটা হলো একশভাগ ডায়নামিক, অর্থাৎ এবার bootstrap container এর মধ্যে যত কন্টেন্টই থাকুক না কেন, আমাদের বানানো transparent border এর কোন সমস্যা হবে। নিচে ডেমো দেয়া হলো, সময় নিয়ে ভাল করে দেখুন-

শেষ কথা

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

সবাই ভাল থাকবেন, আল্লাহ হাফেজ।

মন্তব্য

মন্তব্য