شرح التدرج الخطي CSS بأمثلة

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

تدرج مع توقفي لوني

بناء الجملة

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

background: linear-gradient(direction, colour-stop1, colour-stop2, ...);

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

أمثلة

من اعلى لاسفل:

background: linear-gradient(red, yellow);
من اعلى لاسفل

من اليسار إلى اليمين :

لجعله اليسار إلى اليمين، يمكنك إضافة معلمة إضافية في بداية linear-gradient()بدءا من كلمة ل مما يدل على الاتجاه:

background: linear-gradient(to right, red , yellow);
من اليسار إلى اليمين

تدرجات قطرية :

يمكنك أيضًا نقل التدرج اللوني قطريًا عن طريق تحديد مواضع البداية الأفقية والرأسية ، على سبيل المثال ، أعلى اليسار أو أسفل اليمين.

إليك عينة من التدرج اللوني يبدأ من أعلى اليسار:

 background: linear-gradient(to bottom right, red, yellow);
أعلى اليسار

استخدام الزوايا لتحديد اتجاه التدرج

يمكنك أيضًا استخدام الزوايا ، لتكون أكثر دقة في تحديد اتجاه التدرج اللوني:

background: linear-gradient(angle, colour-stop1, colour-stop2);

يتم تحديد الزاوية كزاوية بين خط أفقي وخط التدرج.

background: linear-gradient(90deg, red, yellow);
90 درجة

باستخدام أكثر من لونين

لا تقتصر على لونين فقط - يمكنك استخدام العديد من الألوان المفصولة بفواصل كما تريد.

background: linear-gradient(red, yellow, green); 
تدرج مع 3 توقفات لونية

يمكنك أيضًا استخدام تركيبات الألوان الأخرى مثل RGB أو الأكواد السداسية لتحديد الألوان.

يتوقف اللون الصلب

لا يمكنك فقط استخدام التدرجات للانتقال مع الألوان الباهتة ، ولكن يمكنك أيضًا استخدامها للتغيير من لون خالص إلى لون صلب آخر على الفور:

background: linear-gradient(to right,red 15%, yellow 15%);
يتوقف اللون الصلب

معلومات اكثر:

  • دليل CSS: دليل مفيد لـ CSS للمطورين