2,424 পড়া

2023 সালে CSS কালার ফাংশন - শুরু করার জন্য আপনার যা কিছু জানা দরকার

দ্বারা Rahul9m2023/02/24

অতিদীর্ঘ; পড়তে

সিএসএস কালার ফাংশন হল একটি সাধারণ কালার কোডের পরিবর্তে গাণিতিক ফাংশন ব্যবহার করে সিএসএস-এ রং নির্দিষ্ট করার একটি উপায়। ফাংশনগুলি আপনার স্টাইলশীটে ব্যবহৃত রঙগুলির উপর আরও নিয়ন্ত্রণ এবং নমনীয়তা প্রদান করে। রঙের ফাংশনগুলির সাহায্যে, আপনি রঙের রঙ, স্যাচুরেশন, হালকাতা এবং অস্বচ্ছতা সামঞ্জস্য করতে পারেন এবং এমনকি দুই বা ততোধিক রঙ একসাথে মিশ্রিত করতে পারেন।

featured image - 2023 সালে CSS কালার ফাংশন - শুরু করার জন্য আপনার যা কিছু জানা দরকার

আরে, সহকর্মী বিকাশকারীরা! আজ, আমরা CSS কালার ফাংশনের জগতে ডুব দিতে যাচ্ছি।

আপনি একটি ওয়েব পৃষ্ঠায় একটি উপাদানের রঙ পরিবর্তন করতে CSS ব্যবহার করতে পারেন, কিন্তু আপনি কি কখনও CSS রঙ ফাংশন শুনেছেন? যদি না হয়, আপনার সিট বেল্ট শক্ত করুন কারণ আপনি কিছু নতুন এবং সুপার দরকারী শিখতে চলেছেন!

চলুন শুরু করা যাক একটি উদ্ধৃতি দিয়ে যা আমি গতকাল পড়েছিলাম গুডরিডস .

রঙ হল কীবোর্ড, চোখ হল সুর, আত্মা হল পিয়ানো যার অনেকগুলি স্ট্রিং। শিল্পী হল সেই হাত যা খেলে, এক বা অন্য কী স্পর্শ করে, আত্মায় কম্পন সৃষ্টি করে।

CSS কালার ফাংশন ঠিক কি?

সিএসএস কালার ফাংশন হল একটি সাধারণ কালার কোডের পরিবর্তে গাণিতিক ফাংশন ব্যবহার করে সিএসএস-এ রং নির্দিষ্ট করার একটি উপায়।

ফাংশনগুলি আপনার স্টাইলশীটে ব্যবহৃত রঙগুলির উপর আরও নিয়ন্ত্রণ এবং নমনীয়তা প্রদান করে।

রঙ ফাংশনগুলির সাহায্যে, আপনি একটি রঙের আভা , স্যাচুরেশন , হালকাতা এবং অস্বচ্ছতা সামঞ্জস্য করতে পারেন এবং এমনকি দুটি বা ততোধিক রঙ একসাথে মিশ্রিত করতে পারেন।

একাধিক সিএসএস ফাংশন উপলব্ধ রয়েছে, আসুন কয়েকটি দেখি:

rgb() - এটি তিনটি মান নেয়, যথাক্রমে লাল, সবুজ এবং নীল প্রতিনিধিত্ব করে এবং একটি রঙ প্রদান করে। মানগুলি 0 থেকে 255 পর্যন্ত হতে পারে৷ উদাহরণ: color: rgb(255, 0, 0) লাল রঙে পরিণত হয়৷
rgba() - এটি rgb() এর অনুরূপ, তবে এটি আপনাকে রঙের অস্বচ্ছতা সেট করতে দেয়। চতুর্থ মান, আলফা, 0 থেকে 1 পর্যন্ত হতে পারে। উদাহরণ: color: rgba(255, 0, 0, 0.5) একটি আধা-স্বচ্ছ লাল রঙে পরিণত হয়।
hsl() - এটি তিনটি মান নেয়, রঙ, স্যাচুরেশন এবং হালকাতা উপস্থাপন করে এবং একটি রঙ প্রদান করে। উদাহরণ: color: hsl(0, 100%, 50%) একটি লাল রঙের ফলাফল।
hsla() - এটি hsl() এর অনুরূপ, তবে এটি আপনাকে রঙের অস্বচ্ছতা সেট করতে দেয়। উদাহরণ: color: hsla(0, 100%, 50%, 0.5) একটি আধা-স্বচ্ছ লাল রঙে পরিণত হয়।
mix() - এটি আপনাকে একটি ঐচ্ছিক ওজন পরামিতি সহ দুটি রঙ একসাথে মিশ্রিত করতে দেয়। উদাহরণ: color: mix(red, blue) বেগুনি রঙের ছায়ায় পরিণত হয়।

আসুন তাদের সম্পর্কে বিস্তারিত জেনে নিই।

আরজিবি()

ঠিক আছে, চলুন CSS কালার ফাংশনের জগতে আমাদের যাত্রা চালিয়ে যাওয়া যাক এবং RGB ফাংশনে ডুব দেওয়া যাক। আরজিবি ফাংশন হল CSS-এ সবচেয়ে বেশি ব্যবহৃত কালার ফাংশনগুলির মধ্যে একটি, এবং সঙ্গত কারণে!

এটি বোঝা সহজ এবং আপনি আপনার ওয়েবসাইটে যে রঙগুলি ব্যবহার করেন তার উপর আপনাকে অনেক নিয়ন্ত্রণ দেয়৷

RGB ফাংশন তিনটি মান নেয়, প্রতিটি এর তীব্রতার প্রতিনিধিত্ব করে

লাল

সবুজ, এবং

যথাক্রমে নীল।

এই মানগুলি 0 থেকে 255 পর্যন্ত হতে পারে৷ লাল, সবুজ এবং নীল রঙের বিভিন্ন তীব্রতা মিশ্রিত করে, আপনি আপনার পছন্দ মতো রঙ তৈরি করতে পারেন৷

উদাহরণ:

লাল রঙের জন্য - rgb(255, 0, 0)
সবুজ রঙের জন্য - rgb(0, 255, 0)
নীল রঙের জন্য - rgb(0, 0, 255)

 div { background-color: rgb(0, 255, 0); } /*this sets all th div element with green color*/

HSL()

ঠিক আছে, চলুন CSS-এর আরেকটি দরকারী কালার ফাংশনে চলে যাই - HSL ফাংশন!

এইচএসএল ফাংশনটি আরজিবি ফাংশনের অনুরূপ, তবে লাল, সবুজ এবং নীলের জন্য মান ব্যবহার করার পরিবর্তে, এটি এর জন্য মান ব্যবহার করে:

রঙ

স্যাচুরেশন, এবং

হালকাতা

এটি বুঝতে এবং ব্যবহার করা একটু সহজ করে তোলে, বিশেষ করে যারা নতুন তাদের জন্য রঙ তত্ত্ব .

এইচএসএল ফাংশনের হিউ মান 0 থেকে 360 পর্যন্ত মান সহ রঙের প্রতিনিধিত্ব করে।

0-এর বর্ণের মান লাল, 120-এর একটি বর্ণের মান সবুজকে প্রতিনিধিত্ব করে এবং 240-এর একটি রঙের মান নীলকে প্রতিনিধিত্ব করে।
HSL ফাংশনে স্যাচুরেশন মান 0% থেকে 100% পর্যন্ত মান সহ রঙের তীব্রতা উপস্থাপন করে। 100% স্যাচুরেশন মান মানে রঙটি সম্পূর্ণভাবে স্যাচুরেটেড, যখন 0% মান মানে রঙটি ধূসর।
এইচএসএল ফাংশনে হালকাতার মান 0% থেকে 100% পর্যন্ত মান সহ রঙের উজ্জ্বলতা উপস্থাপন করে। 50% হালকাতার মান মানে রঙটি একটি নিরপেক্ষ ধূসর , যখন 100% মান মানে রঙটি সম্পূর্ণ হালকা, এবং 0% মান মানে রঙটি সম্পূর্ণ গাঢ় ।

 div { background-color: hsl(120, 100%, 50%); } /* All `<div>` elements to green, fully saturated, and with a neutral lightness. */

RGBA()

ঠিক আছে বন্ধুরা, আসুন আরজিবিএ ফাংশন সম্পর্কে কথা বলি!

আরজিবিএ ফাংশনটি আরজিবি ফাংশনের মতো তবে একটি অতিরিক্ত বোনাস সহ:

এটি আপনাকে একটি রঙের অস্বচ্ছতা নির্দিষ্ট করতে দেয়।

আপনি যখন আপনার উপাদানগুলির জন্য একটি স্বচ্ছ প্রভাব তৈরি করতে চান, যেমন আপনি যখন একটি পটভূমির রঙ আংশিকভাবে স্বচ্ছ করতে চান তখন এটি কার্যকর হতে পারে।

RGBA ফাংশন চারটি মান নেয়, প্রথম তিনটি হল RGB ফাংশনের মতো লাল, সবুজ এবং নীল মান।

চতুর্থ মান হল আলফা মান , যা রঙের অস্বচ্ছতাকে প্রতিনিধিত্ব করে এবং 0 থেকে 1 পর্যন্ত পরিসীমা।

0 এর মান মানে রঙটি সম্পূর্ণ স্বচ্ছ, যখন 1 মান মানে রঙটি সম্পূর্ণ অস্বচ্ছ।

 div { color: rgba(0, 0, 255, 0.75); } /* all `<div>` elements to blue with an opacity of 75%. */

HSLA()

ঠিক আছে বন্ধুরা, আসুন HSLA ফাংশন সম্পর্কে কথা বলি!

HSLA ফাংশনটি এইচএসএল ফাংশনের মতোই, তবে একটি অতিরিক্ত বোনাস সহ: এটি আপনাকে একটি রঙের অস্বচ্ছতা নির্দিষ্ট করতে দেয়।

আপনি যখন আপনার উপাদানগুলির জন্য একটি স্বচ্ছ প্রভাব তৈরি করতে চান, যেমন আপনি যখন একটি পটভূমির রঙ আংশিকভাবে স্বচ্ছ করতে চান তখন এটি কার্যকর হতে পারে।

HSLA ফাংশনটি চারটি মান নেয়, প্রথম তিনটি হল এইচএসএল ফাংশনের মতোই রঙ, স্যাচুরেশন এবং হালকাতার মান।

চতুর্থ মান হল আলফা মান, যা রঙের অস্বচ্ছতাকে প্রতিনিধিত্ব করে এবং 0 থেকে 1 পর্যন্ত পরিসীমা।

0 এর মান মানে রঙটি সম্পূর্ণ স্বচ্ছ, যখন 1 মান মানে রঙটি সম্পূর্ণ অস্বচ্ছ।

 div { color: hsla(240, 100%, 50%, 0.75); } /* all `<div>` elements to blue with an opacity of 75%. */

এটি সবই একই A মানে আলফা যেটা আমরা (0.75 এর আলফা মান) উভয় ফাংশনে ট্রান্সলুসেন্ট ইফেক্টের জন্য, সহজ।

কাস্টম বৈশিষ্ট্য বা CSS ভেরিয়েবল

এখন, CSS-এর কাস্টম বৈশিষ্ট্য সম্পর্কে কথা বলা যাক, CSS ভেরিয়েবল নামেও পরিচিত। কাস্টম বৈশিষ্ট্যগুলি আপনাকে মানগুলি সঞ্চয় করতে দেয় যা আপনি আপনার স্টাইলশীট জুড়ে পুনরায় ব্যবহার করতে পারেন, এটি আপনার শৈলী বজায় রাখা সহজ করে এবং আপনার কোডকে আরও বেশি করে তোলে মডুলার এবং নমনীয়।

একটি কাস্টম প্রপার্টি তৈরি করতে, আপনি কেবল -- সিনট্যাক্স ব্যবহার করুন প্রপার্টির নামের পরে, একটি মান অনুসরণ করুন

 :root { --primary-color: blue; }

এখানে, আমরা blue মান দিয়ে --primary-color নামে একটি কাস্টম প্রপার্টি তৈরি করেছি।

এখন, এই কাস্টম প্রপার্টি ব্যবহার করতে, আপনি আপনার CSS সিলেক্টরে var() ফাংশন ব্যবহার করতে পারেন।

 button { background-color: var(--primary-color); }

উপরের কোডটি সমস্ত <button> উপাদানের পটভূমির রঙ নীল করে দেয় কারণ আমরা কাস্টম প্রপার্টি --primary-color ব্যবহার করছি।

আমরা যদি --primary-color এর মান পরিবর্তন করতে চাই, তাহলে আমাদের এটিকে শুধুমাত্র একটি জায়গায় পরিবর্তন করতে হবে, এবং এটি স্বয়ংক্রিয়ভাবে সমগ্র জুড়ে আপডেট হবে। স্টাইলশীট .

কাস্টম বৈশিষ্ট্যগুলি ব্যবহার করার সুবিধাগুলির মধ্যে রয়েছে:

কোড পুনঃব্যবহার : আপনার স্টাইলশীট জুড়ে মানগুলি পুনরাবৃত্তি করার পরিবর্তে, আপনি কাস্টম বৈশিষ্ট্যগুলিতে মানগুলি সংরক্ষণ করতে পারেন এবং প্রয়োজন অনুসারে সেগুলি পুনরায় ব্যবহার করতে পারেন।

রক্ষণাবেক্ষণযোগ্যতা : কাস্টম বৈশিষ্ট্যগুলি আপনার শৈলীগুলি বজায় রাখা সহজ করে তোলে কারণ আপনাকে শুধুমাত্র এক জায়গায় মান আপডেট করতে হবে।

নমনীয়তা : কাস্টম বৈশিষ্ট্য আপনাকে একাধিক নির্বাচকের পরিবর্তন না করে এক জায়গায় মান পরিবর্তন করে আপনার সাইটের চেহারা পরিবর্তন করতে দেয়।

CSS কালার ফাংশন সেরা অনুশীলন

ঠিক আছে, আসুন আপনার প্রকল্পগুলিতে CSS রঙ ফাংশন ব্যবহার করার জন্য সেরা অনুশীলন সম্পর্কে কথা বলি।

এই টিপস আপনাকে একটি সামঞ্জস্যপূর্ণ এবং চাক্ষুষরূপে আকর্ষণীয় তৈরি করতে সাহায্য করবে রঙ্গের পাত আপনার ওয়েবসাইটের জন্য, সেইসাথে নিশ্চিত করুন যে আপনার রঙগুলি পাঠযোগ্য এবং সমস্ত ব্যবহারকারীর কাছে অ্যাক্সেসযোগ্য।

আপনার ওয়েবসাইটের জন্য একটি রঙ প্যালেট তৈরি করা:

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

আপনি আপনার রং সংজ্ঞায়িত করতে RGB, HSL, RGBA, বা HSLA ফাংশন ব্যবহার করতে পারেন।

শুরু করার জন্য একটি ভাল জায়গা হল একটি প্রধান রঙ বেছে নেওয়া, এবং তারপর এটিকে পরিপূরক করার জন্য 2-3টি উচ্চারণ রং বেছে নিন।

 :root { --primary-color: hsl(180, 100%, 50%); --secondary-color: hsl(120, 100%, 50%); --tertiary-color: hsl(60, 100%, 50%); }

বৈসাদৃশ্য এবং অনুক্রমের জন্য CSS কালার ফাংশন ব্যবহার করা:

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

আপনি নির্দিষ্ট উপাদান, যেমন বোতাম বা লিঙ্কগুলিতে মনোযোগ আকর্ষণ করতে রঙ ব্যবহার করতে পারেন।

 body { background-color: var(--secondary-color); color: var(--primary-color); } a { color: var(--tertiary-color); }

পঠনযোগ্যতা এবং অ্যাক্সেসযোগ্যতার জন্য রঙ ফাংশন পরীক্ষা করা:

অবশেষে, পঠনযোগ্যতা এবং অ্যাক্সেসযোগ্যতার জন্য আপনার রঙগুলি পরীক্ষা করা গুরুত্বপূর্ণ। নিশ্চিত করুন যে আপনার রঙে পর্যাপ্ত বৈসাদৃশ্য রয়েছে যাতে সহজেই পাঠযোগ্য হয়, বিশেষ করে রঙের দৃষ্টি ঘাটতি সহ ব্যবহারকারীদের জন্য।

আপনি আপনার রঙের বৈসাদৃশ্য পরীক্ষা করতে অনলাইন টুল ব্যবহার করতে পারেন এবং নিশ্চিত করুন যে তারা অ্যাক্সেসিবিলিটি মান পূরণ করে।

WebAIM কনট্রাস্ট চেকার

মুজলি কালার প্যালেট জেনারেটর

বিশেষজ্ঞ - কনট্রাস্ট চেকার

কুলার্স - প্যালেট জেনারেটর

ক্যানভা প্যালেট জেনারেটর

CSS কালার ফাংশন উন্নত টেকনিক

এই বিভাগে, আমরা CSS কালার ফাংশন সহ কিছু উন্নত কৌশলে ডুব দেব।

ডায়নামিক কালার স্কিমের জন্য CSS ভেরিয়েবল ব্যবহার করা

আপনি কি কখনও কোডের কয়েকটি লাইন দিয়ে আপনার ওয়েবসাইটের রঙের স্কিম পরিবর্তন করতে চেয়েছেন? CSS ভেরিয়েবলের সাথে, কাস্টম বৈশিষ্ট্য হিসাবেও পরিচিত, আপনি করতে পারেন!

আপনি আপনার রঙ প্যালেট সংরক্ষণ করতে ভেরিয়েবলের একটি সেট তৈরি করতে পারেন এবং তারপর আপনার স্টাইলশীট জুড়ে ব্যবহার করতে পারেন।

এইভাবে, আপনি যদি কখনও আপনার রঙের স্কিম পরিবর্তন করতে চান তবে আপনাকে শুধুমাত্র আপনার ভেরিয়েবলের মানগুলি আপডেট করতে হবে।

 :root { --primary-color: #00b0ff; --secondary-color: #00cc99; } h1 { color: var(--primary-color); } button { background-color: var(--secondary-color); }

এই উদাহরণে, আমরা আমাদের প্রাথমিক এবং মাধ্যমিক রঙের জন্য দুটি কাস্টম বৈশিষ্ট্য তৈরি করেছি। তারপরে আমরা আমাদের h1 এবং button উপাদানগুলিকে স্টাইল করতে সেগুলি ব্যবহার করি।

CSS কালার ফাংশন দিয়ে অ্যানিমেশন তৈরি করা

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

 button { background-color: hsl(120, 100%, 50%); transition: background-color 0.5s ease; } button:hover { background-color: hsl(240, 100%, 50%); }

এখানে, আমরা আমাদের বোতামের ডিফল্ট ব্যাকগ্রাউন্ডের রঙকে একটি সবুজ রঙে সেট করেছি ( hsl(120, 100%, 50%) এবং বোতামটি ঘোরালে রঙ পরিবর্তন করার জন্য একটি পরিবর্তন যোগ করেছি।

হোভার স্টেটের জন্য আমরা রঙটিকে নীল রঙে পরিবর্তন করেছি ( hsl(240, 100%, 50%) ।

গ্রেডিয়েন্ট এবং স্বচ্ছতার জন্য CSS কালার ফাংশন ব্যবহার করা

আরেকটি মজার জিনিস যা আপনি CSS রঙ ফাংশন দিয়ে করতে পারেন তা হল গ্রেডিয়েন্ট এবং স্বচ্ছতা তৈরি করা। আপনি আধা-স্বচ্ছ রং তৈরি করতে RGBA এবং HSLA রঙ ফাংশন ব্যবহার করতে পারেন এবং তারপর গ্রেডিয়েন্ট তৈরি করতে তাদের একত্রিত করতে পারেন।

 .gradient { background: linear-gradient(to right, rgba(255, 0, 0, 0.5), hsla(120, 100%, 50%, 0.5)); }

এখানে, আমরা একটি লিনিয়ার গ্রেডিয়েন্ট তৈরি করেছি যা একটি লাল RGBA রঙ থেকে একটি সবুজ HSLA রঙে যায়। উভয় রঙের একটি আলফা মান 0.5, তাদের আধা-স্বচ্ছ করে তোলে।

এবং সেখানে আপনি এটা আছে!

CSS কালার ফাংশন সহ কিছু উন্নত কৌশল। এই কৌশলগুলির সাথে পরীক্ষা-নিরীক্ষা করে মজা নিন এবং আপনার সৃজনশীলতাকে বন্য হতে দিন!

সম্পদ