4.1 KiB
| title | localeTitle |
|---|---|
| Linear Gradient | الخطي التدرج |
الخطي التدرج
هذا هو كعب. ساعد مجتمعنا على توسيعه .
سيساعدك دليل النمط السريع هذا على ضمان قبول طلب السحب .
معلومات اكثر:
في التدرج الخطي ، تتدفق الألوان في اتجاه واحد ، أي من اليسار إلى اليمين ، من الأعلى إلى الأسفل ، أو أي زاوية تختارها.
تدرج خطي مع توقف لونين
بناء الجملة-
لإنشاء تدرج خطي ، يجب تحديد إيقافين للألوان على الأقل. (وهي الألوان التي يتم إنشاء الانتقالات بينها). يتم الإعلان على إما الخلفية أو خصائص الصورة الخلفية .
background: linear-gradient(direction, colour-stop1, colour-stop2, ...);
ملاحظة: في حالة عدم تحديد أي اتجاه ، يكون النقل من أعلى إلى أسفل بشكل افتراضي
تحولات متدرجة مختلفة
من اعلى لاسفل :
background: linear-gradient(red, yellow);
من اليسار إلى اليمين :
لجعله اليسار إلى اليمين، يمكنك إضافة معلمة إضافية في بداية الخطية التدرج () بدءا من كلمة الذي يشير إلى الاتجاه:
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);
باستخدام أكثر من لونين
لا تقتصر على لونين فقط ، يمكنك استخدام العديد من الألوان المفصولة بفواصل كما تريد.
background: linear-gradient(red, yellow, green);
يمكنك أيضًا استخدام جمل ألوان أخرى مثل RGB أو hex codes لتحديد الألوان.
توقف اللون الصلب
لا يمكنك استخدام التدرجات اللونية فقط للانتقال باستخدام ألوان باهتة ، ولكن يمكنك أيضًا استخدامها للتغيير من لون واحد إلى لون خالص آخر على الفور
background: linear-gradient(to right,red 15%, yellow 15%);
مزيد من المعلومات- تدرج خطي على مستندات Mozilla