CSS – گرادیان‌های شعاعی (Radial Gradients)

گرادیان‌های شعاعی (Radial Gradients) در CSS

گرادیان شعاعی بر اساس مرکز آن تعریف می‌شود و برای ایجاد یک گرادیان شعاعی باید حداقل دو نقطه رنگی مشخص کنید.

دستور سینتکس:

background-image: radial-gradient(shape size at position, start-color, ..., last-color);
  • shape (شکل): مقدار پیش‌فرض “بیضی” (ellipse) است.
  • size (اندازه): مقدار پیش‌فرض “دورترین گوشه” (farthest-corner) است.
  • position (موقعیت): مقدار پیش‌فرض “مرکز” (center) است.

گرادیان شعاعی - نقاط رنگی با فاصله یکسان (پیش‌فرض)

در این مثال، یک گرادیان شعاعی با نقاط رنگی که فاصله یکسانی از هم دارند، نشان داده شده است:

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

گرادیان شعاعی - نقاط رنگی با فاصله متفاوت

در این مثال، یک گرادیان شعاعی با نقاط رنگی که فاصله متفاوتی دارند، نشان داده شده است:

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

تعیین شکل

پارامتر shape شکل گرادیان را تعیین می‌کند. می‌تواند مقدار “circle” (دایره) یا “ellipse” (بیضی) را بگیرد. مقدار پیش‌فرض بیضی است.

مثال:

گرادیان شعاعی با شکل دایره:

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

استفاده از اندازه‌های مختلف

پارامتر size اندازه گرادیان را تعریف می‌کند. می‌تواند چهار مقدار زیر را بگیرد:

  1. closest-side: نزدیک‌ترین طرف عنصر
  2. farthest-side: دورترین طرف عنصر
  3. closest-corner: نزدیک‌ترین گوشه عنصر
  4. 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%);
}

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

بیشتر بخوانید
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

بیشتر بخوانید
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.