گرادیان شعاعی (Radial Gradients)
«گرادیان شعاعی (Radial Gradient)» یعنی گذر نرم رنگ ها از یک نقطه مرکزی به اطراف. این اثر داخل ویژگی background-image تعریف می شود و حداقل دو رنگ می خواهد.
تابع radial-gradient() چیست؟
تابع radial-gradient() رنگ ها را از مرکز به بیرون پخش می کند. «ایستگاه رنگ» همان توقف های تغییر رنگ است.
نحوه نوشتن و حالت پیش فرض
شکل پیش فرض بیضی است. اندازه پیش فرض farthest-corner است. موقعیت پیش فرض مرکز است.
#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-corner محدوده گرادیان را تعیین می کند. با at x% y% موقعیت مرکز را جابه جا کن.
#grad1 {
background-image: radial-gradient(closest-side at 70% 60%, red, yellow, black);
}
#grad2 {
background-image: radial-gradient(farthest-side at 70% 60%, red, yellow, black);
}
الگوهای تکراری با repeating-radial-gradient()
برای حلقه های منظم و تکراری از نسخه تکرارشونده استفاده کن.
#grad {
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
نکته: اگر پس زمینه ات زیر متن است، کنتراست رنگ ها را چک کن تا متن خوانا بماند.
گام های عملی سریع
- یک
<div>بساز و کلاس بده. - با
radial-gradient()رنگ ها را تعریف کن. - شکل، اندازه و موقعیت را تغییر بده.
برای مرور رنگ ها صفحه رنگ ها را ببین. همچنین کلیدواژه های رنگ به تنظیم شفافیت و توارث کمک می کند. عبارت «گرادیان شعاعی» را در پروژه ات به عنوان جستجوگر داخلی هم لینک کن.
جمع بندی سریع
- گرادیان شعاعی از مرکز به اطراف پخش می شود.
- حداقل دو ایستگاه رنگ لازم است.
- شکل دایره یا بیضی قابل انتخاب است.
- اندازه و موقعیت مرکز قابل کنترل است.
- نسخه تکراری حلقه های منظم می سازد.