ফাংশন radial-gradient

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

সিনট্যাক্স

cssসিলেক্টর {
  background: radial-gradient([আকৃতি প্রকার অবস্থান], রঙ1 আকার1, রঙ2 আকার2...);
}

মানসমূহ

প্রকারের জন্য মানসমূহ

মন্তব্য

প্রকার এবং আকৃতি পরস্পর স্থান পরিবর্তন করতে পারে, কিন্তু অবস্থান প্রথম প্যারামিটারের শেষে যেতে হবে। গ্রেডিয়েন্টের প্রকার এবং এর আকার একে অপরের সাথে কাজ করে না (যৌক্তিক, কারণ তারা দ্বন্দ্ব সৃষ্টি করে)। আকার প্রাধান্য পায়।

উদাহরণ . সবচেয়ে সহজ বিকল্প

আসুন শুধু প্রারম্ভিক এবং সমাপ্তি রঙ সেট করি:

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

css#elem {
  background: radial-gradient(red, blue);
  width: 200px;
  height: 200px;
}

Результат:

উদাহরণ . অবস্থান যোগ করি

আসুন কেন্দ্রের অবস্থান সেট করি: 30px - বাম থেকে ইন্ডেন্ট, 100px - উপর থেকে ইন্ডেন্ট:

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

css#elem {
  background: radial-gradient(at 30px 100px, red, blue);
  width: 200px;
  height: 200px;
}

Результат:

উদাহরণ . শতাংশে অবস্থান

আসুন কেন্দ্রের অবস্থান শতাংশে সেট করি: 30% - বাম থেকে ইন্ডেন্ট, 50% - উপর থেকে ইন্ডেন্ট:

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

css#elem {
  background: radial-gradient(at 30% 50%, red, blue);
  width: 200px;
  height: 200px;
}

Результат:

উদাহরণ . কীওয়ার্ড দ্বারা অবস্থান

কীওয়ার্ড ব্যবহার করা যেতে পারে top, bottom, left, right, center বিভিন্ন সংমিশ্রণে। উদাহরণস্বরূপ, গ্রেডিয়েন্টটি ডানদিকে কেন্দ্রে স্থাপন করা যাক:

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

css#elem {
  background: radial-gradient(at right center, red, blue);
  width: 200px;
  height: 200px;
}

Результат:

উদাহরণ . গ্রেডিয়েন্টের আকার

এই ক্ষেত্রে গ্রেডিয়েন্ট এভাবে কাজ করবে: 0px থেকে 20px পর্যন্ত খাঁটি লাল রঙ হবে, 20px থেকে 60px পর্যন্ত - গ্রেডিয়েন্ট লাল থেকে নীলাভ, 60px এর পরে - খাঁটি নীলাভ:

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

css#elem {
  background: radial-gradient(red 20px, blue 60px);
  width: 200px;
  height: 200px;
}

Результат:

উদাহরণ . একের পর এক কয়েকটি রঙ

এই ক্ষেত্রে গ্রেডিয়েন্ট এভাবে কাজ করবে: 0px থেকে 20px পর্যন্ত খাঁটি লাল রঙ হবে, 20px থেকে 40px পর্যন্ত খাঁটি নীলাভ রঙ হবে, 40px থেকে 60px পর্যন্ত - গ্রেডিয়েন্ট নীলাভ থেকে সবুজ, 60px এর পরে - খাঁটি সবুজ:

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

css#elem {
  background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
  width: 200px;
  height: 200px;
}

Результат:

উদাহরণ . আকার + অবস্থান

আসুন একই সাথে বিভিন্ন রঙের জন্য আকার এবং গ্রেডিয়েন্টের কেন্দ্রের অবস্থান সেট করি:

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

css#elem {
  background: radial-gradient(at 30px 60px, red 20px, blue 60px);
  width: 200px;
  height: 200px;
}

Результат:

উদাহরণ . গ্রেডিয়েন্টের আকৃতি

গ্রেডিয়েন্টের আকৃতি প্রথম প্যারামিটার দ্বারা সেট করা হয় এবং 2টি মান নিতে পারে: circle (বৃত্তাকার গ্রেডিয়েন্ট) বা ellipse (উপবৃত্তাকার গ্রেডিয়েন্ট, ডিফল্ট)। তাহলে কেন আমরা এর আগে উপবৃত্তাকার গ্রেডিয়েন্ট দেখিনি, যদিও এটি ডিফল্টভাবে সেট করা থাকে? কারণ এর আগে ব্লকগুলির আকৃতি বর্গক্ষেত্র ছিল। যদি আমরা আকৃতি আয়তক্ষেত্রাকারে পরিবর্তন করি, তবে আমরা উপবৃত্তাকার গ্রেডিয়েন্ট দেখতে পাব:

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

css#elem {
  background: radial-gradient(red 20px, blue 60px);
  width: 300px;
  height: 200px;
}

Результат:

উদাহরণ . গোল গ্রেডিয়েন্ট

আসুন একটি আয়তক্ষেত্রাকার ব্লকে একটি গোল গ্রেডিয়েন্ট তৈরি করি। এর জন্য প্রথম প্যারামিটার হিসেবে কীওয়ার্ড circle ব্যবহার করে গ্রেডিয়েন্টের আকৃতি সেট করি:

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

css#elem {
  background: radial-gradient(circle, red 20px, blue 60px);
  width: 300px;
  height: 200px;
}

Результат:

উদাহরণ . অবস্থান যোগ করি

আসুন আগের কোডে গ্রেডিয়েন্টের অবস্থানও যোগ করি:

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

css#elem {
  background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
  width: 300px;
  height: 200px;
}

Результат:

উদাহরণ . প্রকার farthest-corner + circle

ব্লকের দূরবর্তী কোণে দূরত্বের তথ্যের ভিত্তিতে গ্রেডিয়েন্টের আকৃতি গণনা করা হয়:

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

css#elem {
  background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

উদাহরণ . প্রকার farthest-corner + ellipse

ব্লকের দূরবর্তী কোণে দূরত্বের তথ্যের ভিত্তিতে গ্রেডিয়েন্টের আকৃতি গণনা করা হয়:

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

css#elem {
  background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

উদাহরণ . প্রকার farthest-side + circle

গ্রেডিয়েন্ট ব্লকের দূরবর্তী পাশ পর্যন্ত প্রসারিত হয়:

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

css#elem {
  background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

উদাহরণ . প্রকার farthest-side + ellipse

গ্রেডিয়েন্ট ব্লকের দূরবর্তী পাশ পর্যন্ত প্রসারিত হয়:

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

css#elem {
  background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

উদাহরণ . প্রকার closest-corner + circle

ব্লকের নিকটতম কোণে দূরত্বের তথ্যের ভিত্তিতে গ্রেডিয়েন্টের আকৃতি গণনা করা হয়:

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

css#elem {
  background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

উদাহরণ . প্রকার closest-corner + ellipse

ব্লকের নিকটতম কোণে দূরত্বের তথ্যের ভিত্তিতে গ্রেডিয়েন্টের আকৃতি গণনা করা হয়:

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

css#elem {
  background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

উদাহরণ . প্রকার closest-side + circle

গ্রেডিয়েন্টের আকৃতি ব্লকের এর নিকটতম পাশের সাথে মিলে যায়:

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

css#elem {
  background: radial-gradient(circle closest-side at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

উদাহরণ . প্রকার closest-side + ellipse

গ্রেডিয়েন্টের আকৃতি ব্লকের এর নিকটতম পাশের সাথে মিলে যায়:

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

css#elem {
  background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

আরও দেখুন