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

নতুনদের জন্য CSS কালার টিউটোরিয়াল

2

রঙ ওয়েব পেজটিকে অর্থবহ করে তোলে। পৃষ্ঠাটি বিভিন্ন রং ছাড়া সরল এবং বিরক্তিকর দেখাবে। আপনি একটি ওয়েবপৃষ্ঠায় CSS দিয়ে দুই ধরনের রঙের বৈশিষ্ট্য ব্যবহার করতে পারেন। একটি হল ফোরগ্রাউন্ড কালার (সাধারণত রঙ হিসেবে) টেক্সট বা ফন্টের রঙ পরিবর্তন করা। দ্বিতীয় হল বিভিন্ন HTML উপাদানে ব্যাকগ্রাউন্ড কালার যোগ করার জন্য ব্যাকগ্রাউন্ড কালার । এই টিউটোরিয়ালে আসুন কিভাবে বিভিন্ন বৈশিষ্ট্যের সাথে CSS রঙের বৈশিষ্ট্যগুলি ব্যবহার করতে হয় তা অন্বেষণ করি।

CSS এ টেক্সট কালার পরিবর্তন করা

অনুচ্ছেদ উপাদানটির রঙ পরিবর্তনের একটি উদাহরণ নেওয়া যাক

লাল করতে। আপনি CSS এ নীচের স্টাইল সংজ্ঞা দিয়ে এটি করতে পারেন:

p { color: red; }

এটি ব্রাউজারে নিম্নলিখিত ফলাফল তৈরি করবে:

এটি একটি লাল রঙের অনুচ্ছেদ।

CSS এ ব্যাকগ্রাউন্ড কালার পরিবর্তন করা

আপনি নীচের CSS স্টাইল সংজ্ঞা ব্যবহার করে ব্যাকগ্রাউন্ড কালার যেকোন HTML উপাদান পরিবর্তন করতে পারেন:

p { background-color:red;color:white; }

এটি নিম্নলিখিত ফলাফল উত্পাদন করবে:

এটি একটি লাল রঙের অনুচ্ছেদ।

মনে রাখবেন আমরা সাদা টেক্সট রঙ ব্যবহার করেছি যাতে এটি লাল পটভূমির সাথে স্পষ্টভাবে পাঠযোগ্য।

CSS- এ রং নির্ধারণ করা

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

  • লাল, সবুজ বা সাদা রঙের নাম
  • Rgb (20,50,200) এর মত লাল, সবুজ এবং নীল দশমিক মানের সমন্বয় ব্যবহার করা
  • Ffffff এর মত লাল, সবুজ এবং নীল রঙের জন্য হেক্সাডেসিমাল মান ব্যবহার করা

  • Rgb (10%, 80%, 25%) এর মত লাল, নীল এবং সবুজ রঙের শতকরা মান
  • এইচএসএল (0,80%, 70%) এর মতো রঙ, সম্পৃক্তি এবং হালকা ব্যবহার
  • Rgba (0,0,0,0.8) মত RGB মানগুলিতে অস্বচ্ছতা যোগ করা
  • HSL এর মত HSL মানগুলিতে অস্বচ্ছতা যোগ করা (200,75%90%0.6)

CSS এ রঙের নাম ব্যবহার করা

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

CSS এ RGB কালার ব্যবহার করা

RGB পদ্ধতিতে 0 থেকে 255 পর্যন্ত দশমিক সংখ্যা দিয়ে লাল, নীল এবং সবুজ রং নির্দেশিত হয়। উদাহরণস্বরূপ, টমেটোর রঙ rgb (255,99,71) হিসাবে নির্দেশিত হয়।

<div style="background-color: rgb(255,99,71);"> This text will have a tomato color background with the RGB value as rgb(255,99,71). </div>

এটি ব্রাউজারে নিম্নলিখিত ফলাফল তৈরি করবে:

এই টেক্সটের RGB ভ্যালু সহ rgb (255,99,71) সহ টমেটো কালার ব্যাকগ্রাউন্ড থাকবে।

আপনি তিনটি বেস কালার ভ্যালু পরিবর্তনের মাধ্যমে 16 মিলিয়নেরও বেশি রঙ তৈরি করতে পারেন। যাইহোক, সঠিক টেক্সট কালার ব্যবহার করতে ভুলবেন না যাতে এটি পড়তে সহজ হয়। আপনার ওয়েবসাইটের জন্য সমতল UI রঙের মতো ওয়েব নিরাপদ রং নির্বাচন করা সবচেয়ে ভালো বিকল্প ।

হেক্সাডেসিমাল কালার ভ্যালু ব্যবহার করা

টমেটোর রঙ rgb (255,99,71) FF6347 হিসাবে সমতুল্য হেক্সাডেসিমাল ভ্যালুতে রূপান্তরিত হতে পারে। এটি 255 এফএফ, 99 থেকে 63 এবং 71 থেকে 47 তে রূপান্তর

আপনি নীচের মত CSS এ হেক্সাডেসিমাল রঙের মান ব্যবহার করতে পারেন:

<div style="background-color: #FF6347; padding: 15px; color: #FFFFFF"> This text will have a tomato color background with the hex code value as #FF6347. Remember to use # symbol in front the hex code value. Also both small case #ff6347 and capital case #FF6347 will produce the same result. </div>

"প্যাডিং: 15px;" এর ভিতরে টেক্সট কন্টেন্টে প্যাডিং যোগ করতে ব্যবহৃত হয়

উপাদান এটি ব্রাউজারে নিম্নলিখিত ফলাফল তৈরি করবে:

এই টেক্সটটিতে #FF6347 হিসাবে হেক্স কোড মান সহ একটি টমেটো রঙের পটভূমি থাকবে। হেক্স কোড মান সামনে # প্রতীক ব্যবহার করতে মনে রাখবেন এবং টেক্সট রঙ #FFFFFF হিসাবে ব্যবহার করুন। এছাড়াও, ছোট কেস #ff6347 এবং ক্যাপিটাল কেস #FF6347 উভয়ই একই ফলাফল দেবে।

শতকরা হিসাবে RGB মান ব্যবহার করা

0 থেকে 255 পর্যন্ত দশমিক সংখ্যার পরিবর্তে, আপনি লাল, সবুজ এবং নীল রঙের শতাংশ মান উল্লেখ করতে পারেন।

<div style="background-color: rgb(20%,69%,74%); padding: 15px; color: #FFFFFF"> This text will have a tomato color background with the hex code value as #FF6347. Remember to use # symbol in front the hex code value. Also both small case #ff6347 and capital case #FF6347 will produce the same result. </div>

এটি নিম্নলিখিত ফলাফল উত্পাদন করবে:

এই টেক্সটে #FF6347 হেক্স কোড ভ্যালু সহ টমেটো কালার ব্যাকগ্রাউন্ড থাকবে। হেক্স কোড মান সামনে # চিহ্ন ব্যবহার করতে ভুলবেন না। এছাড়াও ছোট কেস #ff6347 এবং ক্যাপিটাল কেস #FF6347 একই ফলাফল দেবে।

আরজিবি রঙে অস্বচ্ছতা যোগ করা

CSS3- এ, আপনার রঙের জন্য আলফা বা অস্বচ্ছতা মান উল্লেখ করার ক্ষমতা আছে। চতুর্থ মান হিসেবে 0.0 থেকে 1.0 এর মধ্যে দশমিক সংখ্যা হিসেবে আলফা মান যোগ করা হয়। মান 0 সম্পূর্ণরূপে স্বচ্ছ প্রতিনিধিত্ব করে যা 0% অস্বচ্ছতা এবং 1.0 100% অস্বচ্ছতার সাথে অস্বচ্ছ নির্দেশ করে।

নীচে 20% অস্বচ্ছতার সাথে আরজিবি রঙে আলফা ভ্যালু ব্যবহারের সিনট্যাক্স রয়েছে:

<div style="background-color: rgba(255,0,0,0.2);"> Content Here...... </div>

আসুন লাল রঙকে আরও বেশি বোধগম্য করতে 20%, 40%, 60%, 800%এবং 100%অস্বচ্ছতার মান দিয়ে দেখাই।

নতুনদের জন্য CSS কালার টিউটোরিয়াল

মনে রাখবেন, "অস্পষ্টতা" নামে একটি পৃথক CSS সম্পত্তি রয়েছে যা একই উদ্দেশ্যে ব্যবহার করা যেতে পারে। অস্বচ্ছতার সুবিধা হল যে এটি ছবিতেও ব্যবহার করা যেতে পারে। কিন্তু এটি সব ব্রাউজার দ্বারা সমর্থিত নয়। নীচে আপনি কীভাবে অস্বচ্ছতা সম্পত্তি আলাদাভাবে ব্যবহার করতে পারেন:

p { background-color: rgb(255,0,0); opacity: 0.5; }

CSS এ HSL কালার ব্যবহার করা

এইচএসএল পদ্ধতি ব্যবহার করে একটি রঙ সংজ্ঞায়িত করার জন্য CSS3 এর অতিরিক্ত বিকল্প রয়েছে। এইচএসএল মানে রঙ, স্যাচুরেশন, লাইটনেস এবং এর তিনটি মান রয়েছে:

  • হিউ হল একটি ডিগ্রী যা একটি রঙের চাকায় নির্দেশিত হয় যার রেফারেন্স 0 = লাল, 120 = সবুজ, 240 হল নীল।
  • স্যাচুরেশন হল একটি রঙের ধূসর রঙের শতকরা মান।
  • লাইটনেস হল হালকা বা অন্ধকারের শতকরা মান যেখানে 0% অন্ধকার (কালো) এবং 100% হালকা (সাদা)।

সিএসএস -এ এইচএসএল রঙ দিয়ে সবুজ পটভূমি তৈরির একটি উদাহরণ নিচে দেওয়া হল:

<div style="background-color: hsl(120,100%,50%,0.2);"> Content Here...... </div>

অস্বচ্ছতা সহ এইচএসএল

আরজিবিএর মতো, আপনি চতুর্থ মান হিসাবে এইচএসএল রঙে অস্বচ্ছতা যুক্ত করতে পারেন। অস্বচ্ছতা বা আলফা দশমিক সংখ্যায় 0.0 থেকে 1.0 এর মধ্যে নির্দেশিত হয় যেখানে 0.0 সম্পূর্ণ স্বচ্ছ এবং 1.0 অস্বচ্ছ নির্দেশ করে। CSS এ HSLA ডিক্লারেশন ব্যবহার করে 50% অস্বচ্ছতার সাথে সবুজ রঙ তৈরির একটি উদাহরণ নিচে দেওয়া হল।

<div style="background-color: hsla(120,100%,50%,0.6);"> Content Here...... </div>

নিম্নলিখিত বাক্সগুলি বিভিন্ন আলফা স্তরে সবুজ রঙ প্রদর্শন করে:

CSS- এ রং ব্যবহারের সম্পূর্ণ উদাহরণ

এখন পর্যন্ত আমরা CSS- এ রং নির্ধারণের বিভিন্ন উপায় দেখেছি। ফোরগ্রাউন্ড এবং ব্যাকগ্রাউন্ড কালার তৈরির একটি পূর্ণদৈর্ঘ্য উদাহরণ দেখানো যাক:

<!-- This is CSS --> <style> div {background-color:tomato; padding:10px;} p {color: rgba(50,90,20,0.8);} p {color: #ffffff;} /* This will be the final paragraph color */ h1 {color: yellow;} div > h1 {color:#008754;} /* This will be the final h1 color */ h2 {background:hsla(10,20%,30%,0.8);} h2 {color:#ffffff;} em {color: #4500aa;} p > em {background-color: rgba(60,43,78,0.7); color:yellow;} </style> <!-- This is HTML --> <div> <!-- Background Tomato --> <h1>This is a H1 heading.</h1> <!-- Color #008754 --> <p>Here is a paragraph element.</p> <!-- Color #ffffff --> <h2>This is a H2 heading.</h2> <!-- Background hsla(10,20%,30%,0.8) --> <p>Here is another paragraph. <!-- Color #ffffff --> <em>This is emphasized text inside paragraph.</em> <!-- Background rgba(60,43,78,0.7) Color yellow --> </p> <em>This is emphasized text outside paragraph.</em> <!-- Color #4500aa --> </div>

চূড়ান্ত ফলাফল নীচের মত দেখানো হবে:

এখানে একটি অনুচ্ছেদ উপাদান।

এটি একটি H2 শিরোনাম।

এখানে আরেকটি অনুচ্ছেদ।
এটি অনুচ্ছেদের ভিতরে জোর দেওয়া পাঠ্য।
এটি অনুচ্ছেদের বাইরে পাঠ্যকে জোর দেওয়া হয়েছে।

  • যদি আপনি একই উপাদানের জন্য CSS- এ একাধিক রঙ সংজ্ঞায়িত করেন তবে সর্বশেষটি পূর্ববর্তী সমস্ত ঘোষণার চেয়ে অগ্রাধিকার পাবে। উপরের উদাহরণে, অনুচ্ছেদে এই কারণে #ffffff রঙ থাকবে।
  • নির্দিষ্ট স্টাইলগুলি পিতামাতার বা জেনেরিক স্টাইলের চেয়ে অগ্রাধিকার পাবে। H1 রঙ হবে #008754 এবং হলুদ নয়।
  • আপনি পটভূমির রঙ নির্ধারণ করতে ব্যাকগ্রাউন্ড শর্টহ্যান্ড প্রপার্টিও ব্যবহার করতে পারেন।

যদি পটভূমির রঙ উল্লেখ না করা হয় তবে উপাদানটির স্বচ্ছ পটভূমি থাকবে। যেহেতু ব্রাউজারগুলি সাদা পটভূমি ব্যবহার করে তাই আপনি দেখতে পাবেন ওয়েবের বেশিরভাগ পৃষ্ঠায় সাদা পটভূমি রয়েছে। প্রকৃতপক্ষে পৃষ্ঠার উপাদান সাদা পটভূমি দিয়ে ঘোষণা করা হয়েছে যাতে সঠিক প্রদর্শন নিশ্চিত করা যায় কারণ ব্যবহারকারীরা ব্রাউজারের পটভূমির রঙ পরিবর্তন করতে পারে।

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

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