تدرجات CSS
تتيح لك تدرجات CSS عرض انتقالات سلسة بين لونين محددين أو أكثر.
تحدد CSS ثلاثة أنواع من التدرجات:
- التدرجات الخطية (تنخفض / لأعلى / يسار / يمين / قطريًا)
- التدرجات الشعاعية (محددة بمركزها)
- التدرجات المخروطية (تدور حول نقطة مركزية)
التدرجات الخطية CSS
لإنشاء تدرج خطي ، يجب عليك تحديد توقفي لوني على الأقل. التوقفات اللونية هي الألوان التي تريد تجسيد انتقالات سلسة بينها. يمكنك أيضًا تعيين نقطة بداية واتجاه (أو زاوية) جنبًا إلى جنب مع تأثير التدرج اللوني.
بناء الجملة
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
الاتجاه - من أعلى إلى أسفل (هذا افتراضي)
يوضح المثال التالي تدرجًا خطيًا يبدأ من الأعلى. يبدأ باللون الأحمر ، ويتحول إلى اللون الأصفر:
مثال
#grad {
background-image: linear-gradient(red, yellow);
}
الاتجاه - من اليسار إلى اليمين
يوضح المثال التالي تدرجًا خطيًا يبدأ من اليسار. يبدأ باللون الأحمر ، ويتحول إلى اللون الأصفر:
مثال
#grad {
background-image: linear-gradient(to right, red , yellow);
}
الاتجاه - قطري
يمكنك عمل التدرج اللوني قطريًا عن طريق تحديد مواضع البداية الأفقية والرأسية.
يوضح المثال التالي تدرجًا خطيًا يبدأ من أعلى اليسار (ويمتد إلى أسفل اليمين). يبدأ باللون الأحمر ، ويتحول إلى اللون الأصفر:
مثال
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}
باستخدام الزوايا
إذا كنت تريد مزيدًا من التحكم في اتجاه التدرج اللوني ، فيمكنك تحديد زاوية ، بدلاً من الاتجاهات المحددة مسبقًا (إلى الأسفل ، إلى الأعلى ، إلى اليمين ، إلى اليسار ، إلى أسفل اليمين ، وما إلى ذلك). قيمة 0deg تعادل "أعلى". قيمة 90deg تعادل "إلى اليمين". تساوي القيمة 180deg القيمة "لأسفل".
بناء الجملة
background-image: linear-gradient(angle, color-stop1, color-stop2);
يوضح المثال التالي كيفية استخدام الزوايا على التدرجات الخطية:
مثال
#grad {
background-image: linear-gradient(180deg, red, yellow);
}
استخدام توقفات لونية متعددة
يوضح المثال التالي تدرجًا خطيًا (من أعلى إلى أسفل) مع توقفات لونية متعددة:
مثال
#grad {
background-image: linear-gradient(red, yellow, green);
}
يوضح المثال التالي كيفية إنشاء تدرج خطي (من اليسار إلى اليمين) بلون قوس قزح وبعض النصوص:
مثال
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
باستخدام الشفافية
تدعم تدرجات CSS أيضًا الشفافية ، والتي يمكن استخدامها لإنشاء تأثيرات التلاشي.
لإضافة الشفافية ، نستخدم وظيفة rgba () لتحديد التوقفات اللونية. يمكن أن تكون المعلمة الأخيرة في وظيفة rgba () قيمة من 0 إلى 1 ، وهي تحدد شفافية اللون: 0 يشير إلى الشفافية الكاملة ، ويشير 1 إلى اللون الكامل (بدون شفافية).
يوضح المثال التالي تدرجًا خطيًا يبدأ من اليسار. يبدأ بشفافية كاملة ، وينتقل إلى اللون الأحمر الكامل:
مثال
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1));
}
تكرار التدرج الخطي
تُستخدم وظيفة التدرج الخطي المتكرر () لتكرار التدرجات اللونية الخطية:
مثال
تدرج خطي متكرر:
#grad {
background-image:
repeating-linear-gradient(red, yellow 10%, green 20%);
}