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

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

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

فائدة الدالة

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

Default

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

مثال

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

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

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

  • 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: 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-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);
}
.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%);
}
.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%);
}
.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%);
}
.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%); }
جرب الكود
عودة للدرس❯ ❮عودة للدرس