❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
عودة للدرس❯ ❮عودة للدرس

CSSالدالة repeating-radial-gradient()

  • فائدة الدالة
  • تحديد موقع اللون المتدرج
  • تحديد الشكل الدائري للون للمتدرّج
  • تحديد حجم اللون المتدرّج
  • تحديد نقاط الدمج

فائدة الدالة

تستخدم هذه الدالة لعرض ألوان دائرية أو بيضاوية مع جعلها تتكرر لتملئ خلفية العنصر.
إفتراضياً، تدرج الألوان يبدأ من الوسط و يتمدد حتى يملئ خلفية العنصر و لكن بدون تكرار، و لكنك تستطيع تحديد كيف سيتم تكرار اللون بالإضافة تغيير مكانه بالشكل الذي تريده.

Default
Repeat at 30%
Repeat at 30px

في المثال التالي قمنا بإظهار لون متدرج يتكوّن من لونين هما البنفسجي و الوردي.

مثال

.gradient {
background: repeating-radial-gradient(#00188F, #EC008C 30%);
}
.gradient { background: repeating-radial-gradient(#00188F, #EC008C 30%); }
جرب الكود

تحديد موقع اللون المتدرج

هناك العديد من القيم الجاهزة و الوحدات التي يمكنك استخدامها لتحديد موقع اللون المتدرج و منها:

  • at left لعرض تدرج الألوان إبتداءاً من اليسار.
  • at center لعرض تدرج الألوان إبتداءاً من الوسط.
  • at right لعرض تدرج الألوان إبتداءاً من اليمين.
  • at top لعرض تدرج الألوان إبتداءاً من الأعلى.
  • at bottom لعرض تدرج الألوان إبتداءاً من الأسفل.
center
top
right
bottom
left

يمكنك أيضاً استخدام أكثر من قيمة في ذات الوقت لتحديد اتجاه اللون بشكل مائل كما يلي:

  • at left bottom لعرض تدرج الألوان إبتداءاً من اليسار و الأسفل.
  • at left top لعرض تدرج الألوان إبتداءاً من اليسار و الأعلى.
  • at right bottom لعرض تدرج الألوان إبتداءاً من اليمين و الأسفل.
  • at right top لعرض تدرج الألوان إبتداءاً من اليمين و الأعلى.
left bottom
left top
right bottom
right top

تستطيع تحديد مكان ابتداء اللون المتدرج بعيداً عن الجهة المذكورة كما يلي:

left 30%
right 30%
left 30% top 50%
right 20% bottom 10%

في المثال التالي قمنا بتحديد إتجاه الألوان المتدرجة بواسطة الكلمات المفتاحية at top - at left - at right - at bottom - at center تباعاً.

المثال الأول

.gradient-top {
background: repeating-radial-gradient(at top, #00188F, #EC008C 30%);
}
.gradient-right {
background: repeating-radial-gradient(at right, #00188F, #EC008C 30%);
}
.gradient-bottom {
background: repeating-radial-gradient(at bottom, #00188F, #EC008C 30%);
}
.gradient-left {
background: repeating-radial-gradient(at left, #00188F, #EC008C 30%);
}
.gradient-center {
background: repeating-radial-gradient(at center, #00188F, #EC008C 30%);
}
.gradient-top { background: repeating-radial-gradient(at top, #00188F, #EC008C 30%); } .gradient-right { background: repeating-radial-gradient(at right, #00188F, #EC008C 30%); } .gradient-bottom { background: repeating-radial-gradient(at bottom, #00188F, #EC008C 30%); } .gradient-left { background: repeating-radial-gradient(at left, #00188F, #EC008C 30%); } .gradient-center { background: repeating-radial-gradient(at center, #00188F, #EC008C 30%); }
جرب الكود

في المثال التالي قمنا بتحديد إتجاه الألوان المتدرجة بواسطة الكلمات المفتاحية at left top - at right top - at left bottom - at right bottom تباعاً.

المثال الثاني

.gradient-right-top {
background: repeating-radial-gradient(at right top, #00188F, #EC008C 30%);
}
.gradient-right-bottom {
background: repeating-radial-gradient(at right bottom, #00188F, #EC008C 30%);
}
.gradient-left-top {
background: repeating-radial-gradient(at left top, #00188F, #EC008C 30%);
}
.gradient-left-bottom {
background: repeating-radial-gradient(at left bottom, #00188F, #EC008C 30%);
}
.gradient-right-top { background: repeating-radial-gradient(at right top, #00188F, #EC008C 30%); } .gradient-right-bottom { background: repeating-radial-gradient(at right bottom, #00188F, #EC008C 30%); } .gradient-left-top { background: repeating-radial-gradient(at left top, #00188F, #EC008C 30%); } .gradient-left-bottom { background: repeating-radial-gradient(at left bottom, #00188F, #EC008C 30%); }
جرب الكود

في المثال التالي قمنا بتحديد إتجاه الألوان المتدرجة بشكل أدق.

المثال الثالث

.gradient-left-30 {
background: repeating-radial-gradient(at left 30%, #00188F, #EC008C 30%);
}
.gradient-right-30 {
background: repeating-radial-gradient(at right 30%, #00188F, #EC008C 30%);
}
.gradient-left-30-top-50 {
background: repeating-radial-gradient(at left 30% top 50%, #00188F, #EC008C 30%);
}
.gradient-right-20-bottom-10 {
background: radial-gradient(at right 20% bottom 10%, #00188F, #EC008C 30%);
}
.gradient-left-30 { background: repeating-radial-gradient(at left 30%, #00188F, #EC008C 30%); } .gradient-right-30 { background: repeating-radial-gradient(at right 30%, #00188F, #EC008C 30%); } .gradient-left-30-top-50 { background: repeating-radial-gradient(at left 30% top 50%, #00188F, #EC008C 30%); } .gradient-right-20-bottom-10 { background: radial-gradient(at right 20% bottom 10%, #00188F, #EC008C 30%); }
جرب الكود

تحديد الشكل الدائري للون للمتدرّج

يمكنك استخدام القيم التالية لتحديد كيف سيكون شكل الألوان:

  • circle لجعل الألوان تدرّج بشكل دائري.
  • ellipse لجعل الألوان تدرّج بشكل بيضاوي محاولةً الإقتراب من جميع حدود العنصر و هذا الشكل الإفتراضي.

قد لا تلاحظ الفرق بينهما بدقة إلا إذا كان طول و عرض العنصر متساويان.


في المثال التالي قمنا بتحديد شكل الألوان المتدرجة.

مثال

.gradient-ellipse {
background: repeating-radial-gradient(ellipse, #00188F, #EC008C 30%);
}
.gradient-circle {
background: repeating-radial-gradient(circle, #00188F, #EC008C 30%);
}
.gradient-ellipse { background: repeating-radial-gradient(ellipse, #00188F, #EC008C 30%); } .gradient-circle { background: repeating-radial-gradient(circle, #00188F, #EC008C 30%); }
جرب الكود

تحديد حجم اللون المتدرّج

يمكنك استخدام القيم التالية لتحدد كيف سيكون حجم الألوان بالنسبة للعنصر:

  • closest-side لجعل اللون المتدرج قريب من حدود العنصر.
  • closest-corner لجعل اللون المتدرج قريب من زوايا العنصر و هذا الأمر تلاحظه بشكل أكبر إذا كان شكل بيضاوي.
  • farthest-side لجعل اللون المتدرج يلامس أبعد حدود في العنصر.
  • farthest-corner لجعل اللون المتدرج يلامس زوايا العنصر و هذه هي القيمة الإفتراضية.

في المثال التالي قمنا بتحديد حجم الألوان المتدرجة إذا كان الشكل دائري.

المثال الأول

.gradient-closet-side {
background: repeating-radial-gradient(circle closest-side, #00188F, #EC008C 30%);
}
.gradient-closet-corner {
background: repeating-radial-gradient(circle closest-corner, #00188F, #EC008C 30%);
}
.gradient-farthest-side {
background: repeating-radial-gradient(circle farthest-side, #00188F, #EC008C 30%);
}
.gradient-farthest-corner {
background: repeating-radial-gradient(circle farthest-corner, #00188F, #EC008C 30%);
}
.gradient-closet-side { background: repeating-radial-gradient(circle closest-side, #00188F, #EC008C 30%); } .gradient-closet-corner { background: repeating-radial-gradient(circle closest-corner, #00188F, #EC008C 30%); } .gradient-farthest-side { background: repeating-radial-gradient(circle farthest-side, #00188F, #EC008C 30%); } .gradient-farthest-corner { background: repeating-radial-gradient(circle farthest-corner, #00188F, #EC008C 30%); }
جرب الكود

في المثال التالي قمنا بتحديد حجم الألوان المتدرجة إذا كان الشكل بيضاوي.

المثال الثاني

.gradient-closet-side {
background: repeating-radial-gradient(ellipse closest-side, #00188F, #EC008C 30%);
}
.gradient-closet-corner {
background: repeating-radial-gradient(ellipse closest-corner, #00188F, #EC008C 30%);
}
.gradient-farthest-side {
background: repeating-radial-gradient(ellipse farthest-side, #00188F, #EC008C 30%);
}
.gradient-farthest-corner {
background: repeating-radial-gradient(ellipse farthest-corner, #00188F, #EC008C 30%);
}
.gradient-closet-side { background: repeating-radial-gradient(ellipse closest-side, #00188F, #EC008C 30%); } .gradient-closet-corner { background: repeating-radial-gradient(ellipse closest-corner, #00188F, #EC008C 30%); } .gradient-farthest-side { background: repeating-radial-gradient(ellipse farthest-side, #00188F, #EC008C 30%); } .gradient-farthest-corner { background: repeating-radial-gradient(ellipse farthest-corner, #00188F, #EC008C 30%); }
جرب الكود

تحديد نقاط الدمج

إفتراضياً، نقطة الدمج بين كل لونين هي في الوسط بينهما لكي يتم توزيع نسب الألوان بالتساوي على مساحة العنصر. في حال أردت إزاحة هذه النقطة لتغيير نسبةً الدمج فإنك تستطيع إضافة رقم بجانب اللون لتحدد أين يتوقف بالنسبة للعنصر.

في المثال التالي تلاعبنا بمكان النقاط الفاصلة بين الألوان حيث أننا أضفنا ثلاث ألوان و من ثم قمنا بإعطاء اللون الأول مساحة 10% و الثاني 20% و الثالث و الأخير مساحة 30% و هكذا سيتكرر هذا النمط كل 30%.

المثال الأول

.gradient {
background: repeating-radial-gradient(circle, #00188F 10%, #7600EC 20%, #e19010 30%);
}
.gradient { background: repeating-radial-gradient(circle, #00188F 10%, #7600EC 20%, #e19010 30%); }
جرب الكود

في حال وضعت نسبة دمج غير ممكنة فإن الألوان ستظهر و لكن المتصفح لن يظهرها بشكل إنسيابي بل سيظهر كل لون بشكل حاد.


في المثال التالي قمنا بجعل نقطة توقف ثانية بعد كل لون حتى تظهر الألوان بشكل حاد.

المثال الثاني

.gradient{
background: repeating-radial-gradient(circle, #00188F 10%, 10%, #7600EC 20%, 20%, #e19010 30% 30%);
}
.gradient{ background: repeating-radial-gradient(circle, #00188F 10%, 10%, #7600EC 20%, 20%, #e19010 30% 30%); }
جرب الكود

في المثال التالي قمنا بجعل نقطة توقف ثانية بعد كل لون حتى تظهر الألوان بشكل شبه حاد مما يجعله يظهر بشكل جميل جداً.

المثال الثالث

.gradient{
background: repeating-radial-gradient(circle, #00188F 10%, 15%, #7600EC 20%, 25%, #e19010 25%);
}
.gradient{ background: repeating-radial-gradient(circle, #00188F 10%, 15%, #7600EC 20%, 25%, #e19010 25%); }
جرب الكود
عودة للدرس❯ ❮عودة للدرس