repeating-radial-gradient

از تابع ()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.

 

پشتیبانی مرورگر ها

سوالت رو توی پنل بحث و گفتگو مطرح کن.

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *