TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

CSS টেক্সট বক্স টিউটোরিয়াল

3

বিভিন্ন ধরনের বিষয়বস্তু যেমন তথ্য বার্তা, মেনু, সামাজিক উইজেট, ব্লক কোট ইত্যাদি প্রদর্শনের জন্য পাঠ্য বাক্স ব্যবহার করা হয়। এই নিবন্ধে আমরা বিভিন্ন উদ্দেশ্যে বিভিন্ন ধরনের টেক্সট বক্স তৈরি করব এবং উইজেট যোগ করার জন্য আপনি আপনার সাইটে কোড কপি পেস্ট করতে পারেন।

ইনলাইন টেক্সট বক্স

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

<p align=justify style="background-color:#02f3e5; border-radius:4px; font-size:16px; padding:15px; margin:5px;"><b> This is a Sample Textbox</b> </p>

আপনি কেবল আপনার পৃষ্ঠার মূল অংশে কোডটি পেস্ট করতে পারেন এবং এটি প্রকাশিত সাইটে নীচের মত দেখাবে:

এটি ইনলাইন CSS ব্যবহার করে ব্যাকগ্রাউন্ড কালার সহ একটি নমুনা পাঠ্য বাক্স। আপনার সাইটে টেক্সট বক্স যুক্ত করার এটি সবচেয়ে সহজ উপায়।

আপনি আপনার সাইটে বাক্সটি সারিবদ্ধ করার জন্য পটভূমির রঙ এবং ফন্টের বৈশিষ্ট্যগুলি কাস্টমাইজ করতে পারেন।

তথ্য বার্তা হিসাবে টেক্সট বক্স

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

<link rel="stylesheet" href="https://www.webnots.com/resources/font-awesome/css/font-awesome.min.css"> .webnots-notification-box { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color: #ffffff; font-family: verdana, 'open sans', sans-serif; margin-bottom: 25px; padding: 10px 14px 10px 44px; position: relative; box-shadow: 0px 1px 5px #999; } .webnots-notification-box:before { font-family: FontAwesome; font-size: 21px; left: 14px; position: absolute; } .webnots-information { background-color: #3498db; } .webnots-information:before { content: "f129"; margin-left: 4px; } .webnots-question { background-color: #f1c40f; } .webnots-question:before { content: "f128"; margin-left: 2px; } .webnots-tip { background-color: #16a085; } .webnots-tip:before { content: "f0eb"; margin-left: 2px; }

তথ্য বার্তা বাক্সের জন্য HTML কোড নিম্নরূপ:

<div class="webnots-information webnots-notification-box"> This is the info box - You can input as much or as little information! </div> <div class="webnots-question webnots-notification-box"> This is the help box - You can input as much or as little information! </div> <div class="webnots-tip webnots-notification-box"> This is the tip box - You can input as much or as little information! </div>

আপনি প্রয়োজনীয় আইকন যোগ করে বিভিন্ন ধরনের বার্তা যোগ করতে পারেন এবং তথ্য বার্তা বাক্সগুলির জন্য কিছু উদাহরণ নিচে দেওয়া হল:

এটি তথ্য বাক্স – আপনি যতটা বা সামান্য তথ্য ইনপুট করতে পারেন!

এটি হেল্প বক্স – আপনি যত বা সামান্য তথ্য ইনপুট করতে পারেন!

এটি টিপ বক্স – আপনি যতটা বা সামান্য তথ্য ইনপুট করতে পারেন!

এটি নোটিশ বক্স – আপনি যতটা বা সামান্য তথ্য ইনপুট করতে পারেন!

এটি সাফল্যের বাক্স – আপনি যতটা বা সামান্য তথ্য ইনপুট করতে পারেন!

এটি বিপদ বাক্স – আপনি যতটা বা সামান্য তথ্য ইনপুট করতে পারেন!

এটি একটি সতর্কবাণী বাক্স – আপনি যত বা সামান্য তথ্য ইনপুট করতে পারেন!

বিজ্ঞপ্তি বার্তা বাক্স তৈরির বিষয়ে আরও জানুন ।

টেক্সট বক্স দিয়ে কোট ব্লক করুন

আপনার সাইটে ব্লক কোটগুলি টেক্সট বক্স দিয়ে সাজানো যেতে পারে যাতে এটি সাইটে আকর্ষণীয় এবং সুন্দর দেখায়। নিচে CSS দিয়ে ব্লক কোট কাস্টমাইজ করার একটি উদাহরণ দেওয়া হল:

blockquote { font-style:italic; line-height:32px; font-size:20px; color:#fff; background: #3F51B5; margin:10px; padding: 15px 20px 15px 20px; border-radius: 5px; } blockquote:before, blockquote:after { position: relative; vertical-align: middle; font-family: 'Playfair Display', serif; font-size: 56px; font-weight: 700; line-height: 0; color: #FBC02D; } blockquote:before { left: -5px; content: '201C'; } blockquote:after { content: '201D'; }

HTML নীচের মত হওয়া উচিত:

<blockquote> This is block quote element customized with CSS text box properties. You can customize more as you need... </blockquote>

পটভূমি এবং উদ্ধৃতি রঙ সমন্বয় করে আপনি নীচের মত ফলাফল পেতে পারেন:

এটি CSS পাঠ্য বাক্স বৈশিষ্ট্যগুলির সাথে কাস্টমাইজ করা ব্লক উদ্ধৃতি উপাদান। আপনি আপনার প্রয়োজন অনুযায়ী আরো কাস্টমাইজ করতে পারেন …

এটি CSS পাঠ্য বাক্স বৈশিষ্ট্যগুলির সাথে কাস্টমাইজ করা ব্লক উদ্ধৃতি উপাদান। আপনি আপনার প্রয়োজন অনুযায়ী আরো কাস্টমাইজ করতে পারেন …

এটি CSS পাঠ্য বাক্স বৈশিষ্ট্যগুলির সাথে কাস্টমাইজ করা ব্লক উদ্ধৃতি উপাদান। আপনি আপনার প্রয়োজন অনুযায়ী আরো কাস্টমাইজ করতে পারেন …

আপনার সাইটের জন্য কাস্টম বুটস্ট্র্যাপ স্টাইল ব্লক কোট তৈরির বিষয়ে আরও জানুন ।

মেনু বক্স

আপনার সাইটে প্রচুর জায়গা বাঁচাতে মেনু বা তালিকাভুক্ত সামগ্রী দেখানোর জন্য পাঠ্য বাক্সগুলি ব্যবহার করা যেতে পারে। এখানে আমরা মৌলিক হিসাবে দুটি বাক্স দেখাই, আসলে আপনি অনেক কিছু করতে পারেন।

মেনু বক্স 1 এর জন্য CSS:

.container-box { width: 300px; padding: 20px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); } .block { display: block; width: 100%; padding-right: 0; padding-left: 0; background-color: #5cb85c; } .item-list { display: inline-block; padding: 6px 12px; margin-bottom: 5px; font-size: 20px; font-weight: 600; line-height: 28px; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 4px; color: lightyellow; }

মেনু বক্স 1 এর জন্য এইচটিএমএল:

<div class="container-box"> <button class="item-list block"> Help </button> <button class="item-list block"> Help </button> <button class="item-list block"> Help </button> <button class="item-list block"> Help </button> <button class="item-list block"> Help </button> <button class="item-list block"> Help </button> </div>

মেনু বক্স 1 প্রকাশিত সাইটে নীচের মত হবে:

মেনু বক্স 2 এর জন্য CSS:

.box-column { width: 350px; border: 1px groove; padding: 5px; } .color-box { padding: 0; margin: 0; list-style: none; } .color-box li { color: #fff; padding: 10px 10px 10px 15px; background-color: brown; margin-bottom: 3px; font-size: 26px; }

মেনু বক্স 2 এর জন্য HTML:

<div class="box-column"> <h3>Opening Hours</h3> <ul class="color-box"> <li>Breakfast: 8AM - 11AM</li> <li>Grill Menu: 12AM - 12PM</li> <li>Live Music: 8AM - 11AM</li> </ul> </div>

মেনু বক্স 2 নীচের মত দেখাবে:

খোলার সময়

  • প্রাতakরাশ: সকাল 8 টা – 11 টা
  • গ্রিল মেনু: 12AM – 12PM
  • লাইভ মিউজিক: সকাল 8 টা – 11 টা

উপসংহার:

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

রেকর্ডিং উত্স: www.webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত