Materialize CSS এর একটি শক্তিশালী বৈশিষ্ট্য হলো এর সহজে কাস্টমাইজ করা যায় এমন কালার থিম এবং স্টাইল। এটি আপনাকে ওয়েবসাইটের ডিজাইনকে পুরোপুরি আপনার প্রয়োজন অনুযায়ী বদলানোর সুযোগ দেয়। আপনি সহজেই এর রঙ, ফন্ট, স্টাইল, এবং অন্যান্য উপাদান কাস্টমাইজ করে একটি ইউনিক থিম তৈরি করতে পারবেন। এখানে Materialize এর কালার থিম এবং কাস্টমাইজেশন সম্পর্কিত বিস্তারিত আলোচনা করা হলো।
Materialize এর কালার থিম
Materialize CSS কিছু প্রী-ডিফাইন্ড কালার থিম প্রদান করে, যা দ্বারা আপনি আপনার ওয়েবসাইটে একটি আধুনিক এবং আকর্ষণীয় লুক দিতে পারেন। এগুলো primary colors, secondary colors, এবং অন্যান্য accent colors হিসেবে ব্যবহার করা যায়। Materialize এর প্রাথমিক রঙগুলো হল:
- Primary Color: মূল রঙ, যা সাধারণত আপনার ওয়েবসাইটের প্রধান রঙ হিসেবে ব্যবহৃত হয়।
- Secondary Color: এটি দ্বিতীয় প্রধান রঙ, যা সাধারণত বিভিন্ন buttons, links, এবং navigation bars এ ব্যবহৃত হয়।
- Accent Color: এটি সাবলীল, হালকা রঙের একটি নির্বাচন, যা ওয়েবসাইটে বিভিন্ন ছোট ছোট উপাদানে ব্যবহৃত হয়।
উদাহরণস্বরূপ, Materialize CSS এ থাকা কিছু প্রি-ডিফাইন্ড রঙের ক্লাস:
<button class="btn waves-effect waves-light teal">Teal Button</button>
<button class="btn waves-effect waves-light red">Red Button</button>
<button class="btn waves-effect waves-light blue">Blue Button</button>
এখানে btn, waves-effect, এবং waves-light ক্লাসের সাথে রঙের ক্লাস যোগ করা হয়েছে, যা Materialize এর কালার থিম অনুযায়ী বাটনের রঙ নির্ধারণ করে।
Materialize এর কাস্টমাইজেশন
Materialize CSS কে কাস্টমাইজ করা অনেক সহজ। আপনি বিভিন্ন উপাদানের জন্য রঙ, আকার, ফন্ট, মার্জিন ইত্যাদি পরিবর্তন করতে পারেন। এখানে কাস্টমাইজেশন সম্পর্কিত কিছু সাধারণ পদ্ধতি উল্লেখ করা হলো:
১. কাস্টম কালার ব্যবহার করা
Materialize CSS এর প্রি-ডিফাইন্ড কালার থিম ব্যবহার করা ছাড়াও, আপনি নিজস্ব কালার স্কিম তৈরি করতে পারেন। এর জন্য আপনি SASS ব্যবহার করতে পারেন, কারণ Materialize CSS সাস (SASS) ফাইলগুলোকে সাপোর্ট করে।
নিচে একটি উদাহরণ দেওয়া হলো যেখানে আপনি primary color এবং secondary color কাস্টমাইজ করতে পারেন:
$primary-color: #ff5722; // Orange
$secondary-color: #3f51b5; // Indigo
@import "materialize";
এখানে আপনি আপনার পছন্দমতো রঙ কোড পরিবর্তন করে আপনার ওয়েবসাইটের ডিজাইন কাস্টমাইজ করতে পারবেন।
২. SASS এবং LESS এর মাধ্যমে কাস্টমাইজেশন
Materialize CSS এর মাধ্যমে আপনি SASS ব্যবহার করে আরো গভীর কাস্টমাইজেশন করতে পারবেন। Materialize এর প্রি-ডিফাইন্ড সেটিংস এবং থিমগুলোর মধ্যে থেকে আপনি কোনো কিছু পরিবর্তন করতে চাইলে, সেগুলোকে SASS variables এর মাধ্যমে কাস্টমাইজ করা যেতে পারে।
যেমন:
- Typography: ফন্ট ফ্যামিলি, সাইজ ইত্যাদি পরিবর্তন।
- Spacing: মার্জিন এবং প্যাডিং কাস্টমাইজ করা।
- Colors: কালারের স্যাচুরেশন, শেডস এবং হিউ পরিবর্তন করা।
৩. Custom CSS ব্যবহার করে কাস্টমাইজেশন
Materialize CSS এ custom CSS ব্যবহার করে বিভিন্ন উপাদান কাস্টমাইজ করা যায়। যেমন আপনি আপনার বাটন, navbar, বা অন্যান্য উপাদানের স্টাইল পরিবর্তন করতে পারেন।
উদাহরণস্বরূপ:
/* Custom button styles */
.custom-btn {
background-color: #4CAF50; /* Green */
border-radius: 25px;
padding: 10px 20px;
}
এখন, আপনি এই ক্লাসটি HTML এ ব্যবহার করতে পারবেন:
<button class="custom-btn">Custom Button</button>
৪. Flexbox এবং Grid কাস্টমাইজেশন
Materialize CSS এর Flexbox এবং Grid সিস্টেমগুলোও কাস্টমাইজ করা যায়। আপনি Flexbox ব্যবহার করে উপাদানগুলোর অবস্থান এবং সাইজ পরিবর্তন করতে পারেন, এবং Grid system এর মাধ্যমে কনটেন্টের লেআউট কাস্টমাইজ করা যায়।
এখানে একটি উদাহরণ:
<div class="row">
<div class="col s12 m6 l4">
<div class="card">
<div class="card-content">
<span class="card-title">Card Title</span>
<p>This is a custom card.</p>
</div>
</div>
</div>
</div>
এখানে col s12 m6 l4 ক্লাস দিয়ে আপনি বিভিন্ন স্ক্রীন সাইজে কনটেন্টের লেআউট কাস্টমাইজ করেছেন।
৫. অন্য থিম ব্যবহার করা
Materialize CSS এর কিছু থিম এবং স্কিন ব্যবহার করতে চাইলে, আপনি তাদের সোর্স কোড কাস্টমাইজ করতে পারেন অথবা themes এবং templates থেকে কিছু ডিজাইন সিলেক্ট করে আপনার প্রোজেক্টে ইন্টিগ্রেট করতে পারেন।
উপসংহার
Materialize CSS এর কালার থিম এবং কাস্টমাইজেশন ফিচারগুলো ওয়েব ডিজাইনকে আরও আকর্ষণীয় এবং ইউজার-বান্ধব করে তোলে। আপনি SASS, CSS, বা JavaScript ব্যবহার করে Materialize CSS এর উপাদানগুলোর রঙ, স্টাইল এবং ফিচার কাস্টমাইজ করতে পারবেন। এটি আপনাকে একটি ইউনিক এবং সৃজনশীল ডিজাইন তৈরি করার পূর্ণ স্বাধীনতা দেয়, যা আপনার ওয়েবসাইটের অভিজ্ঞতাকে আরও উন্নত করে তোলে।
Materialize CSS একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা Google Material Design এর নীতির ওপর ভিত্তি করে তৈরি। Materialize CSS এর একটি গুরুত্বপূর্ণ বৈশিষ্ট্য হলো এর বিল্ট-ইন কালার স্কিম, যা ওয়েব ডিজাইনকে একটি আধুনিক এবং আকর্ষণীয় লুক দেয়। Materialize CSS এর কালার স্কিম অনেক সহজে কাস্টমাইজ করা যায় এবং এটি আপনাকে একটি সুশৃখল এবং সমন্বিত ডিজাইন তৈরি করতে সহায়তা করে।
Materialize এর বিল্ট-ইন কালার স্কিম
Materialize CSS এর কালার স্কিমের মধ্যে প্রাথমিকভাবে প্রাথমিক (primary), দ্বিতীয়ক (secondary) এবং অ্যাকসেন্ট (accent) রঙের সেট রয়েছে, যা সরাসরি Material Design এর ধারণার সঙ্গে সামঞ্জস্যপূর্ণ। এই কালার স্কিমটি ডিজাইনারদের জন্য অত্যন্ত সহায়ক, কারণ এটি ওয়েবসাইট বা অ্যাপ্লিকেশনের রঙ নির্বাচন এবং কাস্টমাইজেশন সহজ করে দেয়।
কালার ক্লাস
Materialize CSS তে বিভিন্ন ধরনের কালার ক্লাস রয়েছে, যা সহজে বিভিন্ন UI উপাদানে (যেমন buttons, cards, navbar ইত্যাদি) রঙ প্রয়োগ করতে সাহায্য করে। এই রঙগুলো standard color palette এর মাধ্যমে নির্ধারিত হয়। কিছু প্রাথমিক কালার ক্লাসের উদাহরণ:
- Primary Colors:
.blue.red.green.yellow.purple.cyan.teal.orange
- Secondary Colors:
.light-blue.light-green.deep-orange.lime.pink.amber
- Accent Colors:
.indigo.blue-grey.deep-purple.brown
কালার ভ্যারিয়েন্টস
Materialize CSS প্রতিটি মূল রঙের জন্য বিভিন্ন ভ্যারিয়েন্ট প্রদান করে। এর মানে হলো আপনি একটি নির্দিষ্ট রঙের গা dark ় বা হালকা সংস্করণ নির্বাচন করতে পারেন। উদাহরণস্বরূপ, .blue এর জন্য আপনি .blue-darken-1, .blue-darken-2, .blue-lighten-1 ইত্যাদি ব্যবহার করতে পারেন।
উদাহরণ: Materialize CSS এ কালার ব্যবহার
নীচে একটি সাধারণ উদাহরণ দেখানো হচ্ছে, যেখানে Materialize এর বিল্ট-ইন কালার স্কিম ব্যবহার করা হয়েছে:
<div class="container">
<h1 class="blue-text">Welcome to My Website</h1>
<button class="btn red">Click Me</button>
<div class="card teal lighten-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>This is a card with a teal background.</p>
</div>
</div>
</div>
এখানে:
blue-textক্লাসটি blue রঙের টেক্সট প্রয়োগ করেছে।btn redক্লাসটি red রঙের একটি বাটন তৈরি করেছে।card teal lighten-1ক্লাসটি teal lighten-1 রঙের একটি কার্ড তৈরি করেছে।
Customization এবং কাস্টম রঙ
Materialize CSS তে বিল্ট-ইন কালার স্কিম ছাড়াও আপনি SASS ব্যবহার করে কাস্টম রঙ তৈরি করতে পারেন। Materialize এর variables ফাইলের মাধ্যমে আপনি প্রাথমিক রঙের মান পরিবর্তন করে আপনার নিজস্ব রঙ তৈরি করতে পারেন। এটি খুবই সহজ, এবং আপনাকে একটি ইউনিফর্ম লুক প্রদান করতে সাহায্য করে।
উপসংহার
Materialize CSS এর বিল্ট-ইন কালার স্কিম ডিজাইনকে দ্রুত এবং সুন্দরভাবে কাস্টমাইজ করার একটি শক্তিশালী টুল। এর প্রাথমিক, দ্বিতীয়ক এবং অ্যাকসেন্ট রঙের মাধ্যমে আপনি সহজেই আকর্ষণীয় এবং আধুনিক ইউজার ইন্টারফেস ডিজাইন করতে পারেন। Materialize এর কালার স্কিমটি Material Design এর নীতির সাথে সম্পূর্ণ সঙ্গতিপূর্ণ, যা ওয়েবসাইট বা অ্যাপ্লিকেশনের জন্য সুশৃঙ্খল এবং কার্যকরী রঙের ব্যবহারে সহায়ক।
Materialize CSS ফ্রেমওয়ার্কটি Google Material Design এর নীতির উপর ভিত্তি করে তৈরি, যেখানে রঙের একটি গুরুত্বপূর্ণ ভূমিকা রয়েছে। Materialize CSS আপনাকে আপনার ওয়েবসাইটের জন্য Primary এবং Secondary কালার কনফিগার করতে দেয়, যা ডিজাইনের স্টাইল ও থিমের অংশ হিসেবে ব্যবহৃত হয়। এই কনফিগারেশনটির মাধ্যমে আপনি আপনার ওয়েবসাইটের ভিজ্যুয়াল অ্যাপিল উন্নত করতে পারেন এবং ইউজার ইন্টারফেসকে আরও আকর্ষণীয় করতে পারবেন।
Primary এবং Secondary কালার কনফিগার করার প্রয়োজনীয়তা
Primary এবং Secondary কালার কনফিগার করার মাধ্যমে আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনের ডিজাইন সঙ্গতিপূর্ণ এবং আধুনিক দেখাবে। Primary color সাধারণত ওয়েবসাইটের মূল রঙ হিসেবে ব্যবহৃত হয়, যা প্রধান ইউজার ইন্টারফেস উপাদানগুলোর (যেমন: বাটন, লিঙ্ক, হেডার) জন্য ব্যবহৃত হয়। Secondary color সেটি থাকে যা প্রাথমিক রঙের সঙ্গে মিল রেখে বিভিন্ন সেকেন্ডারি উপাদান বা accent হিসেবে ব্যবহৃত হয়।
Materialize CSS তে Primary এবং Secondary কালার কনফিগার করা
Materialize CSS তে Primary এবং Secondary কালার কনফিগার করতে আপনি CSS এর মাধ্যমে সহজেই স্টাইল পরিবর্তন করতে পারেন। নিচে কিছু পদক্ষেপ দেওয়া হলো, যা আপনাকে Materialize এর প্রাথমিক এবং সেকেন্ডারি রঙ কনফিগার করতে সাহায্য করবে।
১. materialize.css ফাইলের মাধ্যমে কনফিগারেশন
Materialize CSS ফ্রেমওয়ার্কের মধ্যে আপনি সরাসরি SASS ফাইল ব্যবহার করে রঙ কনফিগার করতে পারেন। Materialize CSS এর মধ্যে primary এবং secondary রঙের জন্য প্রিপ্রোড কনফিগারেশন থাকে। এই কনফিগারেশন পরিবর্তন করার জন্য আপনাকে materialize.css ফাইলের মধ্যে থাকা SASS পরিবর্তন করতে হবে।
২. Customizing SASS (থিম কনফিগারেশন)
Materialize CSS তে থিম কনফিগার করতে sass ফাইল ব্যবহার করা হয়। আপনি যদি Materialize CSS এর থিম কাস্টমাইজ করতে চান, তাহলে আপনাকে SASS ফাইলের মধ্যে primary এবং secondary রঙ নির্ধারণ করতে হবে।
নিচে উদাহরণ হিসেবে একটি SASS কনফিগারেশন দেওয়া হলো:
// Primary and Secondary Colors
$primary-color: #009688; // Custom Primary Color
$secondary-color: #4caf50; // Custom Secondary Color
@import "materialize"; // Import Materialize Styles
এখানে, $primary-color এবং $secondary-color আপনি নিজের পছন্দমতো কালার কোড দিয়ে কাস্টমাইজ করতে পারেন।
৩. Materialize ক্লাসের মাধ্যমে স্টাইলিং
Materialize এর মধ্যে primary এবং secondary কালার নিয়ে বিভিন্ন ক্লাস রয়েছে, যেগুলি আপনি HTML উপাদানগুলোর সাথে যুক্ত করতে পারেন। এগুলোর মাধ্যমে আপনি সহজেই আপনার পেজের বিভিন্ন উপাদানকে সঠিক রঙে রূপান্তরিত করতে পারেন।
নিচে কিছু উদাহরণ দেওয়া হলো:
- Primary Color Button:
<a class="btn primary">Primary Button</a>
- Secondary Color Button:
<a class="btn secondary">Secondary Button</a>
- Primary Color Card:
<div class="card primary">
<div class="card-content">
<p>Primary Card</p>
</div>
</div>
- Secondary Color Card:
<div class="card secondary">
<div class="card-content">
<p>Secondary Card</p>
</div>
</div>
!important ব্যবহার
Materialize CSS এর সঠিক স্টাইল প্রয়োগের জন্য যদি কখনও CSS override প্রয়োজন হয়, তবে !important ক্লাসটি ব্যবহার করা যেতে পারে। যেমন:
.btn.primary {
background-color: #009688 !important;
}
.btn.secondary {
background-color: #4caf50 !important;
}
উপসংহার
Materialize CSS এর মাধ্যমে primary এবং secondary কালার কনফিগার করা একটি সহজ প্রক্রিয়া। আপনি SASS ফাইলের মাধ্যমে আপনার পছন্দের রঙ নির্ধারণ করে ওয়েবসাইটের ডিজাইনে সঙ্গতি এবং ঐক্য সৃষ্টি করতে পারেন। এর ফলে আপনার ওয়েবসাইট বা অ্যাপ্লিকেশন একটি আধুনিক, সুশৃঙ্খল এবং ইউজার-বান্ধব অভিজ্ঞতা প্রদান করবে। Materialize এর প্রি-স্টাইলড ক্লাস ব্যবহার করে, আপনি সহজেই উপাদানগুলোর রঙ পরিবর্তন করে আকর্ষণীয় ডিজাইন তৈরি করতে পারেন।
Materialize CSS ব্যবহারকারীদের জন্য সহজেই কাস্টম রঙ তৈরি করার সুবিধা প্রদান করে। এর মাধ্যমে আপনি আপনার ওয়েবসাইট বা ওয়েব অ্যাপ্লিকেশনের ডিজাইনে প্রয়োজনীয় রঙ কাস্টমাইজ করতে পারেন। Materialize CSS এর প্রি-ডিফাইন্ড রঙের স্কিম ব্যবহার করার পাশাপাশি আপনি আপনার নিজের কাস্টম রঙ সেট করতে পারেন। এখানে আমরা দেখব কিভাবে কাস্টম রঙ তৈরি এবং প্রয়োগ করা যায়।
Custom Color তৈরি করার জন্য উপায়
Materialize CSS এর রঙ কাস্টমাইজেশন করতে বেশ কিছু পদ্ধতি রয়েছে, যেগুলোর মধ্যে প্রধান হলো SASS ব্যবহার করে কাস্টম রঙ তৈরি করা। Materialize এর সাথে SASS ব্যবহার করলে আপনি খুব সহজেই রঙ পরিবর্তন করতে পারেন এবং আপনার ওয়েবসাইটের ডিজাইনে নতুন কাস্টম রঙ যোগ করতে পারবেন।
১. SASS ফাইল ব্যবহার করে কাস্টম রঙ তৈরি
Materialize CSS এর রঙ কাস্টমাইজ করতে হলে, আপনাকে প্রথমে SASS ফাইল ব্যবহার করতে হবে। Materialize CSS এর মধ্যে একটি SASS ফাইল সেটআপ রয়েছে যা আপনাকে রঙ কাস্টমাইজেশনের অনুমতি দেয়।
SASS সেটআপ
প্রথমে আপনাকে Materialize CSS এর SASS ফাইল ডাউনলোড করতে হবে। এরপর, নিচের মতো কোডে কাস্টম রঙ ব্যবহার করতে পারবেন।
// আপনার নিজের রঙ পরিবর্তন করুন
$primary-color: #FF5733; // মূল রঙ
$secondary-color: #4CAF50; // সেকেন্ডারি রঙ
// Materialize CSS এ এই রঙের পরিবর্তন
@import 'materialize'; // Materialize CSS এর SASS ফাইল
এখানে:
$primary-colorহলো মূল রঙ যা আপনার ডিজাইনে প্রধান হিসেবে ব্যবহৃত হবে।$secondary-colorহলো সেকেন্ডারি রঙ যা বিভিন্ন এলিমেন্টে ব্যবহৃত হবে।
এভাবে, আপনি নিজের প্রয়োজন অনুযায়ী রঙ কাস্টমাইজ করতে পারেন।
২. CSS ব্যবহার করে কাস্টম রঙ তৈরি
যদি আপনি SASS ব্যবহার না করতে চান, তবে আপনি সরাসরি CSS ফাইলেও কাস্টম রঙ যুক্ত করতে পারেন। উদাহরণস্বরূপ:
/* কাস্টম রঙ সেট করা */
.custom-primary-color {
background-color: #FF5733;
color: white;
}
.custom-secondary-color {
background-color: #4CAF50;
color: white;
}
এখানে:
.custom-primary-colorক্লাসটি মূল রঙ (#FF5733) ব্যবহার করে।.custom-secondary-colorক্লাসটি সেকেন্ডারি রঙ (#4CAF50) ব্যবহার করে।
৩. Materialize এর CSS ক্লাস কাস্টমাইজ করা
Materialize CSS এর অনেক প্রি-ডিফাইন্ড রঙ ক্লাস রয়েছে, যেগুলি আপনি কাস্টমাইজ করতে পারেন। Materialize CSS এর রঙ ক্লাসের মাধ্যমে আপনি বিভিন্ন উপাদান যেমন buttons, cards, navbar, modals ইত্যাদির রঙ পরিবর্তন করতে পারেন।
উদাহরণস্বরূপ, Materialize CSS এর button ক্লাসের রঙ কাস্টমাইজ করার জন্য:
/* কাস্টম বাটন রঙ */
.btn.custom-btn {
background-color: #FF5733; /* প্রধান রঙ */
color: white;
}
এখানে, .btn.custom-btn ক্লাস ব্যবহার করে আপনি কাস্টম বাটনের রঙ সেট করেছেন।
৪. Custom Color Utility ক্লাস ব্যবহার
Materialize CSS কিছু বিল্ট-ইন ক্লাস প্রদান করে যার মাধ্যমে আপনি সহজেই রঙ প্রয়োগ করতে পারেন। উদাহরণস্বরূপ, আপনি .red, .blue, .green ইত্যাদি ক্লাস ব্যবহার করতে পারেন। তবে, যদি আপনি কাস্টম রঙ ব্যবহার করতে চান, তাহলে উপরের পদ্ধতিগুলো অনুসরণ করতে হবে।
উপসংহার
Materialize CSS ব্যবহার করে আপনি সহজেই কাস্টম রঙ তৈরি এবং প্রয়োগ করতে পারেন। এর জন্য আপনি SASS ফাইল ব্যবহার করে রঙ কাস্টমাইজ করতে পারেন, অথবা সরাসরি CSS ফাইলের মাধ্যমে এটি করতে পারেন। এই কাস্টম রঙ প্রয়োগের মাধ্যমে আপনার ওয়েবসাইটের ডিজাইন আরো সৃজনশীল এবং আপনার ব্র্যান্ডের সাথে মানানসই হয়ে ওঠে। Materialize এর রঙ কাস্টমাইজেশন সুবিধা আপনার ডিজাইনকে আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করতে সাহায্য করে।
Materialize CSS একটি শক্তিশালী ফ্রেমওয়ার্ক যা Material Design এর নীতির উপর ভিত্তি করে তৈরি। এতে বিভিন্ন ধরনের color palette এবং text color ব্যবহার করার সুবিধা রয়েছে, যা ওয়েব ডিজাইনকে আকর্ষণীয় এবং ব্যবহারযোগ্য করে তোলে। Materialize CSS এর color palette ব্যবহার করে আপনি সহজে ওয়েবসাইটে রঙের সমন্বয় এবং পাঠের রঙ পরিবর্তন করতে পারেন।
Materialize এর Color Palette
Materialize CSS একটি প্রস্তুত color palette প্রদান করে, যা primary, secondary, এবং accent রঙের সেট থাকে। এই রঙগুলি আপনি বিভিন্ন উপাদান এবং স্টাইলিংয়ে ব্যবহার করতে পারেন।
Materialize এর প্রধান রঙের শ্রেণী:
Primary Colors:
প্রধান রঙ হিসেবে, Materialize CSS অনেক জনপ্রিয় রঙের সমন্বয় প্রদান করে, যেমন নীল, লাল, সবুজ ইত্যাদি।উদাহরণ:
- blue
- red
- green
- purple
- yellow
- teal
- Secondary Colors:
সেকেন্ডারি রঙগুলোর মাধ্যমে আপনি ওয়েবসাইটে বিভিন্ন স্টাইলিং প্রয়োগ করতে পারেন। এগুলি light এবং dark ভার্সনেও পাওয়া যায়। - Accent Colors:
এই রঙগুলি সাধারণত আপনার ডিজাইনের ছোট অংশে ব্যবহৃত হয়, যেমন বাটন, আইকন ইত্যাদিতে।
Color Utility Classes:
Materialize CSS তে কিছু utility classes রয়েছে, যার মাধ্যমে সহজেই রঙ পরিবর্তন করা যায়।
<!-- Primary color -->
<button class="btn blue">Blue Button</button>
<!-- Secondary color -->
<button class="btn red">Red Button</button>
<!-- Accent color -->
<button class="btn teal">Teal Button</button>
এখানে, btn হল Materialize এর স্টাইল ক্লাস এবং blue, red, teal হল রঙের নাম।
Text Color ব্যবহার করা
Text color ওয়েবসাইটের পাঠ্য অংশে রঙ পরিবর্তন করার জন্য ব্যবহৃত হয়। Materialize CSS এ বিভিন্ন text color ক্লাস রয়েছে, যা ব্যবহার করে আপনি টেক্সটের রঙ পরিবর্তন করতে পারবেন।
Text Color Utility Classes:
Materialize CSS এ টেক্সট রঙ পরিবর্তন করার জন্য কিছু প্রি-বিল্ট ক্লাস রয়েছে:
- .black: টেক্সট কালো রঙে পরিণত হয়।
- .white: টেক্সট সাদা রঙে পরিণত হয়।
- .grey: টেক্সট ধূসর রঙে পরিণত হয়।
- .blue: টেক্সট নীল রঙে পরিণত হয়।
- .red: টেক্সট লাল রঙে পরিণত হয়।
উদাহরণ:
<p class="blue">This is blue text.</p>
<p class="red">This is red text.</p>
<p class="grey">This is grey text.</p>
এভাবে আপনি সহজেই টেক্সটের রঙ পরিবর্তন করতে পারেন।
Text Color কাস্টমাইজেশন:
Materialize CSS এ যদি আপনি custom color ব্যবহার করতে চান, তবে আপনি CSS এর মাধ্যমে inline styles বা external CSS ব্যবহার করতে পারেন।
<p style="color: #ff5722;">This is custom orange text.</p>
এখানে, আমরা #ff5722 রঙ কোড ব্যবহার করেছি যা অরেঞ্জ রঙের টেক্সট দেখাবে।
Materialize Color এবং Text Color এর কাস্টমাইজেশন
Materialize CSS এ আপনি SASS ফাইল ব্যবহার করে কাস্টম রঙ সেট করতে পারেন, যদি আপনি এর ডিফল্ট রঙ প্যালেট পরিবর্তন করতে চান।
// Override Materialize Primary Color
$primary-color: #009688;
// Override Materialize Secondary Color
$secondary-color: #ff5722;
এইভাবে আপনি Materialize এর color palette কাস্টমাইজ করতে পারেন এবং ওয়েবসাইটের রঙগুলিকে আপনার ব্র্যান্ড বা ডিজাইন অনুযায়ী পরিবর্তন করতে পারবেন।
উপসংহার
Materialize CSS এর color palette এবং text color ক্লাসগুলির মাধ্যমে আপনি সহজেই ওয়েবসাইটের রঙ এবং পাঠ্যের রঙ কাস্টমাইজ করতে পারেন। এটি একটি দ্রুত এবং সহজ উপায় প্রদান করে যাতে আপনি সুন্দর এবং ব্যবহারযোগ্য ডিজাইন তৈরি করতে পারেন। Materialize এর প্রি-বিল্ট রঙগুলি ব্যবহার করে আপনি দ্রুত ডিজাইন তৈরি করতে পারবেন, এবং SASS এর মাধ্যমে আপনি রঙের কাস্টমাইজেশন করতে পারবেন।
Read more
