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
