CSSالدالة repeating-conic-gradient()
- فائدة الدالة
- تحديد موقع اللون المتدرج
- تحديد نقاط الدمج
فائدة الدالة
تستخدم هذه الدالة لعرض ألوان متدرجة بشكل أسطواني مع جعلها تتكرر لتملئ خلفية العنصر.
إفتراضياً، الألوان تبدأ من الوسط و تتمدد حتى تملئ خلفية العنصر و تستطيع تغيير مكانها بالشكل الذي تريده.
للإستفادة من هذه الدالة يجب على الأقل أن تحدد عند لها أي زاوية يجب أن يقف اللون الأخير لكي تقوم بتكرار اللون المتدرج نسبةً لهذه الزاوية.
في المثال التالي قمنا بإظهار لون متدرج يتكوّن من 3 ألوان هي الأحمر، الأزرق، الأصفر مع جعل اللون الأخير يتوقف عن زاوية 20 حتى يتم تكرار الألوان إلى أن تصل لزاوية 360.
تحديد موقع اللون المتدرج
هناك العديد من القيم الجاهزة و الوحدات التي يمكنك استخدامها لتحديد موقع اللون المتدرج و منها:
at left
لعرض تدرج الألوان إبتداءاً من اليسار.at center
لعرض تدرج الألوان إبتداءاً من الوسط.at right
لعرض تدرج الألوان إبتداءاً من اليمين.at top
لعرض تدرج الألوان إبتداءاً من الأعلى.at bottom
لعرض تدرج الألوان إبتداءاً من الأسفل.
يمكنك أيضاً استخدام أكثر من قيمة في ذات الوقت لتحديد اتجاه اللون بشكل مائل كما يلي:
at left bottom
لعرض تدرج الألوان إبتداءاً من اليسار و الأسفل.at left top
لعرض تدرج الألوان إبتداءاً من اليسار و الأعلى.at right bottom
لعرض تدرج الألوان إبتداءاً من اليمين و الأسفل.at right top
لعرض تدرج الألوان إبتداءاً من اليمين و الأعلى.
تستطيع تحديد مكان ابتداء اللون المتدرج بعيداً عن الجهة المذكورة كما يلي:
في المثال التالي قمنا بتحديد إتجاه الألوان المتدرجة بواسطة الكلمات المفتاحية at top
- at left
- at right
- at bottom
- at center
تباعاً.
المثال الأول
.gradient-top { background: repeating-conic-gradient(at top, red, blue, yellow); } .gradient-right { background: repeating-conic-gradient(at right, red, blue, yellow); } .gradient-bottom { background: repeating-conic-gradient(at bottom, red, blue, yellow); } .gradient-left { background: repeating-conic-gradient(at left, red, blue, yellow); } .gradient-center { background: repeating-conic-gradient(at center, red, blue, yellow); }
في المثال التالي قمنا بتحديد إتجاه الألوان المتدرجة بواسطة الكلمات المفتاحية at left top
- at right top
- at left bottom
- at right bottom
تباعاً.
المثال الثاني
.gradient-right-top { background: repeating-conic-gradient(at right top, red, blue, yellow); } .gradient-right-bottom { background: repeating-conic-gradient(at right bottom, red, blue, yellow); } .gradient-left-top { background: repeating-conic-gradient(at left top, red, blue, yellow); } .gradient-left-bottom { background: repeating-conic-gradient(at left bottom, red, blue, yellow); }
في المثال التالي قمنا بتحديد إتجاه الألوان المتدرجة بشكل أدق.
المثال الثالث
.gradient-left-30 { background: repeating-conic-gradient(at left 30%, red, blue, yellow); } .gradient-right-30 { background: repeating-conic-gradient(at right 30%, red, blue, yellow); } .gradient-left-30-top-50 { background: repeating-conic-gradient(at left 30% top 50%, red, blue, yellow); } .gradient-right-20-bottom-40 { background: repeating-conic-gradient(at right 20% bottom 40%, red, blue, yellow); }
تحديد نقاط الدمج
إفتراضياً، نقطة الدمج بين كل لونين هي في الوسط بينهما لكي يتم توزيع نسب الألوان بالتساوي على مساحة العنصر. في حال أردت إزاحة هذه النقطة لتغيير نسبةً الدمج فإنك تستطيع إضافة رقم بجانب اللون لتحدد أين يتوقف بالنسبة للعنصر.
لتجعل الدالة تقوم بتكرار الألوان حتى تملئ الخلفية، لا تنسى أنك يجب أن لا تجعل اللون بالأساس يملئ الخلفية.
في المثال التالي تلاعبنا بمكان النقاط الفاصلة بين الألوان حيث أضفنا ثلاث ألوان على النحو التالي:
- اللون الأحمر هو اللون الأول و قد جعلناه يتوقف عند زاوية 10.
- اللون الأزرق هو اللون الثاني و قد جعلناه يتوقف عند زاوية 20.
- اللون الأصفر و الأخير و قد جعلناه يتوقف عند زاوية 30.
المثال الأول
.gradient { background: repeating-conic-gradient(red 10deg, blue 20deg, yellow 30deg); }
في حال وضعت نسبة دمج غير ممكنة فإن الألوان ستظهر و لكن المتصفح لن يظهرها بشكل إنسيابي بل سيظهر كل لون بشكل حاد.
في المثال التالي قمنا بتحديد من أي زاوية لأي زاوية يبدأ و يتوقف كل لون حتى تظهر الألوان بشكل حاد.
المثال الثاني
.gradient { background: repeating-conic-gradient( red 0deg 10deg, blue 10deg 20deg, yellow 20deg 30deg); }