Pure.CSS একটি লাইটওয়েট CSS ফ্রেমওয়ার্ক যা অনেক দরকারী এবং সাধারণ ডিজাইন উপাদান প্রদান করে। এতে Text Alignment এবং Text Transformation এর জন্য প্রিমেড স্টাইলস রয়েছে, যেগুলি ওয়েব পেজে টেক্সটের স্টাইল ও বিন্যাস সহজে কাস্টমাইজ করতে সাহায্য করে।
এখানে Pure.CSS ব্যবহার করে Text Alignment এবং Text Transformation কীভাবে করা যায়, তা নিয়ে বিস্তারিত আলোচনা করা হলো।
1. Text Alignment in Pure.CSS
Text Alignment হল টেক্সটের অবস্থান নির্ধারণ করা, যেমন লেফট, সেন্টার, রাইট বা জাস্টিফাই করা। Pure.CSS আপনাকে এই কাজটি সহজে করতে দেয়।
Text Alignment Class in Pure.CSS:
pure-text-left: টেক্সটকে বাম দিকে (left) সাজাতে ব্যবহার করা হয়।pure-text-center: টেক্সটকে মাঝখানে (center) সাজাতে ব্যবহার করা হয়।pure-text-right: টেক্সটকে ডান দিকে (right) সাজাতে ব্যবহার করা হয়।pure-text-justify: টেক্সটকে দুটি প্রান্তে (justify) সাজাতে ব্যবহার করা হয়।
Text Alignment Example in Pure.CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Alignment in Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
</head>
<body>
<div class="pure-text-left">
<h2>This is Left-Aligned Text</h2>
<p>This paragraph is aligned to the left.</p>
</div>
<div class="pure-text-center">
<h2>This is Center-Aligned Text</h2>
<p>This paragraph is aligned to the center.</p>
</div>
<div class="pure-text-right">
<h2>This is Right-Aligned Text</h2>
<p>This paragraph is aligned to the right.</p>
</div>
<div class="pure-text-justify">
<h2>This is Justified Text</h2>
<p>This paragraph is justified. It stretches across the full width of its container, aligning both the left and right edges.</p>
</div>
</body>
</html>
ব্যাখ্যা:
pure-text-left: বাম পাশে টেক্সট সাজাতে ব্যবহার করা হয়েছে।pure-text-center: মাঝখানে টেক্সট সাজানো হয়েছে।pure-text-right: ডান দিকে টেক্সট সাজানো হয়েছে।pure-text-justify: টেক্সট পুরো প্যারাগ্রাফে সম্প্রসারিত হয়ে দুই পাশেই সোজা হয়ে যায়, যা একটি প্যারাগ্রাফের জন্য খুবই উপকারী।
2. Text Transformation in Pure.CSS
Text Transformation হল টেক্সটের কেস (uppercase, lowercase, capitalize) পরিবর্তন করা। Pure.CSS এর মাধ্যমে আপনি খুব সহজেই টেক্সটের কেস পরিবর্তন করতে পারেন।
Text Transformation Class in Pure.CSS:
pure-text-uppercase: সমস্ত টেক্সটকে বড় হাতের অক্ষরে (uppercase) রূপান্তরিত করে।pure-text-lowercase: সমস্ত টেক্সটকে ছোট হাতের অক্ষরে (lowercase) রূপান্তরিত করে।pure-text-capitalize: প্রথম অক্ষরটি বড় (capitalize) করে।
Text Transformation Example in Pure.CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Transformation in Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
</head>
<body>
<div class="pure-text-uppercase">
<h2>This Text is Uppercase</h2>
<p>this paragraph will be displayed in uppercase letters.</p>
</div>
<div class="pure-text-lowercase">
<h2>This Text is Lowercase</h2>
<p>THIS PARAGRAPH WILL BE DISPLAYED IN LOWERCASE LETTERS.</p>
</div>
<div class="pure-text-capitalize">
<h2>This Text is Capitalized</h2>
<p>this paragraph will have each word's first letter capitalized.</p>
</div>
</body>
</html>
ব্যাখ্যা:
pure-text-uppercase: সমস্ত টেক্সটকে বড় হাতের অক্ষরে রূপান্তরিত করা হয়েছে।pure-text-lowercase: সমস্ত টেক্সটকে ছোট হাতের অক্ষরে রূপান্তরিত করা হয়েছে।pure-text-capitalize: প্রথম অক্ষরটি বড় (capitalize) করা হয়েছে।
অতিরিক্ত স্টাইলিং:
Pure.CSS এর স্টাইলগুলি মূলত লাইটওয়েট এবং মিনিমালিস্ট, তাই আপনি টেক্সটের রূপান্তর এবং_ALIGNMENT_ কাস্টমাইজ করার জন্য CSS দিয়ে আরও উন্নত স্টাইল দিতে পারেন।
Example with Custom Styling:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Text Styling with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
.custom-heading {
font-size: 2rem;
color: #3498db;
text-align: center;
}
.custom-paragraph {
font-size: 1.2rem;
color: #2ecc71;
text-align: justify;
}
</style>
</head>
<body>
<h1 class="custom-heading pure-text-uppercase">Custom Heading with Uppercase</h1>
<p class="custom-paragraph pure-text-justify">This is a paragraph that is both styled with custom CSS and justified using Pure.CSS. It's important to make sure that text alignment and transformation are applied based on the content context.</p>
</body>
</html>
ব্যাখ্যা:
- এখানে custom CSS ব্যবহার করে টেক্সটের স্টাইল এবং রঙ কাস্টমাইজ করা হয়েছে।
- Pure.CSS ক্লাসগুলির সাথে CSS কাস্টমাইজেশন একত্রিত করে আরও উন্নত লেআউট ও ডিজাইন তৈরি করা হয়েছে।
Pure.CSS দিয়ে Text Alignment এবং Text Transformation খুবই সহজ। আপনি পূর্বনির্ধারিত CSS ক্লাসগুলো ব্যবহার করে দ্রুত টেক্সটের অবস্থান এবং কেস পরিবর্তন করতে পারেন, এবং সহজেই সুন্দর এবং সুসংগত ডিজাইন তৈরি করতে পারেন। এই ফিচারগুলো আপনার ওয়েব পেজের টেক্সটের দেখাশোনা এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সাহায্য করবে।
Read more
