CSS পরবর্তী গ্রেডেন্ট

CSS পরবর্তী গ্রেডেন্ট

কোর্স সুপারিশ:

রেডিয়াল গ্রাডিয়েন্ট কেন্দ্রের দ্বারা নির্দিষ্ট হয়。

যদি কেন্দ্রীয় গ্রাডিয়েন্ট তৈরি করতে হয়, তবে কমপক্ষে দুটি রঙের লেবেল নির্দিষ্ট করতে হবে。

ব্যবহারিক শব্দshape size background-image: radial-gradient( সবচেয়ে দূরবর্তী আঙ্গুলat ,start-color , ... ,last-color

);shape ডিফল্টভাবেsize অবকণসবচেয়ে দূরবর্তী আঙ্গুল কেন্দ্রে

রেডিয়াল গ্রাডিয়েন্ট - সমান স্থানাংকের রঙের লেবেল (ডিফল্ট)

নিচের উদাহরণ একটি সমান স্থানাংকের রঙের লেবেল সহ কেন্দ্রীয় গ্রাডিয়েন্ট দেখায়:

ইনস্ট্যান্স

#grad {
  background-image: radial-gradient(red, yellow, green);
}

আপনার নিজেই চেষ্টা করুন

রেডিয়াল গ্রাডিয়েন্ট - বিভিন্ন স্থানাংকের রঙের লেবেল

নিচের উদাহরণ একটি কেন্দ্রীয় গ্রাডিয়েন্ট দেখায় যার রঙের লেবেলগুলির মধ্যে বৈচিত্র্য রয়েছে:

ইনস্ট্যান্স

#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

আপনার নিজেই চেষ্টা করুন

আকৃতি নির্দিষ্ট করা

shape প্রস্তুত পরামিতি আকৃতি নির্দিষ্ট করে। তা 'circle' বা 'ellipse' মান গ্রহণ করতে পারে। ডিফল্ট মান 'ellipse' (বৃত্তাকার)।

নিচের উদাহরণ একটি বৃত্তাকার কেন্দ্রীয় গ্রাডিয়েন্ট দেখায়:

ইনস্ট্যান্স

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

আপনার নিজেই চেষ্টা করুন

বিভিন্ন মাপের কীভাবে ব্যবহার করা হয়

size প্রস্তুত পরামিতি গ্রাডিয়েন্টের মাপ নির্দিষ্ট করে। তা চারটি মান গ্রহণ করতে পারে:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

ইনস্ট্যান্স

নির্দিষ্ট করা হল ভিন্ন মাপের কীভাবে কেন্দ্রীয় গ্রাডিয়েন্ট সংযোজন করা হয়:

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

আপনার নিজেই চেষ্টা করুন

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

repeating-radial-gradient() ফাংশন রিপিটিং রেডিয়াল গ্রেডিয়েন্ট পুনরাবৃত্তির জন্য ব্যবহৃত হয়:

ইনস্ট্যান্স

রিপিটিং রেডিয়াল গ্রেডিয়েন্ট:

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

আপনার নিজেই চেষ্টা করুন

CSS গ্রেডিয়েন্ট এট্রিবিউট

নিচের টেবিলে CSS গ্রেডিয়েন্ট এট্রিবিউট উপস্থাপিত হয়:

এট্রিবিউট বর্ণনা
background-image একটি এলিমেন্টের জন্য একটি বা একাধিক ব্যাকগ্রাউন্ড ইমেজ সজ্জিত করা