CSS 渐变
CSS 渐变使您可以显示两种或多种指定颜色之间的平滑过渡。
CSS দুই ধরণের গ্রেডিএন্ট নির্ধারণ করে:
- লাইনার গ্রেডিএন্ট（নীচে/উপরে/ডানে/বামে/কোণের দিকে）
- রেডিয়াল গ্রেডিএন্ট（কেন্দ্র দ্বারা নির্ধারিত）
CSS লাইনার গ্রেডিএন্ট
লাইনার গ্রেডিএন্ট তৈরির জন্য, আপনাকে কমপক্ষে দুটি কালামাপক নির্দিষ্ট করতে হবে। কালামাপক হল এমন কালারা যা আপনি সমস্ত ক্ষেত্রে শব্দ প্রদর্শন করতে চান। আপনি আরও শুরুপদ্ধতি এবং দিশা (বা কোণ) এবং গ্রেডিএন্ট প্রভাব নির্ধারণ করতে পারেন。
语法
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
লাইনার গ্রেডিএন্ট - উপর থেকে নীচে (ডিফল্ট)
উপর থেকে শুরু করে লাইনার গ্রেডিএন্ট দেখানো হল। এটি লাল থেকে হলুদ পর্যন্ত হয়:
ইনস্ট্যান্স
#grad {
background-image: linear-gradient(red, yellow);
}
线性渐变 - 从左到右
下面的例子展示了从左开始的线性渐变。它从红色开始，过渡到黄色：
ইনস্ট্যান্স
#grad {
background-image: linear-gradient(to right, red , yellow);
}
线性渐变 - 对角线
您可以通过指定水平和垂直起始位置来实现对角渐变。
下面的例子展示了从左上角开始（到右下角）的线性渐变。它从红色开始，过渡到黄色：
ইনস্ট্যান্স
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}
使用角度
如果希望对渐变角度做更多的控制，您可以定义一个角度，来取代预定义的方向（向下、向上、向右、向左、向右下等等）。值 0deg 等于向上（to top）。值 90deg 等于向右（to right）。值 180deg 等于向下（to bottom）。
语法
background-image: linear-gradient(angle, color-stop1, color-stop2);
这个角度指定水平线和渐变线之间的角度。
下面的例子展示了如何在线性渐变上使用角度：
ইনস্ট্যান্স
#grad {
background-image: linear-gradient(-90deg, red, yellow);
}
একাধিক রঙ অনুক্রম ব্যবহার করা
নিচের উদাহরণ দেখায় দুটির বেশি রঙ অনুক্রম নির্দিষ্ট করে লাইনার অনুক্রম (উপর থেকে নীচ) তৈরি করা যায়:
ইনস্ট্যান্স
#grad {
background-image: linear-gradient(red, yellow, green);
}
নিচের উদাহরণ দেখায় কিভাবে নির্মল রঙ এবং কোনও লেখা ব্যবহার করে লাইনার অনুক্রম (ডান থেকে বাম) তৈরি করা যায়:
ইনস্ট্যান্স
#grad {
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
স্পষ্টতা ব্যবহার করা
CSS এসকেল রঙ অনুক্রম সহযোগেও স্পষ্টতা সহযোগেও কাজ করে, এটা রঙ অনুক্রম প্রভাব তৈরি করতেও ব্যবহার করা যায়。
রেঙ্গিনির স্পষ্টতা যোগ করতে, আমরা rgba() ফাংশন ব্যবহার করি যেটি রঙগুলোর লেবেল নির্দিষ্ট করে। rgba() ফাংশনের শেষ প্রামাণ্যমূলক পরামাণ্য 0 থেকে 1 এর মধ্যে থাকতে হয়, যা রঙের স্পষ্টতা নির্দিষ্ট করে: 0 মানে সম্পূর্ণ স্পষ্ট, 1 মানে সম্পূর্ণ রঙ (স্পষ্ট নয়)।
নিচের উদাহরণটি ডান দিকের লাইনার গ্রেডেন্টকে দেখায়।এটি সম্পূর্ণ হলে সম্পূর্ণ হলে অস্পষ্ট, এবং পরে সম্পূর্ণ লাল হয়:
ইনস্ট্যান্স
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
পুনরাবৃত্ত লাইনার গ্রেডেন্ট
repeating-linear-gradient() পুনরাবৃত্ত লাইনার গ্রেডেন্ট প্রতিযোগিতা ফাংশন ব্যবহার করা হয়:
ইনস্ট্যান্স
পুনরাবৃত্ত লাইনার গ্রেডেন্ট:
#grad {
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
