التدرجات المخروطية CSS
التدرجات المخروطية CSS
التدرج المخروطي هو تدرج مع انتقالات لونية تدور حول نقطة مركزية.
لإنشاء تدرج مخروطي ، يجب تحديد لونين على الأقل.
بناء الجملة
background-image: conic-gradient([from angle] [at position,] color
[degree], color [degree], ...);
بشكل افتراضي ، الزاوية هي 0deg والموضع هو المركز.
إذا لم يتم تحديد درجة ، فسيتم نشر الألوان بالتساوي حول نقطة المركز.
التدرج المخروطي: ثلاثة ألوان
يوضح المثال التالي تدرجًا لونيًا مخروطيًا بثلاثة ألوان:
مثال
تدرج مخروطي بثلاثة ألوان:
#grad {
background-image: conic-gradient(red, yellow, green);
}
التدرج المخروطي: خمسة ألوان
يوضح المثال التالي تدرجًا لونيًا مخروطيًا بخمسة ألوان:
مثال
تدرج مخروطي بخمسة ألوان:
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
}
التدرج المخروطي: ثلاثة ألوان ودرجات
يوضح المثال التالي تدرجًا مخروطيًا بثلاثة ألوان ودرجة لكل لون:
مثال
تدرج مخروطي بثلاثة ألوان ودرجة لكل لون:
#grad {
background-image: conic-gradient(red 45deg, yellow
90deg, green 210deg);
}
إنشاء المخططات الدائرية
أضف فقط border-radius: 50%لجعل التدرج المخروطي يبدو وكأنه فطيرة:
مثال
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
border-radius: 50%;
}
يوجد هنا مخطط دائري آخر بدرجات محددة لجميع الألوان:
مثال
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow
180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
}
التدرج المخروطي المحدد من الزاوية
تحدد [from angle ] الزاوية التي يدور بها التدرج المخروطي بأكمله.
يوضح المثال التالي تدرجًا مخروطيًا بزاوية من 90 درجة:
مثال
تدرج مخروطي بزاوية من:
#grad {
background-image: conic-gradient(from 90deg, red, yellow,
green);
}
التدرج المخروطي مع موضع مركزي محدد
يحدد [في الموضع ] مركز التدرج المخروطي.
يوضح المثال التالي تدرجًا مخروطيًا مع موضع مركزي بنسبة 60٪ 45٪:
مثال
تدرج مخروطي مع موضع مركزي محدد:
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow,
green);
}
تكرار التدرج المخروطي
تُستخدم repeating-conic-gradient()الوظيفة لتكرار التدرجات المخروطية:
مثال
تدرج مخروطي متكرر:
#grad {
background-image:
repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
}
إليك تدرج مخروطي متكرر مع بدايات ألوان محددة وتوقفات لونية:
مثال
تدرج مخروطي متكرر مع بدايات لونية محددة وتوقفات لونية:
#grad {
background-image:
repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
}
وظائف التدرج CSS
يسرد الجدول التالي وظائف تدرج CSS:
| Function | Description |
|---|---|
| conic-gradient() | Creates a conic gradient. Define at least two colors (around a center point) |
| linear-gradient() | Creates a linear gradient. Define at least two colors (top to bottom) |
| radial-gradient() | Creates a radial gradient. Define at least two colors (center to edges) |
| repeating-conic-gradient() | Repeats a conic gradient |
| repeating-linear-gradient() | Repeats a linear gradient |
| repeating-radial-gradient() | Repeats a radial gradient |