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

فائدة الدالة

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

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

.gradient {
    background: radial-gradient(#00188F, #EC008C);
}

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

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

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

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

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

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

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

.gradient-top {
    background: radial-gradient(at top, #00188F, #EC008C);
}

.gradient-right {
    background: radial-gradient(at right, #00188F, #EC008C);
}

.gradient-bottom {
    background: radial-gradient(at bottom, #00188F, #EC008C);
}

.gradient-left {
    background: radial-gradient(at left, #00188F, #EC008C);
}

.gradient-center {
    background: radial-gradient(at center, #00188F, #EC008C);
}

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

.gradient-right-top {
    background: radial-gradient(at right top, #00188F, #EC008C);
}

.gradient-right-bottom {
    background: radial-gradient(at right bottom, #00188F, #EC008C);
}

.gradient-left-top {
    background: radial-gradient(at left top, #00188F, #EC008C);
}

.gradient-left-bottom {
    background: radial-gradient(at left bottom, #00188F, #EC008C);
}

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

.gradient-left-30 {
    background: radial-gradient(at left 30%, #00188F, #EC008C);
}

.gradient-right-30 {
    background: radial-gradient(at right 30%, #00188F, #EC008C);
}

.gradient-left-30-top-50 {
    background: radial-gradient(at left 30% top 50%, #00188F, #EC008C);
}

.gradient-right-20-bottom-40 {
    background: radial-gradient(at right 20% bottom 40%, #00188F, #EC008C);
}

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

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

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

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

.gradient-ellipse {
    background: radial-gradient(ellipse, #00188F, #EC008C);
}

.gradient-circle {
    background: radial-gradient(circle, #00188F, #EC008C);
}

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

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

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

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

.gradient-closet-side {
    background: radial-gradient(circle closest-side, #00188F, #EC008C);
}

.gradient-closet-corner {
    background: radial-gradient(circle closest-corner, #00188F, #EC008C);
}

.gradient-farthest-side {
    background: radial-gradient(circle farthest-side, #00188F, #EC008C);
}

.gradient-farthest-corner {
    background: radial-gradient(circle farthest-corner, #00188F, #EC008C);
}

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

.gradient-closet-side {
    background: radial-gradient(ellipse closest-side, #00188F, #EC008C);
}

.gradient-closet-corner {
    background: radial-gradient(ellipse closest-corner, #00188F, #EC008C);
}

.gradient-farthest-side {
    background: radial-gradient(ellipse farthest-side, #00188F, #EC008C);
}

.gradient-farthest-corner {
    background: radial-gradient(ellipse farthest-corner, #00188F, #EC008C);
}

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

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

في المثال التالي تلاعبنا بمكان النقاط الفاصلة بين الألوان حيث أضفنا ثلاث ألوان مع إعطاء اللون الأول مساحة 50% و الثاني 80% (حتى يظهر بعده بنسبة 30%) و الثالث سيظهر بشكل تلقائي على باقي المساحة المتوفرة.

.gradient {
    background: radial-gradient(circle at right, #00188F 55%, #7600EC 80%, #e19010);
}

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

.gradient{
    background: radial-gradient(circle at right, #00188F 50%, 50%, #7600EC 80%, 80%, #e19010);
}

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

.gradient{
    background: radial-gradient(circle at right, #00188F 50%, 55%, #7600EC 80%, 85%, #e19010);
}

عرض عدة ألوان متدرجة في وقت واحد

لعرض عدة ألوان متدرجة في وقت واحد و مندمج يمكنك استخدام linear-gradient() أكثر من مرة مع وضع فاصلة بين كل استدعائين. و يجب عليك جعل الألوان المتدرجة فيه بعض الشفافية لكي يكون بالإمكان إظهار أكثر من لون متدرج في ذات المكان.

.gradient {
    background:
        radial-gradient(at left top, blue, transparent),
        radial-gradient(at right top, yellow, transparent),
        radial-gradient(at right bottom, red, transparent),
        radial-gradient(at left bottom, purple, transparent);
}