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 - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

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

نظرات

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

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