একটি ওয়েবসাইট ডিজাইন করার সময়, চেনাশোনাগুলির পরিবর্তে অর্ধ-বৃত্ত যোগ করলে আরও ভাল চেহারা পাওয়া যায়। তাছাড়া, আধা-বৃত্ত গঠন যেমন সহজ তেমনি আকর্ষণীয়।
এই নিবন্ধে, আমরা কিভাবে CSS ব্যবহার করে একটি অর্ধ-বৃত্ত তৈরি করতে হয় তার একটি নির্দেশিকা প্রদান করব।
কিভাবে CSS দিয়ে একটি সেমি সার্কেল তৈরি করবেন?
একটি আধা-বৃত্ত তৈরি করতে, আমরা ব্যবহার করব ' সীমানা-ব্যাসার্ধ 'সম্পত্তি। এই সম্পত্তি আমাদের নিম্নলিখিত উপায়ে একটি অর্ধবৃত্ত করতে সাহায্য করবে:
- উপরে থেকে আধা বৃত্ত
- নিচ থেকে আধা বৃত্ত
- বাম থেকে আধা বৃত্ত
- ডান দিক থেকে আধা বৃত্ত
আসুন একে একে একে একে বিস্তারিত বলি!
উদাহরণ 1: CSS দিয়ে উপরে থেকে একটি সেমি সার্কেল তৈরি করুন
উপরে থেকে একটি অর্ধ-বৃত্ত তৈরি করতে, প্রথমে, আমরা নির্দিষ্ট করব “ এইচটিএমএল এখন, ডিভের জন্য উপযুক্ত মাত্রা সেট করুন, যেমন আমরা “ প্রস্থ ' সম্পত্তির মান হিসাবে ' 180px ' এবং ' উচ্চতা 'মূল্য সহ সম্পত্তি' 90px ” পরবর্তী ধাপে, সেট করুন ' সীমানা-ব্যাসার্ধ ' সম্পদের মূল্য ' 12rem 12rem 0 0 ”; যেখানে প্রথম সংখ্যা 12rem div-এর উপরের বাম দিকে ছাঁটাই করবে, দ্বিতীয় 12rem উপরের ডানদিকে ছাঁটাই করবে, তৃতীয় এবং চতুর্থ সংখ্যা 0 ডিভের সমস্ত নীচের অংশটি কেটে দেবে। অবশেষে, বৃত্তে একটি রঙ দিতে, ব্যবহার করুন ' পেছনের রং 'মূল্য সহ সম্পত্তি' বেগুনি ” সিএসএস উল্লেখিত কোড সহ HTML ফাইলটি সংরক্ষণ করুন এবং এটি আপনার ব্রাউজারে খুলুন: আপনি দেখতে পাচ্ছেন, আমরা সফলভাবে CSS বর্ডার-ব্যাসার্ধ বৈশিষ্ট্য সহ একটি আধা-বৃত্ত তৈরি করেছি। নীচে থেকে একটি অর্ধ-বৃত্ত গঠনের জন্য, আমরা সীমানা-ব্যাসার্ধ সম্পত্তি মান হিসাবে সেট করব “ 0 0 12rem 12rem ”, যেখানে প্রথম দুটি মান উপরের বাম এবং উপরের ডানদিকের সীমানা-ব্যাসার্ধকে উপস্থাপন করে। ডিভের উপরের অর্ধেক সম্পূর্ণরূপে অদৃশ্য করার জন্য আমরা সেগুলিকে 0 এ সেট করেছি। নীচের জন্য, আমরা মানগুলি 12rem এ সেট করে কেবল নীচের বাম এবং নীচের ডানদিকে সামান্য ছাঁটাই করেছি। সিএসএস আউটপুট ডানদিকে একটি CSS আধা-বৃত্ত তৈরি করতে, প্রথমে ধারকটির উচ্চতা এবং প্রস্থ সামঞ্জস্য করুন কারণ এটি বৃত্তের সঠিক আকৃতি পেতে প্রয়োজনীয়। স্থির কর ' প্রস্থ 'যেমন' 90px ' এবং ' উচ্চতা 'যেমন' 180px ' এইবার. আবার, বর্ডার-ব্যাসার্ধ সম্পত্তি ব্যবহার করুন “মান সহ 0 12rem 12rem 0 ”, যেখানে প্রথম মান 0 উপরের বাম দিকের জন্য, শেষ মান 0 হল নীচের বাম দিকের জন্য, এবং দ্বিতীয় এবং তৃতীয় মানগুলি উপরের ডানদিকে এবং নীচের ডানদিকে ছাঁটাই করতে যোগ করা হয়েছে। এই মানগুলি প্রয়োগ করলে ডান দিক থেকে একটি অর্ধবৃত্ত তৈরি হবে। সিএসএস আউটপুট এইবার, মান বরাবর সীমানা-ব্যাসার্ধ বৈশিষ্ট্য উল্লেখ করুন “ 12rem 0 0 12rem ”; প্রথম এবং শেষ মান 12rem ডিভের উপরের বাম এবং নীচের বাম দিকে ছাঁটাই করবে, দ্বিতীয় এবং তৃতীয় মান 0 এ সেট করলে বৃত্তের উপরের ডানদিকে এবং নীচের ডানদিকে পরিষ্কার হবে। অবশেষে, আমাদের বাম-পার্শ্বযুক্ত আধা-বৃত্ত তৈরি হবে। সিএসএস আউটপুট আমরা CSS দিয়ে একটি সেমি সার্কেল তৈরি করার জন্য বিভিন্ন পদ্ধতি অফার করেছি। একটি আধা-বৃত্ত তৈরি করতে, আমরা কেবল CSS ব্যবহার করতে পারি ' সীমানা-ব্যাসার্ধ 'সম্পত্তি। আধা-বৃত্তটি পাশ থেকে পাশে তৈরি করা যেতে পারে, যেমন বাম, ডান, উপরে এবং নীচে। সীমানা-ব্যাসার্ধ বৈশিষ্ট্যে, প্রাথমিক মানটি উপরের বাম দিকে, দ্বিতীয়টি উপরের ডানদিকে, তৃতীয়টি নীচের ডানদিকে এবং চতুর্থ মানটি নীচের বাম দিকের জন্য৷ এই লেখাটি ব্যাখ্যা করেছে কিভাবে CSS দিয়ে একটি সেমি সার্কেল তৈরি করা যায়।
প্রস্থ : 180px ;
উচ্চতা : 90px ;
সীমানা-ব্যাসার্ধ : 12 রেম 12 রেম 0 0 ;
পেছনের রং : বেগুনি ;
}
উদাহরণ 2: CSS দিয়ে নীচে থেকে একটি সেমি সার্কেল তৈরি করুন
প্রস্থ : 180px ;
উচ্চতা : 90px ;
সীমানা-ব্যাসার্ধ : 0 0 12 রেম 12 রেম ;
পেছনের রং : বেগুনি ;
}
উদাহরণ 3: CSS দিয়ে ডান দিক থেকে একটি সেমি সার্কেল তৈরি করুন
প্রস্থ : 90px ;
উচ্চতা : 180px ;
সীমানা-ব্যাসার্ধ : 0 12 রেম 12 রেম 0 ;
পেছনের রং : বেগুনি ;
}
উদাহরণ 4: CSS দিয়ে বাম থেকে একটি সেমি সার্কেল তৈরি করুন
প্রস্থ : 90px ;
উচ্চতা : 180px ;
সীমানা-ব্যাসার্ধ : 12 রেম 0 0 12 রেম ;
পেছনের রং : বেগুনি ;
}
উপসংহার