ফাংশন radial-gradient
ফাংশন radial-gradient একটি রেডিয়াল
গ্রেডিয়েন্ট সেট করে। এই ফাংশনটি সেইসব বৈশিষ্ট্যের জন্য প্রয়োগ করা হয় যা
ব্যাকগ্রাউন্ড ইমেজ সেট করে: background,
background-image
বা বর্ডার ইমেজ: border-image,
background-image-source।
সিনট্যাক্স
সিলেক্টর {
background: radial-gradient([আকৃতি প্রকার অবস্থান], রঙ1 আকার1, রঙ2 আকার2...);
}
মানসমূহ
| মান | বর্ণনা |
|---|---|
| আকৃতি |
গ্রহণযোগ্য মান:
ellipse উপবৃত্তাকার গ্রেডিয়েন্ট (ডিফল্ট),
circle বৃত্তাকার গ্রেডিয়েন্ট।
|
| প্রকার |
গ্রেডিয়েন্টের প্রসারণ নির্ধারণ করে।
গ্রহণযোগ্য মান:
closest-side, closest-corner,
farthest-side, farthest-corner।
|
| অবস্থান |
কীওয়ার্ড at এর পরে
যেকোনো আকারের একক-এ অবস্থান নির্দিষ্ট করা হয়
বা কীওয়ার্ড top, bottom,
left, right, center ব্যবহার করে
বিভিন্ন সংমিশ্রণে।
|
| রঙ1 | যেকোনো রঙের একক-এ গ্রেডিয়েন্টের প্রারম্ভিক রঙ। |
| রঙ2 | যেকোনো রঙের একক-এ গ্রেডিয়েন্টের সমাপ্তি রঙ। |
| আকার | যেকোনো আকারের একক-এ গ্রেডিয়েন্টের একটি নির্দিষ্ট রঙের বিস্তার নির্ধারণ করে। |
প্রকারের জন্য মানসমূহ
| মান | বর্ণনা |
|---|---|
closest-side |
গ্রেডিয়েন্টের আকৃতি ব্লকের এর নিকটতম পাশের সাথে মিলে যায়। |
closest-corner |
ব্লকের নিকটতম কোণে দূরত্বের তথ্যের ভিত্তিতে গ্রেডিয়েন্টের আকৃতি গণনা করা হয়। |
farthest-side |
গ্রেডিয়েন্ট ব্লকের দূরবর্তী পাশ পর্যন্ত প্রসারিত হয়। |
farthest-corner |
ব্লকের দূরবর্তী কোণে দূরত্বের তথ্যের ভিত্তিতে গ্রেডিয়েন্টের আকৃতি গণনা করা হয়। |
মন্তব্য
প্রকার এবং আকৃতি পরস্পর স্থান পরিবর্তন করতে পারে, কিন্তু অবস্থান প্রথম প্যারামিটারের শেষে যেতে হবে। গ্রেডিয়েন্টের প্রকার এবং এর আকার একে অপরের সাথে কাজ করে না (যৌক্তিক, কারণ তারা দ্বন্দ্ব সৃষ্টি করে)। আকার প্রাধান্য পায়।
উদাহরণ . সবচেয়ে সহজ বিকল্প
আসুন শুধু প্রারম্ভিক এবং সমাপ্তি রঙ সেট করি:
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
উদাহরণ . অবস্থান যোগ করি
আসুন কেন্দ্রের অবস্থান সেট করি:
30px - বাম থেকে ইন্ডেন্ট, 100px - উপর থেকে ইন্ডেন্ট:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
উদাহরণ . শতাংশে অবস্থান
আসুন কেন্দ্রের অবস্থান শতাংশে সেট করি:
30% - বাম থেকে ইন্ডেন্ট, 50% - উপর থেকে ইন্ডেন্ট:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
উদাহরণ . কীওয়ার্ড দ্বারা অবস্থান
কীওয়ার্ড ব্যবহার করা যেতে পারে
top, bottom, left,
right, center বিভিন্ন
সংমিশ্রণে। উদাহরণস্বরূপ, গ্রেডিয়েন্টটি
ডানদিকে কেন্দ্রে স্থাপন করা যাক:
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
উদাহরণ . গ্রেডিয়েন্টের আকার
এই ক্ষেত্রে গ্রেডিয়েন্ট এভাবে কাজ করবে:
0px থেকে 20px পর্যন্ত খাঁটি
লাল রঙ হবে, 20px থেকে 60px পর্যন্ত - গ্রেডিয়েন্ট
লাল থেকে নীলাভ, 60px এর পরে - খাঁটি
নীলাভ:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
উদাহরণ . একের পর এক কয়েকটি রঙ
এই ক্ষেত্রে গ্রেডিয়েন্ট এভাবে কাজ করবে:
0px থেকে 20px পর্যন্ত খাঁটি
লাল রঙ হবে, 20px থেকে 40px পর্যন্ত
খাঁটি নীলাভ রঙ হবে, 40px
থেকে 60px পর্যন্ত - গ্রেডিয়েন্ট নীলাভ থেকে সবুজ,
60px এর পরে - খাঁটি সবুজ:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
width: 200px;
height: 200px;
}
:
উদাহরণ . আকার + অবস্থান
আসুন একই সাথে বিভিন্ন রঙের জন্য আকার এবং গ্রেডিয়েন্টের কেন্দ্রের অবস্থান সেট করি:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
উদাহরণ . গ্রেডিয়েন্টের আকৃতি
গ্রেডিয়েন্টের আকৃতি প্রথম প্যারামিটার দ্বারা
সেট করা হয় এবং 2টি মান নিতে পারে: circle
(বৃত্তাকার গ্রেডিয়েন্ট) বা ellipse (উপবৃত্তাকার
গ্রেডিয়েন্ট, ডিফল্ট)। তাহলে কেন আমরা এর আগে
উপবৃত্তাকার গ্রেডিয়েন্ট দেখিনি, যদিও
এটি ডিফল্টভাবে সেট করা থাকে? কারণ এর আগে
ব্লকগুলির আকৃতি বর্গক্ষেত্র ছিল। যদি আমরা
আকৃতি আয়তক্ষেত্রাকারে পরিবর্তন করি, তবে আমরা উপবৃত্তাকার
গ্রেডিয়েন্ট দেখতে পাব:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
উদাহরণ . গোল গ্রেডিয়েন্ট
আসুন একটি আয়তক্ষেত্রাকার ব্লকে একটি গোল গ্রেডিয়েন্ট তৈরি করি।
এর জন্য প্রথম প্যারামিটার হিসেবে
কীওয়ার্ড circle ব্যবহার করে গ্রেডিয়েন্টের আকৃতি
সেট করি:
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
উদাহরণ . অবস্থান যোগ করি
আসুন আগের কোডে গ্রেডিয়েন্টের অবস্থানও যোগ করি:
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
উদাহরণ . প্রকার farthest-corner + circle
ব্লকের দূরবর্তী কোণে দূরত্বের তথ্যের ভিত্তিতে গ্রেডিয়েন্টের আকৃতি গণনা করা হয়:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
উদাহরণ . প্রকার farthest-corner + ellipse
ব্লকের দূরবর্তী কোণে দূরত্বের তথ্যের ভিত্তিতে গ্রেডিয়েন্টের আকৃতি গণনা করা হয়:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
উদাহরণ . প্রকার farthest-side + circle
গ্রেডিয়েন্ট ব্লকের দূরবর্তী পাশ পর্যন্ত প্রসারিত হয়:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
উদাহরণ . প্রকার farthest-side + ellipse
গ্রেডিয়েন্ট ব্লকের দূরবর্তী পাশ পর্যন্ত প্রসারিত হয়:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
উদাহরণ . প্রকার closest-corner + circle
ব্লকের নিকটতম কোণে দূরত্বের তথ্যের ভিত্তিতে গ্রেডিয়েন্টের আকৃতি গণনা করা হয়:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
উদাহরণ . প্রকার closest-corner + ellipse
ব্লকের নিকটতম কোণে দূরত্বের তথ্যের ভিত্তিতে গ্রেডিয়েন্টের আকৃতি গণনা করা হয়:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
উদাহরণ . প্রকার closest-side + circle
গ্রেডিয়েন্টের আকৃতি ব্লকের এর নিকটতম পাশের সাথে মিলে যায়:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
উদাহরণ . প্রকার closest-side + ellipse
গ্রেডিয়েন্টের আকৃতি ব্লকের এর নিকটতম পাশের সাথে মিলে যায়:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
আরও দেখুন
-
ফাংশন
linear-gradient,
যা একটি রৈখিক গ্রেডিয়েন্ট তৈরি করে -
ফাংশন
repeating-linear-gradient,
যা একটি পুনরাবৃত্ত রৈখিক গ্রেডিয়েন্ট তৈরি করে -
ফাংশন
repeating-radial-gradient,
যা একটি পুনরাবৃত্ত রেডিয়াল গ্রেডিয়েন্ট তৈরি করে
