دالة التدرج الخطي () CSS
مثال
يبدأ هذا التدرج الخطي من الأعلى. يبدأ باللون الأحمر ، ويتحول إلى اللون الأصفر ، ثم إلى الأزرق:
#grad {
background-image: linear-gradient(red, yellow, blue);
}
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
تعيّن وظيفة التدرج الخطي () تدرجًا خطيًا كصورة الخلفية.
لإنشاء تدرج خطي ، يجب عليك تحديد توقفي لوني على الأقل. التوقفات اللونية هي الألوان التي تريد تجسيد انتقالات سلسة بينها. يمكنك أيضًا تعيين نقطة بداية واتجاه (أو زاوية) جنبًا إلى جنب مع تأثير التدرج اللوني.
مثال على التدرج الخطي:
الإصدار: | CSS3 |
---|
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الوظيفة بشكل كامل.
الأرقام متبوعة بـ -webkit- أو -moz- أو -o- تحدد الإصدار الأول الذي يعمل مع بادئة.
Function | |||||
---|---|---|---|---|---|
linear-gradient() | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
بنية CSS
background-image: linear-gradient(direction, color-stop1,
color-stop2, ...);
Value | Description |
---|---|
direction | Defines a starting point and a direction (or an angle) along with the gradient effect. |
color-stop1, color-stop2,... | Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a percentage between 0% and 100% or a length along the gradient axis). |
مزيد من الأمثلة
مثال
تدرج خطي يبدأ من اليسار. يبدأ باللون الأحمر ، ويتحول إلى اللون الأزرق:
#grad {
background-image: linear-gradient(to right, red , blue);
}
مثال
التدرج الخطي الذي يبدأ من أعلى اليسار (ويمتد إلى أسفل اليمين):
#grad {
background-image: linear-gradient(to bottom right, red , blue);
}
مثال
تدرج خطي بزاوية محددة:
#grad {
background-image: linear-gradient(180deg, red, blue);
}
مثال
تدرج خطي مع توقفات لونية متعددة:
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
مثال
تدرج خطي مع شفافية:
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
الصفحات ذات الصلة
دروس CSS: تدرجات CSS