گرادیان‌های شعاعی (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 اندازه گرادیان را تعریف می‌کند. می‌تواند چهار مقدار زیر را بگیرد:
- 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%);
}
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام