از تابع ()repeating-radial-gradient برای ساخت گرادینت (<gradient>) از نوع شعاعی تکرار شونده استفاده می شود به این معنا که دو و یا چند رنگ به صورت دایره یا بیضی شکل در هم محو و به همان صورت در پس زمینه تکرار می شوند.
این تابع دقیقا همان مقادیر تابع گرادینت شعاعی را می گیرد پس اگر با گرادینت شعاعی آشنا نیستید لطفا اول به ()radial-gradient مراجعه کنید.
تنها تفاوت این نوع از گرادینت با گرادینت شعاعی در این است که گرادینت شعاعی در سراسر یک عنصر پخش می شود اما گرادینت شعاعی تکرار شونده با توجه به مکان color-stop اول و آخرش, اندازه اش تعیین می شود و همان گرادینت را در سراسر عنصر در کنار هم تکرار می کند.
مقادیر گرادینت زیر را در نظر بگیرید:
repeating-radial-gradient(circle, yellow 10px, #009966, purple 50px);
نتیجه در تصویر زیر نمایش داده شده است:
چون تفاوت اولین و آخرین color-stop در این گرادینت برابر با (10 – 50) یعنی 40 می باشد, پس هر حلقه از گرادینت برابر 40 پیکسل می باشد. و هر سه رنگ زرد و سبز و بنفش در این محدوده 40 پیکسلی در کنار هم در راستای شعاع گرادینت محو می شوند و دوباره همان حلقه تکرار می شود تا تمام سطح عنصر را بپوشاند.
اگر همین مقادیر را برای گرادینت شعاعی استفاده کنیم نتیجه بصورت زیر خواهد بود:
radial-gradient(circle, yellow 10px, #009966, purple 50px);
این اتفاق به این دلیل افتاد که در گرادینت شعاعی آخرین رنگ تا آخر عنصر پخش می شود. اما در گرادینت شعاعی تکرار شونده چنین رفتاری دیده نمی شود چون color-stop اول و آخر, مرزهای هر حلقه بشمار می آیند.
نکته دیگری که باید در مورد گرادینت شعاعی تکرار شونده بدانید این است که اگر برای رنگ های این نوع از گرادینت مکان (همان عدد بعد از رنگ) تعیین نکنید دقیقا شبیه به گرادینت شعاعی عمل می کند و با یک تکرار تمام سطح عنصر را پوشش می دهد:
repeating-radial-gradient(circle, yellow, #009966, purple);
همانطور که در گرادینت شعاعی می توانیم رنگ ها را با لبه های تند در کنار هم قرار دهیم در این نوع گرادینت هم می توانیم:
repeating-radial-gradient(circle, yellow 10px, yellow 23.4px, #009966 23.4px, #009966 36.8px, purple 36.8px, purple 50px);
با تغییر مکان شروع گرادینت و دیگر مقادیر می توان طرح های جالبی بوجود آورد:
.element {
background-image: repeating-radial-gradient(circle at 0% 50%, white 0px, white 20px, black 20px, black 40px);
}
لطفا دموی زیر را برای درک بهتر بررسی کنید:
See the Pen repeating-radial-gradient by Mojtaba Seyedi (@seyedi) on CodePen.
سوال داری؟ برو به پنل پرسش و پاسخ