CSSالدالة linear-gradient()
- فائدة الدالة
- إمالة اللون المتدرج
- تحديد نقاط الدمج
- عرض عدة ألوان متدرجة في وقت واحد
فائدة الدالة
تستخدم هذه الدالة لعرض ألوان متدرجة مستقيمة ليس فيها إنحناء مع جعلها تتمدد لتملئ خلفية العنصر.
إفتراضياً، تدرج الألوان يظهر من الأعلى إلى الأسفل و لكنك تستطيع جعله يظهر بشكل مائل بالدرجة التي تريدها.
في المثال التالي قمنا بإظهار لون متدرج يتكوّن من لونين هما البنفسجي و الوردي.
إمالة اللون المتدرج
هناك العديد من القيم الجاهزة و الوحدات التي يمكنك استخدامها لتحديد اتجاه اللون المتدرج و منها:
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% مما يعني أنه تم وضع نقطة توقف اللون الأخير قبل نقطة توقف اللون الأول الأمر الذي يؤدي إلى عدم إمكانية إظهار اللونين بشكل متدرج و بالتالي فإنها ستظهر كألوان حادة.
عرض عدة ألوان متدرجة في وقت واحد
لعرض عدة ألوان متدرجة في وقت واحد و مندمج يمكنك استخدام 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%); }