CSSالدالة repeating-linear-gradient()
- فائدة الدالة
- إمالة اللون المتدرج
فائدة الدالة
تستخدم هذه الدالة لعرض ألوان متدرجة مستقيمة ليس فيها إنحناء مع جعلها تتكرر لتملئ خلفية العنصر.
إفتراضياً، تدرج الألوان و تكرارها يظهر من الأعلى إلى الأسفل و بدون تكرار للألوان، و لكنك تستطيع تحديد كيف سيتم تكرار اللون بالإضافة إلى جعل اللون يظهر بشكل مائل بالإتجاه أو الزاوية التي تريدها.
Default
Repeat every 20px
في المثال التالي قمنا بجعل اللون المتدرّج نفسه يتكرر كل 20 بكسل.
المثال الأول
.gradient {
background: repeating-linear-gradient(#00188F, #EC008C 20px);
}
.gradient {
background: repeating-linear-gradient(#00188F, #EC008C 20px);
}
في المثال التالي قمنا بجعل اللون المتدرّج نفسه يتكرر كلما وصل طول اللون إلى 30% من طول العنصر.
المثال الثاني
.gradient {
background: repeating-linear-gradient(#00188F, #EC008C 30%);
}
.gradient {
background: repeating-linear-gradient(#00188F, #EC008C 30%);
}
الفرق الوحيد بين الدالة linear-gradient() و الدالة repeat-linear-gradient() هو أن الأخيرة تكرر الألوان نفسها أكثر من مرة حتى تملئ خلفية العنصر في حين أن الأخرى لا تفعل ذلك.
إمالة اللون المتدرج
هناك العديد من القيم الجاهزة و الوحدات التي يمكنك استخدامها لتحديد اتجاه اللون المتدرج و منها:
- to bottom لعرض تدرج الألوان من الأعلى باتجاه الأسفل، و يمكن تمثيل هذه القيمة بالدرجة 0deg.
- to top لعرض تدرج الألوان من الأسفل باتجاه الأعلى، و يمكن تمثيل هذه القيمة بالدرجة 180deg.
- to left لعرض تدرج الألوان من اليمين باتجاه اليسار، و يمكن تمثيل هذه القيمة بالدرجة 270deg.
- to right لعرض تدرج الألوان من اليسار باتجاه اليمين و يمكن تمثيل هذه القيمة بالدرجة 90deg.
to top
to right
to bottom
to left
يمكنك أيضاً استخدام أكثر من قيمة في ذات الوقت لتحديد اتجاه اللون بشكل مائل كما يلي:
- to left bottom لعرض تدرج الألوان باتجاه اليسار و الأسفل، و يمكن تمثيل هذه القيمة بالدرجة 225deg.
- to left top لعرض تدرج الألوان باتجاه اليسار و الأعلى، و يمكن تمثيل هذه القيمة بالدرجة 135deg.
- to right bottom لعرض تدرج الألوان باتجاه اليمين و الأسفل، و يمكن تمثيل هذه القيمة بالدرجة 315deg.
- to right top لعرض تدرج الألوان باتجاه اليمين و الأعلى و يمكن تمثيل هذه القيمة بالدرجة 45deg.
to left bottom
to left top
to right bottom
to right top
في المثال التالي قمنا بتحديد اتجاه الألوان المتدرجة بواسطة الكلمات المفتاحية to top - to left - to right - to bottom تباعاً.
المثال الأول
.gradient-top {
background: repeating-linear-gradient(to top, #00188F, #EC008C 20px);
}
.gradient-right {
background: repeating-linear-gradient(to right, #00188F, #EC008C 20px);
}
.gradient-bottom {
background: repeating-linear-gradient(to bottom, #00188F, #EC008C 20px);
}
.gradient-left {
background: repeating-linear-gradient(to left, #00188F, #EC008C 20px);
}
.gradient-right-top {
background: repeating-linear-gradient(to right top, #00188F, #EC008C 20px);
}
.gradient-right-bottom {
background: repeating-linear-gradient(to right bottom, #00188F, #EC008C 20px);
}
.gradient-left-top {
background: repeating-linear-gradient(to left top, #00188F, #EC008C 20px);
}
.gradient-left-bottom {
background: repeating-linear-gradient(to left bottom, #00188F, #EC008C 20px);
}
.gradient-top {
background: repeating-linear-gradient(to top, #00188F, #EC008C 20px);
}
.gradient-right {
background: repeating-linear-gradient(to right, #00188F, #EC008C 20px);
}
.gradient-bottom {
background: repeating-linear-gradient(to bottom, #00188F, #EC008C 20px);
}
.gradient-left {
background: repeating-linear-gradient(to left, #00188F, #EC008C 20px);
}
.gradient-right-top {
background: repeating-linear-gradient(to right top, #00188F, #EC008C 20px);
}
.gradient-right-bottom {
background: repeating-linear-gradient(to right bottom, #00188F, #EC008C 20px);
}
.gradient-left-top {
background: repeating-linear-gradient(to left top, #00188F, #EC008C 20px);
}
.gradient-left-bottom {
background: repeating-linear-gradient(to left bottom, #00188F, #EC008C 20px);
}
في المثال التالي قمنا بتحديد اتجاه الألوان المتدرجة من خلال تحديد درجة الميل.
المثال الثاني
.gradient-0deg {
background: repeating-linear-gradient(0deg, #00188F, #EC008C 20px);
}
.gradient-45deg {
background: repeating-linear-gradient(45deg, #00188F, #EC008C 20px);
}
.gradient-90deg {
background: repeating-linear-gradient(90deg, #00188F, #EC008C 20px);
}
.gradient-135deg {
background: repeating-linear-gradient(135deg, #00188F, #EC008C 20px);
}
.gradient-180deg {
background: repeating-linear-gradient(180deg, #00188F, #EC008C 20px);
}
.gradient-225deg {
background: repeating-linear-gradient(225deg, #00188F, #EC008C 20px);
}
.gradient-270deg {
background: repeating-linear-gradient(270deg, #00188F, #EC008C 20px);
}
.gradient-315deg {
background: repeating-linear-gradient(315deg, #00188F, #EC008C 20px);
}
.gradient-0deg {
background: repeating-linear-gradient(0deg, #00188F, #EC008C 20px);
}
.gradient-45deg {
background: repeating-linear-gradient(45deg, #00188F, #EC008C 20px);
}
.gradient-90deg {
background: repeating-linear-gradient(90deg, #00188F, #EC008C 20px);
}
.gradient-135deg {
background: repeating-linear-gradient(135deg, #00188F, #EC008C 20px);
}
.gradient-180deg {
background: repeating-linear-gradient(180deg, #00188F, #EC008C 20px);
}
.gradient-225deg {
background: repeating-linear-gradient(225deg, #00188F, #EC008C 20px);
}
.gradient-270deg {
background: repeating-linear-gradient(270deg, #00188F, #EC008C 20px);
}
.gradient-315deg {
background: repeating-linear-gradient(315deg, #00188F, #EC008C 20px);
}
