CSS border-radius প্রপার্টি বোঝা
CSS-এ border-radius প্রপার্টি ব্যবহার করে যেকোনো এইচটিএমএল (HTML) উপাদানের কোণগুলোকে গোলাকার রূপ দেওয়া যায়। এটি মূলত একটি বক্সের চারপাশের কোণকে কতটা বাঁকানো হবে তা নির্ধারণ করে। এই বর্ডার রেডিয়াস জেনারেটর টুলটি ব্যবহার করে আপনি কোড লেখার ঝামেলা ছাড়াই সরাসরি স্লাইডারের মাধ্যমে কোণগুলোর গোলাকার ভাব পরিবর্তন করতে পারবেন এবং সাথে সাথে তার জন্য প্রয়োজনীয় CSS কোড পেয়ে যাবেন।
ডিফল্ট অবস্থায় এই টুলের স্লাইডারের মান ২৪ থাকে, যার ফলে border-radius: 24px; কোডটি তৈরি হয়। আপনি আপনার প্রয়োজন অনুযায়ী প্রতিটি কোণ আলাদাভাবে অথবা সব কোণ একসাথে লিঙ্ক করে নিয়ন্ত্রণ করতে পারেন।
পিক্সেল (px) এবং শতাংশ (%) ইউনিটের পার্থক্য
বর্ডার রেডিয়াসের ক্ষেত্রে ইউনিটের নির্বাচন অত্যন্ত গুরুত্বপূর্ণ, কারণ এটি নির্ধারণ করে কোণটি কীভাবে বাঁকবে। এই টুলে "px" এবং "%" ইউনিটের মধ্যে পরিবর্তন করার সুবিধা রয়েছে।
- পিক্সেল (px): পিক্সেল ইউনিটে কোণটি একটি নির্দিষ্ট এবং অপরিবর্তিত পরিমাণে গোলাকার হয়। বক্সের আকার ছোট বা বড় হলেও কোণের বাঁকানো অংশের পরিমাপ একই থাকে।
- শতাংশ (%): শতাংশ ইউনিটে কোণটি বক্সের নিজস্ব আকারের সাপেক্ষে গোলাকার হয়। এখানে অনুভূমিক শতাংশ বক্সের প্রস্থ (width) অনুসরণ করে এবং উল্লম্ব শতাংশ বক্সের উচ্চতা (height) অনুসরণ করে। রেসপন্সিভ ডিজাইনের ক্ষেত্রে এই ইউনিটটি অত্যন্ত কার্যকর।
সাধারণ গোলাকার কোণ বনাম উপবৃত্তাকার (Elliptical) মোড
সাধারণ ডিজাইনে প্রতিটি কোণ একটি একক ব্যাসার্ধের এক-চতুর্থাংশ বৃত্ত হিসেবে কাজ করে। অর্থাৎ, কোণের অনুভূমিক এবং উল্লম্ব বাঁক সমান থাকে। কিন্তু আরও জটিল এবং নরম আকৃতি তৈরি করার জন্য উপবৃত্তাকার কোণ বা elliptical মোড ব্যবহার করা হয়।
যখন উপবৃত্তাকার মোড বন্ধ থাকে, তখন প্রতিটি কোণ একটি একক ব্যাসার্ধ নিয়ে কাজ করে। কিন্তু যখন আপনি উপবৃত্তাকার মোড চালু করবেন, তখন প্রতিটি কোণ আলাদা অনুভূমিক এবং উল্লম্ব ব্যাসার্ধ পাবে। এর ফলে আপনি "অনুভূমিক" এবং "উল্লম্ব" স্লাইডার ব্যবহার করে কোণগুলোকে ডিম্বাকৃতি বা আরও নরম, অর্গানিক "ব্লব" (blob) আকৃতি দিতে পারবেন। এই মোডে জেনারেটরটি CSS-এর জন্য দুটি মানের স্ল্যাশ (slash) ফরম্যাট তৈরি করে এবং কোণগুলো আবার স্বাভাবিক গোলাকার হয়ে গেলে স্বয়ংক্রিয়ভাবে সংক্ষিপ্ত রূপে ফিরে যায়।
নিখুঁত বৃত্ত এবং পিল-আকৃতি তৈরির কৌশল
ওয়েব ডিজাইনে নিখুঁত বৃত্ত এবং পিল-আকৃতির (pill-shaped) বাটন তৈরি করার জন্য নির্দিষ্ট কিছু নিয়ম রয়েছে:
১. নিখুঁত বৃত্ত তৈরি: একটি বর্গাকার উপাদানকে নিখুঁত বৃত্তে রূপান্তর করতে প্রথমে সব কোণ লিঙ্ক করুন। এরপর ইউনিট হিসেবে শতাংশ (%) বেছে নিয়ে স্লাইডারের মান ৫০% সেট করুন। এতে বর্গক্ষেত্রটি বৃত্তে পরিণত হবে। ২. পিল-আকৃতির বাটন তৈরি: পিল-আকৃতির বাটনের জন্য ইউনিট হিসেবে পিক্সেল (px) বজায় রাখুন। এরপর স্লাইডার টেনে যেকোনো একটি কোণকে বাটনের উচ্চতার অর্ধেকের বেশি মানের দিকে নিয়ে যান। এর ফলে বাটনটির প্রস্থ যতই হোক না কেন, দুই পাশ সবসময় সম্পূর্ণ গোলাকার থাকবে।
প্রিসেট এবং জেনারেট করা CSS ব্যবহার
ডিজাইনের কাজ দ্রুত করার জন্য এই টুলে কিছু রেডিমেড প্রিসেট বাটন রয়েছে। এই প্রিসেটগুলোর মধ্যে রয়েছে:
- তীক্ষ্ণ: কোণগুলোর রেডিয়াস ০ করে দেয়।
- গোলাকার: সাধারণ গোলাকার কোণ তৈরি করে।
- বৃত্ত: সব কোণকে ৫০% করে দেয়, যা বর্গক্ষেত্রকে বৃত্তে রূপান্তর করে।
- ব্লব: উপবৃত্তাকার মোড ব্যবহার করে একটি অর্গানিক ব্লব আকৃতি দেয়।
- পাতা: বিপরীত কোণগুলোকে সামঞ্জস্য করে পাতার মতো আকৃতি তৈরি করে।
টুলটির নিচে থাকা "CSS" হেডিংয়ের অধীনে জেনারেট হওয়া কোডটি দেখা যায়। আপনি "CSS" কপি করুন বাটনটিতে ক্লিক করে সরাসরি কোডটি কপি করে আপনার স্টাইলশীটে ব্যবহার করতে পারেন।
ব্রাউজার-ভিত্তিক প্রসেসিং এবং গোপনীয়তা
এই টুলটি ব্যবহারের ক্ষেত্রে আপনার গোপনীয়তা সম্পূর্ণ সুরক্ষিত থাকে। প্রতিটি কোণ সরাসরি আপনার ব্রাউজারে তৈরি হয়। আপনার কোনো ডেটা বা সেটিংস BroBroGo-তে আপলোড করা হয় না।
সাধারণ জিজ্ঞাসা (FAQ)
চারটি কোণ এবং px বনাম % কীভাবে কাজ করে? চারটি স্লাইডার ঘড়ির কাঁটার দিকে যথাক্রমে উপরে-বামে, উপরে-ডানে, নিচে-ডানে এবং নিচে-বামে কোণগুলোকে নির্দেশ করে। পিক্সেলে কোণটি একটি নির্দিষ্ট পরিমাণে গোলাকার হয়; শতাংশে এটি বক্সের সাপেক্ষে গোলাকার হয় — অনুভূমিক শতাংশ প্রস্থ অনুসরণ করে এবং উল্লম্ব শতাংশ উচ্চতা অনুসরণ করে, তাই ৫০% সেট করলে একটি বর্গক্ষেত্র বৃত্তে পরিণত হয়।
উপবৃত্তাকার (elliptical) মোড কী কাজ করে? এটি বন্ধ থাকলে, প্রতিটি কোণ একটি একক ব্যাসার্ধের (radius) এক-চতুর্থাংশ বৃত্ত হবে। এটি চালু করলে প্রতিটি কোণ আলাদা অনুভূমিক এবং উল্লম্ব ব্যাসার্ধ পাবে, যা দিয়ে আপনি নরম, অর্গানিক "ব্লব" (blob) আকৃতি তৈরি করতে পারবেন। জেনারেটরটি আপনার জন্য দুটি মানের স্ল্যাশ (slash) ফরম্যাট তৈরি করবে এবং কোণগুলো আবার স্বাভাবিক গোলাকার হয়ে গেলে সংক্ষিপ্ত রূপে ফিরে যাবে।
আমি কীভাবে একটি নিখুঁত বৃত্ত বা পিল-আকৃতি তৈরি করব? কোণগুলো লিঙ্ক করুন, ইউনিটে শতাংশ (%) বেছে নিন এবং ৫০% সেট করুন: একটি বর্গক্ষেত্র বৃত্তে পরিণত হবে। পিল-আকৃতির (pill-shaped) বাটনের জন্য, পিক্সেল (px) বজায় রাখুন এবং যেকোনো একটি কোণ টেনে বাটনের উচ্চতার অর্ধেকের বেশি করুন — এতে যেকোনো প্রস্থেই দুই পাশ সম্পূর্ণ গোলাকার থাকবে। সার্কেল প্রিসেটটি এক ক্লিকেই প্রথম কেসটি সেট আপ করে দেয়।