ফাংশন linear-gradient
ফাংশন linear-gradient একটি রৈখিক
গ্রেডিয়েন্ট সেট করে। যে বৈশিষ্ট্যগুলি
ব্যাকগ্রাউন্ড ইমেজ সেট করে তার সাথে প্রয়োগ করা হয়: background,
background-image
বা বর্ডার ইমেজ: border-image,
background-image-source.
সিনট্যাক্স
সিলেক্টর {
background: linear-gradient([কোণ বা দিক], রঙ1 আকার1, রঙ2 আকার2...);
}
মানসমূহ
| মান | বর্ণনা |
|---|---|
| দিক |
যেকোনো কোণের একক-এ গ্রেডিয়েন্টের একটি নির্দিষ্ট দিক নির্দেশ করে
অথবা কীওয়ার্ড দ্বারা top, left, right, bottom
বা তাদের সংমিশ্রণ: top left, top right ইত্যাদি।
শব্দের ক্রম গুরুত্বপূর্ণ নয়: top left এবং left top লিখতে পারেন,
কোনো পার্থক্য নেই। প্যারামিটারটি ঐচ্ছিক: যদি এটি না লেখা হয়, গ্রেডিয়েন্ট
উপর থেকে নিচে যাবে (to top-এর মতো)। দিকের আগে to শব্দটি বসে।
|
| কোণ | যেকোনো কোণের একক-এ কোণ। এটি ধনাত্মক বা ঋণাত্মক হতে পারে। প্যারামিটারটি ঐচ্ছিক। একই সাথে কোণ বা দিক নির্দিষ্ট করা যেতে পারে (বা কিছুই না)। |
| রঙ1 | যেকোনো রঙের একক-এ গ্রেডিয়েন্টের প্রারম্ভিক রঙ। |
| রঙ2 | যেকোনো রঙের একক-এ গ্রেডিয়েন্টের শেষ রঙ। |
| আকার | যেকোনো আকারের একক-এ গ্রেডিয়েন্টের একটি নির্দিষ্ট রঙের বিস্তার নির্দেশ করে। |
উদাহরণ . সবচেয়ে সহজ বিকল্প
সিনট্যাক্স:
সিলেক্টর {
background: linear-gradient(প্রারম্ভিক রঙ, শেষ রঙ);
}
একটি উদাহরণ দেখি:
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
উদাহরণ . কোণ যোগ করা
সিনট্যাক্স:
সিলেক্টর {
background: linear-gradient(কোণ, প্রারম্ভিক রঙ, শেষ রঙ);
}
একটি উদাহরণ দেখি:
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
উদাহরণ . দিক যোগ করা
কোণের পরিবর্তে দিক যোগ করা যেতে পারে
top, left, right, bottom
বা তাদের সংমিশ্রণ: top left, top right
দিকের আগে to শব্দটি বসে।
সিনট্যাক্স:
সিলেক্টর {
background: linear-gradient(দিক, প্রারম্ভিক রঙ, শেষ রঙ);
}
একটি উদাহরণ দেখি:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
উদাহরণ . দিক যোগ করা
আরেকটি দিক নির্দেশ করি:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
উদাহরণ . আকার যোগ করা
সিনট্যাক্স:
সিলেক্টর {
background: linear-gradient(রঙ1 আকার1, রঙ2 আকার2);
}
পরবর্তী উদাহরণে আচরণটি হবে নিম্নরূপ:
খাঁটি লাল রঙ হবে 0px থেকে
30px পর্যন্ত, 30px থেকে 50px পর্যন্ত
লাল থেকে নীল রঙের গ্রেডিয়েন্ট হবে, এবং
50px থেকে শেষ পর্যন্ত - খাঁটি নীল:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
উদাহরণ . 2-এর বেশি রঙ যোগ করা
সিনট্যাক্স:
সিলেক্টর {
background: linear-gradient(রঙ1 আকার1, রঙ2 আকার2, রঙ3 আকার3...);
}
পরবর্তী উদাহরণে আচরণটি হবে নিম্নরূপ:
খাঁটি লাল রঙ হবে 0px থেকে
30px পর্যন্ত, 30px থেকে 50px পর্যন্ত
লাল থেকে নীল রঙের গ্রেডিয়েন্ট হবে, এবং
50px থেকে 70px পর্যন্ত - নীল থেকে
সবুজ রঙের গ্রেডিয়েন্ট, এবং 70px-এর পরে - খাঁটি সবুজ:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
উদাহরণ . খাড়া পরিবর্তন
পরবর্তী উদাহরণে আচরণটি হবে নিম্নরূপ:
খাঁটি লাল রঙ হবে 0px থেকে
30px পর্যন্ত, খাঁটি নীল - 30px
থেকে 60px পর্যন্ত, খাঁটি সবুজ - 60px-এর পরে
(red 0px লেখা না লিখলেও চলবে):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
width: 200px;
height: 200px;
}
:
উদাহরণ . আকার শতকরায়ও নির্দেশ করা যায়
পরবর্তী উদাহরণে আচরণটি হবে নিম্নরূপ:
খাঁটি লাল রঙ হবে 0% থেকে
30% পর্যন্ত, খাঁটি নীল - 30%
থেকে 60% পর্যন্ত, খাঁটি সবুজ - 60%-এর পরে
(red 0% লেখা না লিখলেও চলবে):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
উদাহরণ . background-size-এর সাথে সংমিশ্রণ
পরবর্তী উদাহরণে আচরণটি হবে নিম্নরূপ:
খাঁটি লাল রঙ হবে 0px থেকে
30px পর্যন্ত, খাঁটি নীল - 30px
থেকে 60px পর্যন্ত, এবং এগুলো 60px (background-size:
60px;-এর কারণে) আকারের টুকরো করে বারবার আসতে থাকবে:
<div id="elem"></div>
#elem {
background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
background-size: 60px 60px;
width: 200px;
height: 200px;
}
:
আরও দেখুন
-
radial-gradientফাংশন,
যা একটি রেডিয়াল গ্রেডিয়েন্ট তৈরি করে -
repeating-linear-gradientফাংশন,
যা একটি পুনরাবৃত্ত রৈখিক গ্রেডিয়েন্ট তৈরি করে -
repeating-radial-gradientফাংশন,
যা একটি পুনরাবৃত্ত রেডিয়াল গ্রেডিয়েন্ট তৈরি করে
