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

فائدة الدالة

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

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

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

إمالة اللون المتدرج

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

• to bottom لعرض تدرج الألوان من الأعلى باتجاه الأسفل، و يمكن تمثيل هذه القيمة بالدرجة 0deg.
• to top لعرض تدرج الألوان من الأسفل باتجاه الأعلى، و يمكن تمثيل هذه القيمة بالدرجة 180deg.
• to left لعرض تدرج الألوان من اليمين باتجاه اليسار، و يمكن تمثيل هذه القيمة بالدرجة 270deg.
• to right لعرض تدرج الألوان من اليسار باتجاه اليمين و يمكن تمثيل هذه القيمة بالدرجة 90deg.

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

• to left bottom لعرض تدرج الألوان باتجاه اليسار و الأسفل، و يمكن تمثيل هذه القيمة بالدرجة 225deg.
• to left top لعرض تدرج الألوان باتجاه اليسار و الأعلى، و يمكن تمثيل هذه القيمة بالدرجة 135deg.
• to right bottom لعرض تدرج الألوان باتجاه اليمين و الأسفل، و يمكن تمثيل هذه القيمة بالدرجة 315deg.
• to right top لعرض تدرج الألوان باتجاه اليمين و الأعلى و يمكن تمثيل هذه القيمة بالدرجة 45deg.

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

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

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

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

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

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

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

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

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

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

.gradient-0deg {
    background: linear-gradient(0deg, #00188F, #EC008C);
}

.gradient-45deg {
    background: linear-gradient(45deg, #00188F, #EC008C);
}

.gradient-90deg {
    background: linear-gradient(90deg, #00188F, #EC008C);
}

.gradient-135deg {
    background: linear-gradient(135deg, #00188F, #EC008C);
}

.gradient-180deg {
    background: linear-gradient(180deg, #00188F, #EC008C);
}

.gradient-225deg {
    background: linear-gradient(225deg, #00188F, #EC008C);
}

.gradient-270deg {
    background: linear-gradient(270deg, #00188F, #EC008C);
}

.gradient-315deg {
    background: linear-gradient(315deg, #00188F, #EC008C);
}

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

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

في المثال التالي تلاعبنا بمكان النقاط الفاصلة بين الألوان على النحو التالي:

• في المربع الأول جعلنا نقطة الدمج من جهة اللون البنفسجي في أول مربع تتوقف عند 50% و هذه النسبة الإفتراضية لأنه عندنا لونين فقط و اللون الوردي سيظهر على باقي المساحة المتوفرة.
• في المربع الثاني جعلنا نقطة الدمج من جهة اللون البنفسجي في أول مربع تتوقف عند 80% و اللون الوردي سيظهر على باقي المساحة المتوفرة. لهذا ستلاحظ أن اللون البنفسجي يحتل المساحة الأكبر.
• في المربع الثالث جعلنا نقطة الدمج من جهة اللون البنفسجي تتوقف عند 40% و نقطة الدمج من جهة اللون الوردي تتوقف عند 60% و بالطبع اللون الوردي سيظهر على المساحة المتوفرة. لهذا ستلاحظ أن المساحة التي يتم فيها دمج اللونين مع بعض بشكل إنسيابي أصبحت أضيق.

.gradient-50-50 {
    background: linear-gradient(#00188F 50%, #EC008C);
}

.gradient-80-50 {
    background: linear-gradient(#00188F 80%, #EC008C);
}

.gradient-40-60 {
    background: linear-gradient(#00188F 40%, #EC008C 60%);
}

في المثال التالي قمنا بجعل نقطة التوقف في اللون البنفسجي تتوقف عند 70% و نقطة التوقف في اللون الوردي الموضوعة بعدها تتوقف عند 40% مما يعني أنه تم وضع نقطة توقف اللون الأخير قبل نقطة توقف اللون الأول الأمر الذي يؤدي إلى عدم إمكانية إظهار اللونين بشكل متدرج و بالتالي فإنها ستظهر كألوان حادة.

.gradient-70-40 {
    background: linear-gradient(#00188F 70%, #EC008C 40%);
}

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

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

.gradient {
    background: 
        linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70%),
        linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70%),
        linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70%);
}