CSSتدرج الألوان

مفهوم تدرج الألوان

تدرّج الألوان ( Gradient ) يقصد به عرض عدة ألوان بجانب بعضها البعض و بشكل إنسيابي بدلاً من استخدام لون واحد فقط.

توّفر لك CSS مجموعة دوال جاهزة يمكنك استخدامها لعرض ألوان متدرجة، جعل الألوان تظهر بشكل مائل بدرجة محددة أو باتجاه معين، كما يمكنك جعلها تظهر بشكل كامل، صغير و مكرّر، دائري أو اسطواني.

في هذا الدرس ستتعرف على جميع الدوال و القيم التي يمكنك استخدامها لعرض ألوان متدرجة.

أساسيات تدرّج الألوان

تدرّج الألوان يمكن تطبيقه على خلفية العنصر بواسطة الخاصية background-image أو الخاصية background و من ثم يتم وضع قيمة الألوان المتدرجة بواسطة إحدى دوال تدرج الألوان المخصصة لذلك. و تستطيع استخدام أكثر من دالة في ذات الوقت.

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

في المثال التالي قمنا بجعل لون الخلفية يتدرج من اللون البنفسجي إلى اللون الزهري و قد وضعنا لون خلفية بنفسجي قبله للحيطة.

.gradient {
    background: #00188F; /* إذا لم يستطع المتصفح استخدام لون الخلفية المتدرج سيستخدم هذا */
    background: linear-gradient(#00188F, #EC008C);
}

دوال تدرج الألوان

فيما يلي جميع الدوال التي يمكنك استخدامها للحصول على ألوان متدرجة.