CSS গ্রেডিয়েন্ট

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

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

এই টিউটোরিয়ালটি কয়েকটি উদাহরণ সহ আলোচনা করবে, কিভাবে CSS এ লিনিয়ার এবং রেডিয়াল গ্রেডিয়েন্ট তৈরি করা যায়। এই টিউটোরিয়ালের শেষে, আপনি সিএসএস-এ গ্রেডিয়েন্ট তৈরিতে একজন বিশেষজ্ঞ হয়ে উঠবেন।

CSS গ্রেডিয়েন্ট

ডিজাইনে, গ্রেডিয়েন্ট হল দুই বা ততোধিক রঙের মধ্যে পরিবর্তন। গ্রেডিয়েন্টগুলি সাধারণ রূপান্তর হতে পারে, তবে এতে কোণ, একাধিক রঙ অন্তর্ভুক্ত থাকতে পারে এবং বিভিন্ন উপায়ে স্টাইল করা যেতে পারে।

CSS-এ দুই ধরনের গ্রেডিয়েন্ট সমর্থিত। এইগুলো:

• রৈখিক গ্রেডিয়েন্ট
• রেডিয়াল গ্রেডিয়েন্ট

রৈখিক গ্রেডিয়েন্টগুলি উপরে থেকে নীচে বা বাম থেকে ডানে দুই বা ততোধিক রঙের মধ্যে একটি রূপান্তর তৈরি করে। রেডিয়াল গ্রেডিয়েন্ট হল রঙের রূপান্তর যা একটি মূল বিন্দু থেকে বিকিরণ করে, যেমন একটি আকৃতি।

CSS-এ, পটভূমি CSS বৈশিষ্ট্য ব্যবহার করে গ্রেডিয়েন্টগুলি সংজ্ঞায়িত করা হয়। এই বৈশিষ্ট্যটি একটি ওয়েব উপাদানের জন্য একটি পটভূমি তৈরি করতে ব্যবহৃত হয় এবং পটভূমি-রঙ এবং ব্যাকগ্রাউন্ড-ইমেজ সহ CSS পটভূমি বৈশিষ্ট্যগুলির জন্য সংক্ষিপ্ত হয়।

এখানে ব্যাকগ্রাউন্ড প্রপার্টি ব্যবহারের জন্য সিনট্যাক্স রয়েছে:

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।

background: typeOfBackground;

এখন আমরা CSS-এ গ্রেডিয়েন্ট তৈরি শুরু করতে প্রস্তুত। চলুন শুরু করা যাক লিনিয়ার গ্রেডিয়েন্ট নিয়ে আলোচনা করে।

CSS লিনিয়ার গ্রেডিয়েন্ট

লিনিয়ার গ্রেডিয়েন্ট হল একটি সরল রেখা বরাবর দুই বা ততোধিক রঙের মধ্যে পরিবর্তন।

উদাহরণস্বরূপ, একটি রৈখিক গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড বাম থেকে ডানে, উপরে থেকে নীচে, বা একটি উপাদানের নীচে বাম থেকে উপরের ডান কোণে প্রদর্শিত হতে পারে। ডিফল্টরূপে, একটি গ্রেডিয়েন্ট উপরে থেকে নীচে প্রদর্শিত হবে, তবে আপনি আপনার গ্রেডিয়েন্টের জন্য একটি কাস্টম দিকনির্দেশ নির্দিষ্ট করতে পারেন।

রৈখিক গ্রেডিয়েন্টে রঙের স্টপ রয়েছে, যেগুলি আপনি আপনার ট্রানজিশনে অন্তর্ভুক্ত করতে চান। আপনি একটি রৈখিক গ্রেডিয়েন্টের সাথে কতগুলি রঙ নির্দিষ্ট করেছেন তার কোনও সীমা নেই।

CSS-এ লিনিয়ার গ্রেডিয়েন্ট ফাংশনের জন্য এখানে সিনট্যাক্স রয়েছে:

background: linear-gradient (direction, color1, color2 ...);

এই সিনট্যাক্সে, দিক নির্দেশ করে গ্রেডিয়েন্টের দিক, এবং color1, রঙ 2, এবং তাই আমাদের গ্রেডিয়েন্টে রঙের স্টপগুলিকে প্রতিনিধিত্ব করে।

আসুন CSS-এ লিনিয়ার গ্রেডিয়েন্টের কয়েকটি উদাহরণ অন্বেষণ করি।

টপ থেকে বটম গ্রেডিয়েন্ট

ধরুন আমরা একটি গ্রেডিয়েন্ট তৈরি করতে চাই যা একটি বাক্সের উপর থেকে নীচে প্রদর্শিত হয়। এটি linear-gradient() দিয়ে তৈরি ডিফল্ট গ্রেডিয়েন্ট সম্পত্তি

আমাদের গ্রেডিয়েন্ট রং #00C9FF (হালকা নীল) থেকে শুরু হওয়া উচিত এবং রং #92FE9D (হালকা সবুজ) এ শেষ হওয়া উচিত। এখানে কোডটি আমরা আমাদের গ্রেডিয়েন্ট তৈরি করতে ব্যবহার করতে পারি:

.gradient {
	background: linear-gradient(#00C9FF, #92FE9D);
}

আমাদের কোড ফিরে আসে:

বাম থেকে ডান গ্রেডিয়েন্ট

অন্যদিকে, আমরা একটি গ্রেডিয়েন্ট তৈরি করতে চাই যা বাম থেকে ডানে একটি রঙ পরিবর্তন দেখায়। আমরা নিম্নলিখিত কোড ব্যবহার করে তা করতে পারি:

.gradient {
	background: linear-gradient(to right, #00C9FF, #92FE9D);
}

আমাদের কোড ফিরে আসে:

বাম থেকে ডানে আমাদের দুটি রঙের মধ্যে আমাদের গ্রেডিয়েন্ট রূপান্তর। এই রূপান্তরটি ঘটে কারণ আমরা to left উল্লেখ করেছি আমাদের গ্রেডিয়েন্টের দিক হিসাবে। বিকল্পভাবে, যদি আমরা আমাদের গ্রেডিয়েন্টকে ডান থেকে বামে দেখতে চাই, তাহলে আমরা to left ব্যবহার করতে পারতাম। to right এর পরিবর্তে আমাদের কোডে।

ডায়াগোনাল গ্রেডিয়েন্ট

আপনি linear-gradient() ব্যবহার করে তির্যক গ্রেডিয়েন্ট তৈরি করতে পারেন একটি গ্রেডিয়েন্টের জন্য অনুভূমিক এবং উল্লম্ব প্রারম্ভিক বিন্দু নির্দিষ্ট করে সম্পত্তি।

আপনি যদি একটি গ্রেডিয়েন্ট তৈরি করতে চান যা নীচে ডানদিকে স্থানান্তরিত হয়, আপনি to bottom right উল্লেখ করে তা করতে পারেন। আপনার গ্রেডিয়েন্ট হিসাবে। অথবা আপনি যদি এমন একটি গ্রেডিয়েন্ট চান যা উপরের বামে স্থানান্তরিত হয়, আপনি to top left ব্যবহার করতে পারেন আপনার গ্রেডিয়েন্ট হিসাবে।

ধরুন আমরা একটি গ্রেডিয়েন্ট তৈরি করতে চাই যা আমাদের বাক্সের উপরের ডানদিকে স্থানান্তরিত হয়। আমরা এই কোডটি ব্যবহার করে তা করতে পারি:

.gradient {
	background: linear-gradient(to top right, #00C9FF, #92FE9D);
}

আমাদের কোড ফিরে আসে:

আমাদের গ্রেডিয়েন্ট নীচে বাম দিকে হালকা নীল রঙ দিয়ে শুরু হয়, তারপর বাক্সের উপরের ডানদিকে সবুজ রঙে রূপান্তরিত হয়৷

কালার স্টপস

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

ধরুন আমরা একটি গ্রেডিয়েন্ট তৈরি করতে চাই যা রং #00D2FF (হালকা নীল) থেকে #92FE9D (হালকা সবুজ), #3A47D5 (গাঢ় নীল) এ রূপান্তরিত হয়। এই পরিবর্তন বাম থেকে ডানে ঘটতে হবে। আমরা এই কোড ব্যবহার করে এই গ্রেডিয়েন্ট তৈরি করতে পারি:

.gradient {
background: linear-gradient(to right, #00D2FF, #00C9FF, #3A47D5);
}

আমাদের কোড ফিরে আসে:

এই উদাহরণে, বাম থেকে ডানে তিনটি ভিন্ন রঙের মধ্যে আমাদের গ্রেডিয়েন্ট রূপান্তর।

কোণ

আমাদের পূর্ববর্তী উদাহরণগুলিতে, আমরা আমাদের গ্রেডিয়েন্ট তৈরি করতে পূর্বনির্ধারিত দিকনির্দেশ (যেমন উপরে ডান থেকে নীচে বাম) ব্যবহার করেছি। আমরা যদি আমাদের গ্রেডিয়েন্টগুলি কীভাবে প্রদর্শিত হয় তার উপর আরও নিয়ন্ত্রণ চাই, আমরা কাস্টম কোণ ব্যবহার করতে পারি।

কোণগুলিকে একটি রৈখিক গ্রেডিয়েন্টের প্রথম মান হিসাবে নির্দিষ্ট করা উচিত, যেখানে আপনি একটি দিক নির্দেশ করবেন।

ধরুন আপনি 120-ডিগ্রি কোণে #00C9FF এবং #92FE9D এর মধ্যে একটি পরিবর্তন তৈরি করতে চেয়েছিলেন। আপনি এই কোড ব্যবহার করে তা করতে পারেন:

.gradient {
	background: linear-gradient(120deg, #00C9FF, #92FE9D);
}

আমাদের কোড ফিরে আসে:

আমাদের উদাহরণে, আমরা একটি গ্রেডিয়েন্ট নির্দিষ্ট করেছি যা বাম থেকে ডানে 120 ডিগ্রি কোণে নীল এবং সবুজের মধ্যে রূপান্তরিত হয়। যদি আমরা এমন একটি গ্রেডিয়েন্ট তৈরি করতে চাই যা 40 ডিগ্রি কোণে রূপান্তরিত হয়, উদাহরণস্বরূপ, আমরা 40deg নির্দিষ্ট করতে পারি আমাদের কোণ হিসাবে।

স্বচ্ছ গ্রেডিয়েন্ট

RGBA রং ব্যবহার করে CSS গ্রেডিয়েন্ট কমবেশি স্বচ্ছ করা যেতে পারে।

RGBA রঙগুলি রং উপস্থাপনের RGB (লাল, সবুজ, নীল) পদ্ধতি ব্যবহার করে। যাইহোক, RGBA রঙে আলফা নামক একটি অতিরিক্ত প্যারামিটার রয়েছে যা একটি রঙের স্বচ্ছতা নির্ধারণ করে। আলফা প্যারামিটারের মান 0 এবং 1 এর মধ্যে হওয়া উচিত (মান যত কম হবে, রঙ তত বেশি স্বচ্ছ হবে)।

ধরুন আমরা #00C9FF এবং #92FE9D রঙের মধ্যে বাম থেকে ডানে একটি গ্রেডিয়েন্ট তৈরি করতে চাই। আমাদের প্রথম রঙটি 50% স্বচ্ছ হওয়া উচিত এবং আমাদের চূড়ান্ত রঙটি 30% স্বচ্ছ হওয়া উচিত। আমরা এই গ্রেডিয়েন্ট তৈরি করতে নিম্নলিখিত কোড ব্যবহার করতে পারি:

.gradient {
	background: linear-gradient(to right, rgba(0,201,255, 0.5), rgba(146,254,157, 0.7));
}

আমাদের কোড ফিরে আসে:

যদি আমরা এটিকে আমাদের পূর্ববর্তী গ্রেডিয়েন্টের সাথে তুলনা করি, আমরা দেখতে পাব আমাদের রঙগুলি আরও স্বচ্ছ। এই উদাহরণে, আমরা হেক্স মান ব্যবহার করার পরিবর্তে আমাদের রং নির্দিষ্ট করতে RGBA মান ব্যবহার করেছি।

আমরা আমাদের প্রথম রঙের (নীল) জন্য আলফা মান হিসাবে 0.5 নির্দিষ্ট করেছি, যা রঙকে 50% স্বচ্ছ করে তোলে। আমরা আমাদের দ্বিতীয় রঙের (সবুজ) জন্য আলফা মান হিসাবে 0.3 নির্দিষ্ট করেছি, যা রঙকে 70% স্বচ্ছ করে তোলে (মনে রাখবেন, আলফার মান যত কম হবে, রঙ তত বেশি স্বচ্ছ হবে)।

হার্ড লাইন

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

একটি হার্ড লাইন নির্দিষ্ট করতে, আপনার নিম্নলিখিত সিনট্যাক্স ব্যবহার করা উচিত:

linear-gradient(direction, hard-line, colors);

সুতরাং, আপনি যদি একটি হার্ড লাইন পেতে চান যা একটি কালো এবং সবুজ গ্রেডিয়েন্টের মধ্য দিয়ে অর্ধেক পথে ঘটে, আপনি black 50% ব্যবহার করতে পারেন , green 50% একটি হার্ড লাইন হিসাবে। অথবা যদি আপনি একটি হার্ড লাইন পেতে চান যা একটি নীল এবং গোলাপী গ্রেডিয়েন্টের মাধ্যমে 70% প্রদর্শিত হয়, আপনি blue 70% ব্যবহার করতে পারেন , pink 30% একটি হার্ড লাইন হিসাবে।

গ্রেডিয়েন্টের হাফ-ওয়ে পয়েন্টে একটি কালো হার্ড লাইন সহ গ্রেডিয়েন্টের একটি উদাহরণ এখানে দেওয়া হল:

.gradient {
	background: linear-gradient(to right, #00C9FF 50%, #92FE9D 50%);
}

আমাদের কোড ফিরে আসে:

এই চিত্রটিতে আপনি দেখতে পাচ্ছেন যে, আমাদের গ্রেডিয়েন্টের অর্ধেক পথ, একটি হার্ড স্টপ অবস্থান তৈরি করা হয়েছে।

CSS রেডিয়াল গ্রেডিয়েন্ট

রেডিয়াল গ্রেডিয়েন্ট হল দুটি বা ততোধিক রঙের মধ্যে রূপান্তর যা একটি মূল বিন্দু থেকে বিকিরণ করে। একটি রৈখিক গ্রেডিয়েন্টের মূল বিন্দু হয় একটি উপবৃত্ত বা একটি বৃত্ত।

একটি রেডিয়াল গ্রেডিয়েন্টে কমপক্ষে দুটি রঙের স্টপ থাকতে হবে এবং আপনার গ্রেডিয়েন্টে কতগুলি রঙের স্টপ থাকতে পারে তার কোনো সীমা নেই। এখানে একটি রেডিয়াল গ্রেডিয়েন্টের জন্য সিনট্যাক্স রয়েছে:

background: radial-gradient(shape size position, start color, next colors …, final color);

আসুন এই সিনট্যাক্সটি ভেঙে দেওয়া যাক:

• আকৃতি এটি রেডিয়াল বস্তুর আকৃতি (ডিফল্টরূপে, এটি একটি উপবৃত্ত)।
• আকার আপনার রেডিয়াল বস্তুর আকারের আকার (ডিফল্টরূপে, এটি সবচেয়ে দূরের কোণ)।
• অবস্থানে রেডিয়াল বস্তুর অবস্থান (ডিফল্টরূপে, এটি কেন্দ্র)।
• শুরু রঙ গ্রেডিয়েন্টের প্রথম রঙ।
• পরবর্তী রং … সূচনা এবং চূড়ান্ত রঙের মধ্যে রং।
• চূড়ান্ত রঙ গ্রেডিয়েন্টের শেষ রঙ।

এখন আমরা সিএসএস-এ একটি রেডিয়াল গ্রেডিয়েন্ট তৈরি করার জন্য সিনট্যাক্স জানি, আমরা কয়েকটি উদাহরণ অন্বেষণ করতে পারি।

ডিফল্ট রেডিয়াল গ্রেডিয়েন্ট

ধরুন আমরা একটি রেডিয়াল গ্রেডিয়েন্ট তৈরি করতে চাই যা একটি উপবৃত্ত এবং #4B6CB7 এবং #D9E7FF এর মধ্যে স্থানান্তর। আমরা এই কোডটি ব্যবহার করে তা করতে পারি:

.gradient {
	background: radial-gradient(#4B6CB7, #D9E7FF);
}

আমাদের কোড ফিরে আসে:

আমাদের উদাহরণে, আমরা দুটি রং ব্যবহার করে একটি রেডিয়াল গ্রেডিয়েন্ট তৈরি করেছি এবং একটি গ্রেডিয়েন্টের জন্য ডিফল্ট মান। সুতরাং, যেহেতু আমরা ডিফল্ট মান ব্যবহার করেছি, আমাদের গ্রেডিয়েন্ট সমানভাবে ব্যবধানে, আমাদের রেডিয়াল বস্তুর অবস্থান বাক্সের কেন্দ্রে এবং আমাদের রেডিয়াল বস্তুটি একটি উপবৃত্ত।

বিভিন্ন রঙের স্টপ

আপনি যখন রেডিয়াল গ্রেডিয়েন্টের সাথে কাজ করছেন, আপনি আপনার নিজস্ব রঙের স্টপগুলি নির্দিষ্ট করতে পারেন। এর মানে হল যে আপনার গ্রেডিয়েন্টের বিভিন্ন রঙের মধ্যে রূপান্তরটি ডিফল্ট মসৃণ পরিবর্তনের পরিবর্তে গ্রেডিয়েন্টের একটি নির্দিষ্ট অবস্থানে ঘটবে।

ধরুন আমরা একটি রেডিয়াল গ্রেডিয়েন্ট তৈরি করতে চেয়েছিলাম যা #4B6CB7 থেকে #D9E7FF থেকে #9198E5 তে রূপান্তরিত হয়। প্রথম রঙটি গ্রেডিয়েন্টের 25%, মাঝের রঙটি গ্রেডিয়েন্টের 50% এবং শেষ রঙটি গ্রেডিয়েন্টের 25% জন্য অ্যাকাউন্ট হওয়া উচিত।

আমরা নিম্নলিখিত কোড ব্যবহার করে এই গ্রেডিয়েন্ট তৈরি করতে পারি:

.gradient {
	background: radial-gradient(#4B6CB7 25%, #D9E7FF 50%, #9198E5 25%);
}

আমাদের কোড ফিরে আসে:

আমরা আমাদের কোডে নির্দিষ্ট করা পয়েন্টে তিনটি রঙের মধ্যে আমাদের গ্রেডিয়েন্ট ট্রানজিশন। এই প্রভাবটি সম্পন্ন করার জন্য, আমরা প্রথমে আমাদের গ্রেডিয়েন্টে যে রঙটি অন্তর্ভুক্ত করতে চেয়েছিলাম তা নির্দিষ্ট করেছি, তারপরে আমরা উল্লেখ করেছি যে রঙের জন্য কতটি গ্রেডিয়েন্ট থাকা উচিত। সুতরাং, উদাহরণস্বরূপ, আমাদের মধ্যম রঙ, #D9E7FF, আমাদের গ্রেডিয়েন্টের 50% দখল করে।

বিভিন্ন আকার

ডিফল্টরূপে, রেডিয়াল গ্রেডিয়েন্টের জন্য সেট করা আকৃতি একটি উপবৃত্ত। যাইহোক, আপনি আপনার গ্রেডিয়েন্টকে একটি বৃত্তও করতে পারেন। আপনি আকৃতির মান circle নির্দিষ্ট করে তা করতে পারেন আপনার গ্রেডিয়েন্টের জন্য।

ধরুন আপনি একটি গ্রেডিয়েন্ট তৈরি করতে চেয়েছিলেন যা #4B6CB7 এবং #D9E7FF এর মধ্যে রূপান্তরিত হয়। আপনার রেডিয়াল গ্রেডিয়েন্টের কেন্দ্র বিন্দু একটি বৃত্ত হওয়া উচিত। আপনি নিম্নলিখিত কোড ব্যবহার করে এই গ্রেডিয়েন্ট তৈরি করতে পারেন:

.gradient {
	background: radial-gradient(circle, #4B6CB7, #D9E7FF);
}

আমাদের কোড ফিরে আসে:

আমাদের উদাহরণে, আমরা #4B6CB7 এবং #D9E7FF রঙের মধ্যে একটি রেডিয়াল গ্রেডিয়েন্ট তৈরি করেছি। আমাদের রেডিয়াল গ্রেডিয়েন্টের কেন্দ্রীয় বিন্দু একটি উপবৃত্তের পরিবর্তে একটি বৃত্ত।

রেডিয়াল গ্রেডিয়েন্ট অবস্থান

একটি রেডিয়াল গ্রেডিয়েন্টের কেন্দ্র বস্তুর অবস্থান পরিবর্তন করা যেতে পারে। একটি রেডিয়াল গ্রেডিয়েন্টে কেন্দ্রীয় বস্তুর অবস্থান নির্ধারণ করতে ব্যবহৃত চারটি কীওয়ার্ড রয়েছে। এইগুলো:

• সবচেয়ে কাছের কোণে
• দূরতম-কোণে
• সবচেয়ে কাছাকাছি
• দূরতম-পাশে

ধরুন আমরা একটি বৃত্তাকার রেডিয়াল গ্রেডিয়েন্ট তৈরি করতে চেয়েছিলাম যা 50px 50px অবস্থানে সবচেয়ে দূরতম কোণে উপস্থিত হয়। আমরা এই কোডটি ব্যবহার করে তা করতে পারি:

.gradient {
	background: radial-gradient(circle farthest-corner at 50px 50px, #4B6CB7, #D9E7FF);
}

আমাদের কোড ফিরে আসে:

এই উদাহরণে, আমাদের রেডিয়াল গ্রেডিয়েন্ট সেন্টার পয়েন্টটি 50px 50px অবস্থানে সবচেয়ে দূরতম কোণে উপস্থিত হয়। আপনি দেখতে পাচ্ছেন যে আমাদের কেন্দ্র বিন্দুটি উপরের বাম কোণে রয়েছে, যা দেখায় যে আমাদের গ্রেডিয়েন্ট উদ্দেশ্য অনুযায়ী কাজ করছে। তারপর, আমাদের গ্রেডিয়েন্ট পরবর্তী রঙে বাহ্যিক রূপান্তরিত হয় যা আমরা আমাদের কোডে নির্দিষ্ট করেছি।

উপসংহার

CSS-এ দুই বা ততোধিক রঙের মধ্যে ট্রানজিশন তৈরি করতে গ্রেডিয়েন্ট ব্যবহার করা হয়। CSS-এ ব্যবহৃত দুটি প্রধান ধরনের গ্রেডিয়েন্ট হল লিনিয়ার গ্রেডিয়েন্ট এবং রেডিয়াল গ্রেডিয়েন্ট।

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