ফাংশন repeating-linear-gradient

ফাংশন repeating-linear-gradient একটি পুনরাবৃত্তিমূলক রৈখিক গ্রেডিয়েন্ট নির্দিষ্ট করে। এর মানে হল যে আমরা গ্রেডিয়েন্টের একটি নির্দিষ্ট প্যাটার্ন নির্দিষ্ট করি, উদাহরণস্বরূপ, 0px থেকে 10px - লাল থেকে নীল রঙের গ্রেডিয়েন্ট এবং এই গ্রেডিয়েন্টটি সম্পূর্ণ ব্লক জুড়ে পুনরাবৃত্তি হবে: 0px থেকে 10px, 10px থেকে 20px, 20px থেকে 30px এবং এভাবেই চলতে থাকবে।

এই ফাংশনটি সেইসব বৈশিষ্ট্যের জন্য প্রয়োগ করা হয় যা ব্যাকগ্রাউন্ড ইমেজ নির্দিষ্ট করে: background, background-image বা বর্ডার ইমেজ: border-image, background-image-source.

সিনট্যাক্স

সিলেক্টর {
	background: repeating-linear-gradient([দিক], রং1 আকার1, রং2 আকার2...);
}

মানসমূহ

মান	বর্ণনা
দিক	যেকোনো কোণের একক-এ গ্রেডিয়েন্টের একটি নির্দিষ্ট দিক নির্দিষ্ট করে অথবা কীওয়ার্ড দ্বারা `top`, `left`, `right`, `bottom` বা তাদের সংমিশ্রণে। শব্দের ক্রম গুরুত্বপূর্ণ নয়। প্যারামিটারটি ঐচ্ছিক: যদি এটি না লেখা হয়, গ্রেডিয়েন্ট উপর থেকে নিচে যাবে। দিকের আগে `to` শব্দটি বসে।
কোণ	যেকোনো কোণের একক-এ কোণ। এটি ধনাত্মক বা ঋণাত্মক হতে পারে। প্যারামিটারটি ঐচ্ছিক। একই সাথে কোণ, বা দিক নির্দিষ্ট করা যেতে পারে (বা কিছুই না)।
রং1	যেকোনো রঙের একক-এ গ্রেডিয়েন্টের প্রারম্ভিক রং।
রং2	যেকোনো রঙের একক-এ গ্রেডিয়েন্টের শেষ রং।
আকার	গ্রেডিয়েন্টের একটি নির্দিষ্ট রঙের বিস্তার নির্দিষ্ট করে যেকোনো আকারের একক-এ।

উদাহরণ . সবচেয়ে সহজ ভ্যারিয়েন্ট

গ্রেডিয়েন্টটি এইরকম দেখাবে: 0px থেকে 20px পর্যন্ত খাঁটি লাল রং, 20px থেকে 40px - লাল থেকে নীল রঙের গ্রেডিয়েন্ট। এবং এটি উপর থেকে নিচে পুনরাবৃত্তি হবে (এটাই হল পুনরাবৃত্তিমূলক গ্রেডিয়েন্ট):

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(red 20px, blue 40px);
	width: 400px;
	height: 200px;
}

উদাহরণ . স্পষ্ট রং

গ্রেডিয়েন্টটি এইরকম দেখাবে: 0px থেকে 20px পর্যন্ত খাঁটি লাল রং, 20px থেকে 40px - খাঁটি নীল রং (কৌশলটি হল যে দ্বিতীয় রংটি সেখানেই শুরু হয় যেখানে প্রথমটি শেষ হয়)। এবং এটি উপর থেকে নিচে পুনরাবৃত্তি হবে:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

উদাহরণ . দিক পরিবর্তন করা যাক

এখন গ্রেডিয়েন্টের দিক হবে ডান থেকে বামে:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(to left, red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

উদাহরণ . ডিগ্রীতে দিক

দিক হিসেবে ডিগ্রীতে একটি কোণ নির্দিষ্ট করি:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

উদাহরণ . ঋণাত্মক মান

দিকটি একটি ঋণাত্মক মান দ্বারা নির্দিষ্ট করি:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(-45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

আরও দেখুন

ফাংশন repeating-radial-gradient,
যা একটি পুনরাবৃত্তিমূলক রেডিয়াল গ্রেডিয়েন্ট তৈরি করে
ফাংশন linear-gradient,
যা একটি রৈখিক গ্রেডিয়েন্ট তৈরি করে
ফাংশন radial-gradient,
যা একটি রেডিয়াল গ্রেডিয়েন্ট তৈরি করে