যেভাবে তৈরি করা যায়: টেক্সট বিভাজক

যেভাবে অপসারণযোগ্য টেক্সট বিভাজক তৈরি করা যায়

প্রথম পদক্ষেপ - HTML যোগ করুন:

<div class="divider">Lorem Ipsum</div>

দ্বিতীয় পদক্ষেপ - CSS যোগ করুন:

.divider {
  font-size: 30px;
  display: flex;
  align-items: center;
}
.divider::before, .divider::after {
  flex: 1;
  content: '';
  padding: 3px;
  background-color: red;
  margin: 5px;
}

আপনাকে নিজেই চেষ্টা করুন

উদাহরণ ব্যাখ্যা:

এই উদাহরণটি আপনাকে CSS-এর মাধ্যমে একটি টেক্সট বিভাজক তৈরি করতে শিখাবে। বিশেষত, এটি HTML এবং CSS-এর মিলিত উপযোগের মাধ্যমে এই প্রভাবকে সম্পন্ন করে।

প্রথমে, আপনি HTML-তে একটি ক্লাস নাম "divider"-সহ <div> উপাদান যোগ করতে হবে এবং এতে আপনি দেখতে চান টেক্সট (এই উদাহরণে, টেক্সট "Lorem Ipsum") প্রদর্শন করুন。

তারপর, CSS-তে, আপনি .divider ক্লাস কিছু শৈলী নির্ধারণ করেছে। আপনি ফন্ট আকার ৩০ পিক্সেল, flex ব্যবস্থা ব্যবহার করেছেন এবং align-items: center; যাতে টেক্সট বিভাজকের মধ্যে সমানভাবে অবস্থান করে

পরে, আপনি প্রকৃতপক্ষে যুক্ত করেছেন ::before এবং ::after যাতে বিভাজককে দুইদিকের অলঙ্কার যোগ করা হোক। এই দুটো প্রকৃতপক্ষে সব সেট করা হোক flex: 1 যাতে তারা অবস্থান করে .divider উপাদানের অন্তর্গত টেক্সট ছাড়া সব জায়গা। আপনি একটি নির্ধারণ করেছেন content: '' একটি যাতে এই দুটো প্রকৃতপক্ষে কোনও বিষয় না থাকে, কোনও কিছুই না ধারণ করে。

তারপর, অভ্যন্তরীণ প্যাডিং, পিন্ধন রঙ এবং বাইরের মাঝারি নির্ধারণ করে বিভাজক শৈলীকে পরিভাষিত করুন। এই উদাহরণে, বিভাজক রঙ লাল এবং কিছু অভ্যন্তরীণ এবং বাইরের মাঝারি রয়েছে。